1.什么是自定义指令
vue官方提供了v-if、v-text、v-for、v-model等常用的指令。除此之外vue还允许开发者自定义指令。
2.自定义指令的分类
私有自定义指令
全局自定义指令
3.私有自定义指令
在每个vue组件中,可以在directives节点下声明私有自定义指令。示例代码如下:
directives: {
// 定义名为color的指令,指向一个配置对象
color(el, binding) {
// 当指令第一次被绑定到元素上的时候,会立即出发bind函数
// 形参中的el代表绑定此指令的DOM对象
el.style.color = binding.value;
},
// 在DOM更新的时候,会触发update函数
update(el, binding) {
console.log("触发了v-color的update函数");
el.style.color = binding.value;
},
},
4.全局自定义指令
全局共享的自定义指令需要通过 " Vue.directive() " 进行声明,示例代码如下:
// 参数1:字符串,表示全局自定义指令的名字
// 参数2:对象,用来接收指令的参数值
Vue.directive('color',function(el,binding){
el.style.color=binding.value
})