1.自定义指令
1.1 什么是自定义指令
vue官方提供了v-text、v-html、v-model、v-if等一些常用的指令。除此之外vue还允许开发者自定义指令。
1.2 自定义指令的分类
vue将自定义指令分为 两类
- 私有自定义指令
- 全局自定义指令
1.3 私有自定义指令
在每个vue组件中，可以在directives节点下声明私有自定义指令
- 私有自定义指令只在这个组件中生效
示例代码如下：
directives: {
color: {
bind(el) {
el.style.color = "red";
},
},
},
- color:指定的是指令的名称，使用的时候要加前面加个v-,v-color
- bind:只会调用一次，是指 指令第一次绑定到元素时会调用 （bind函数触发的时机是指令第一次绑定到元素身上时触发）
- el：是指绑定的这个dom元素本身
- v-color这个指令的作用就是给指定dom元素设置字体颜色为红色
使用如下：
90.png
实现效果：
91.png
1.3.1 获取指令绑定的值 binding
92.png
控制台输出
93.png
- name:指令的名称
- rawName:指令的全称
- value:指定绑定的值
所以我们可以通过第二个参数的属性value（参数名随便取，只要符合标识符的规则）来动态设置值，而设置一个固定的值。
所以可以将指令修改为：
directives: {
color: {
bind(el, binding) {
el.style.color = binding.value;
},
},
},
具体实现效果如下：
94.png
1.3.2 update函数（页面数据发生更新，会触发这个函数）
- 但第一次指令绑定到元素身上时不会触发update函数，只有后续更新才会触发这个update函数，bind函数和update函数的参数列表是一样的。
95.png
1.3.3 函数简写
如果bind函数和update函数中的逻辑完全相同，则对象格式的自定义指令可以简写为函数格式：
96.png
等价于下面的这些代码：
97.png
1.4 全局自定义指令
全局共享的自定义指令需要通过 Vue.directive()进行声明
// 第一个参数为字符串，指令的名称
// 第二个参数是一个对象，用于接收指令的参数值
Vue.directive("color",{
bind(el,binding){
el.style.color=binding.value;
},
update(el,binding){
el.style.color=binding.value;
}
})
以下是上面的代码简写的形式（因为bind和update的逻辑处理是一致的）：将bind函数和update函数写在一块了
// 第一个参数为字符串，指令的名称
// 第二个参数是一个对象，用于接收指令的参数值
Vue.directive("color",function(el,binding){
el.style.color=binding.value;
})
2. 总结
自定义指令.png
