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){
//...
})
