vue自定义指令

指令：即把一些功能单独拎出来。

1. 指令以v-开头，以区别标签的内置属性和自定义属性
2. 指令是用来操作DOM的
3. 指令有全局指令和局部指令，全局指令在main.js中定义，局部指令在组件内定义
   局部的自定义指令写在directives对象内，directives与methods平级。

1、定义一个自定义指令

使用Vue.directive方法来定义一个自定义指令，第一个参数是指令名称，第二个参数一个配置对象

Vue.directive('highlight',{
  bind(el,binding,vnode){
    el.style.background=binding.value;
  },
  update(el,binding,vnode,oldvnode){

  },
  inserted(el,binding,vnode){

  },
  componentUpdated(el,binding,vnode,oldvnode){

  },
  unbind(el,binding,vnode){

  }
})

配置对象中包含5个可选的钩子函数，前两个bind和updated常用

1. bind，绑定这个指令时触发，只触发一次
   含有三个参数：
   第一个el，是所绑定的哪个元素；
   第二个参数binding，绑定指令时传的参数；
   第三个参数vnode，虚拟DOM节点。

2. update，有更新时触发
   第四个参数oldvnode，旧的虚拟DOM

3. inserted，当插入到当前的DOM时调用

4. componentUpdated，完成更新时调用

5. unbind指令与元素解绑时调用

2、使用

使用v-highlight这个自定义指令，并且传值为一个字符串"yellow"，那么这个div元素的背景就是yellow。
注意：传一个字符串的值，有两对引号，如果只有一对引号，那么传的是一个变量。

 <div class="box" v-highlight='"yellow"'></div>

3、自定义指令的传值

1、接收指令等号后的值

通过v-highlight=’“yellow”'等号穿过来的值，那么通过binding.value就可以接收到。

bind(el,binding,vnode){
    el.style.background=binding.value;
  },

通过等号传的值也可以是一个对象。

2、接收指令冒号后的值

通过v-highlight:color冒号后，传了一个color，
在指令定义中，通过binding.arg就获取到字符串’color’，
注：冒号后传的color不带引号，但是binding.arg得到的就是字符串’color’。

<div class="box" v-highlight:color='"yellow"'>一段文字</div>

4、自定义指令的修饰符

通过binding.modifiers接收一个包含修饰符的对象。

<div class="box" v-highlight:color.delay='"yellow"'>一段文字</div>

通过.delay传了一个修饰符
那么在binding.modifiers接收一个对象

{
delay: true
}

所以可以根据这个，在定义指令时做一些操作。
如果binding.modifiers[‘delay’]为true，即标签中通过.delay传了修饰符，就怎样怎样。

Vue.directive('highlight',{
  bind(el,binding){
    if(binding.modifiers['delay']){
      setTimeout(()=>{
        el.style.background=binding.value;
      },3000)
    }else{
      el.style.background=binding.value;
    }
  },
})

注：冒号不能写在修饰符后面（如.a:color），否则会被当成修饰符的一部分。
修饰符可以写多个，在点后面跟着点就可以了。.a.b.c.d