自定义指令
除了Vue的内置指令为,vue还支持自定义指令
简单的自定义指令
如下所示:
在directives中创建big方法,传入两个参数:
1 element: 绑定的Dom元素
2 binding: 绑定的对象,其value属性即为绑定变量的值
<div id="root"> <h1 v-big="n" ref="a"></h1> <button @click="n++">点我+1</button> </div> <script> const vm = new Vue({ el: "#root", data: { n:1 }, directives:{ big(element, binding){ console.log(element); console.log(binding); } } }); </script>
常规写法
如下所示:
在directives中创建fbind对象,可指定三个方法:
1 bind() 在指令与元素绑定成功时执行
2 insert() 在元素在插入页面时执行
3 update() 在模板重解析时执行
<div id="root"> <button @click="n++">点我n+1</button> <input type="text" v-fbind:value="n"><br><br> </div> <script> const vm = new Vue({ el: '#root', data:{ n:1, }, directives:{ fbind:{ bind(element, binding){ // 指令与元素绑定成功时,一开始 element.value = binding.value }, inserted(element, binding){ // 指令所在元素被插入页面时 element.focus() }, update(element, binding){ // 指令所在模板被重新解析时 element.value = binding.value } } } }) </script>
注意事项
1.指令相关的函数,所有this都指向window
2.Vue不推荐使用驼峰命名,最好用-相连,指令函数名用字符串,如下:
directives:{ "other-people"(element, binding){ element.value = "不要驼峰命名" } }