Vue 2自定义指令入门
Vue 2自定义指令入门
Vue自定义指令允许我们在DOM元素上添加自己想要的行为来扩展Vue的功能。
一个自定义指令需要一个名称和一个定义对象。在定义对象中，你可以使用一些钩子函数来控制指令的行为：
- bind：在指令被绑定到元素上时使用，只调用一次。可以用来初始化一些值。
- inserted：在被绑定元素插入父节点时调用。可以用来执行初始的DOM操作，比如设置焦点/绑定事件。
- update：在被绑定元素的值更新时调用，无论绑定值是否改变。可以用来响应值的更新。可能发生在其子VNode更新之前。
- componentUpdated：指令所在组件的VNode及其子VNode全部更新后调用。
- unbind：指令与元素解绑时调用，清除绑定的一些事件监听器。
下面给出一个简单的示例：
<!DOCTYPE html>
<html><head><title>Vue Custom Directive Demo</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><input v-model="colorValue" v-change-color style="width: 50px;" /></div><script>Vue.directive('change-color', {inserted: function (el) {el.addEventListener('input', function () {el.style.color = el.value})}})var vm = new Vue({el: '#app',data: {colorValue: 'black'}});</script>
</body></html>
Vue自定义指令的钩子函数接受一些参数，这些参数提供了有关指令的上下文信息及对应的DOM元素：
- bind(el,binding,vnode):
- el：绑定指令的元素。
- binding：一个对象，包含以下属性：
- name：指令名称，不包括
v-前缀。 - value：指令的绑定值，可以是一个表达式或变量。
- oldValue：指令之前的绑定值。
- expression：绑定值的表达式字符串形式。
- arg：指令参数，例如
v-my-directive:arg中的arg。 - modifiers：修饰符对象，例如
v-my-directive.modifier1.modifier2中，修饰符对象为{modifier1:true,modifier2:true}。
- name：指令名称，不包括
- vnode：Vue编译生成的虚拟节点。
- inserted(el,binding,vnode)
- update(el,binding,vnode,oldVnode):
- oldVnode：之前的虚拟节点，用于比较更新。
- componentUpdated(el,binding,vnode,oldVnode)
- unbind(el,binding,vnode)
我们也可以使用v-my-directive:[arg]="value"的形式来使用动态参数。
<!DOCTYPE html>
<html><head><title>Vue Custom Directive with Dynamic Argument</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><p v-mydirective:[arg1]>Hello World</p></div><script>Vue.directive('mydirective', {bind: function(el, binding, vnode) {console.log(binding.arg);el.style[binding.arg] = '5px solid red';}});var vm = new Vue({el: '#app',data: {arg1: 'border'}});</script>
</body></html>
bind和update的函数简写
同时定义bind和update而不考虑其他钩子函数：
Vue.directive('mydirective',function(el,binding){//...
})