Vue自定义指令的妙用

什么是自定义指令

vue官方提供了v-text、v-for、v-model、v-if等常用的指令。除此之外Vue还允许开发者自定义指令。
分类：私有自定义指令、全局自定义指令

私有自定义指令

在当前组件使用

使用私有定义指令

<h1 v-color="color">App 根组件</h1>
 <p v-color="'blue'">测试</p>

私有自定义指令的节点

directives:{
// 定义名为 color 的指令，指向一个配置对象
color:{
// 当指令第一次被绑定到元素上的时候，会立即触发 bind 函数
      // 形参中的 el 表示当前指令所绑定到的那个 DOM 对象
      //第二个参数为对象
      bind(el, binding) {
        console.log('触发了 v-color 的 bind 函数')
        //通过对象.value就可以拿到对象传递的值
        el.style.color = binding.value
      					}
      }     
}

directives:{
color:
{
 bind(el, binding) { 
        el.style.color = binding.value
			        }
//bind函数只调用一次:当指令第一次绑定到元素时调用，当DOM跟新时bind函数不会触发。update函数会在每次DOM更新时被调用
 update(el, binding) {
        console.log('触发了 v-color 的 update 函数')
        el.style.color = binding.value
					  }   
 color(el, binding) {
      el.style.color = binding.value
    				}
    						
}
			}

优化(函数简写)

 directives: {
   color(el, binding) {
      el.style.color = binding.value
   							 }
  }

全局自定义指令

全局自定义指令需要通过"Vue.directive()"进行声明，示例代码如下：

全局声明的自定义指令和过滤函数都需要放在main文件里面

Vue.directive('color', {
  bind(el, binding) {
   el.style.color = binding.value
  },
    update(el, binding) {
     el.style.color = binding.value
  }
}) 

简写：

Vue.directive('color', function(el, binding) {
  el.style.color = binding.value
})