Vue自定义指令

1、私有自定义指令

<div v-color="'red'">调用自定义指定</div>

export default{

directives:{
//定义名为color的指令，指向一个内置对象
    color:{

//当指令第一次绑定到元素的时候，立即触发 bind 函数
//形参中的el是绑定指令的DOM对象

    bind(el, binding) {
        el.style.color = binding.value;        //binding.value获取指令绑定的值
        console.log(binding.value);
      },
//当DOM更新的时候会触发 update 函数
   update(el, binding) {
        el.style.color = binding.value;
      },
  },


}

内容一样的时候可以简写成

export default{

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

}

2、全局自定义指令

Vue.directive('color',{
   bind(el, binding) {
        el.style.color = binding.value;
        console.log(binding.value);
      },
      update(el, binding) {
        console.log("aa");
        el.style.color = binding.value;
      },
})

简写

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