Vue自定义指令

Vue自定义指令

先来了解一下vue的内置指令（v-开头的是指令）：v-if、v-else、v-show、v-for、v-once、v-model、 v-on（@）、v-bind（:）、v-text、v-html等。

自定义指令directives，和内置指令的区别，directives主要是需要对普通dom元素进行操作时，就需要用到自定义指令。
（vue使用自定义指令操作底层dom，原生js用document.getElementById()来操作真实dom。vue的指令相比原生提高了性能，它选择操控内存vDom虚拟对象，建立数据和视图之间的联系，数据驱动去更改视图渲染。 ）

directives的用法：

1.注册一个全局自定义指令
第一个参数：指令名称（起个名，不带v-）。第二个参数是个对象，提供了自定义钩子函数inserted(下面还有其他的函数)，el是这个钩子函数的参数(下面还有其他的参数)，当这个指令绑定了元素的时候，代表拿到这个元素的真实DOM了，然后给他添加方法。

<div id="box">
        <input id="input" type="text" v-focus>
</div>

 //全局注册自定义指令钩子：v-focus
        Vue.directive("focus",{
            //当被绑定元素插入到父节点的时候，就会触发inserted钩子函数
            inserted(el){
                el.focus()
            }
        })

2.注册一个局部自定义指令
特点:局部自定义指令directives，加s

new Vue({
            el:"#box",
            directives:{
                focus:{
                    inserted(el){
                        el.focus()
                    }
                } 
            }
        })

自定义钩子函数

自定义指令第二个参数是个对象，里面提供了几种自定义钩子函数。

bind：只调用一次，指令第一次绑定到元素时调用。用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted：被绑定元素插入父节点时调用（父节点存在即可调用）。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次， 指令与元素解绑时调用。

钩子函数参数(常用el和binding)

el：指令所绑定的元素，可以用来直接操作 DOM 。

binding：一个对象，包含以下属性(常用value参数，解析传来的数据)

1. name：指令名，不包含v-的前缀；
2. value：指令的绑定值；例如：v-my-directive=“1+1”，value的值是2，binding.value拿到解析变量后的数据；
3. oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子函数中可用，无论值是否改变都可用；
4. expression：绑定值的字符串形式；例如：v-my-directive=“1+1”，expression的值是’1+1’；
5. arg：传给指令的参数；例如：v-my-directive:foo，arg的值为 ‘foo’；
6. modifiers：一个包含修饰符的对象；例如：v-my-directive.a.b，modifiers的值为{‘a’:true,‘b’:true}

vnode：Vue编译的生成虚拟节点；

oldVnode：上一次的虚拟节点，仅在update和componentUpdated钩子函数中可用。
　　
简单案例

<div id="app">
     <!--一个双引号括起来的是变量"red"，潜逃一个单引号的是字符串"'pink'"，变量没定义会报错-->
      <p v-color="'pink'">pink</p>
      <p v-color="red">pink</p>
      
      <p v-color="orange">我是橙色</p>
      {{orange}}
      <!--这里如果用bind绑定，那么单击后颜色不改变，所以数据改变更新，调用update-->
      <button @click="orange='green'">点击更改橙色</button>
    </div>

Vue.directive("color",{
   bind(el,binding){  //注意了，bind只是初始化调用一次
         el.style.background = binding.value
   },
   //点击改变时，数据改变更新，调用update
   update(el,binding){
         el.style.background = binding.value
   }
})
new Vue({
    el: '#app',
    data:{
        red:"red",
        orange:"orange"
    }
})

简写逻辑相同的钩子函数

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