vue自定义指令

一、vue-directive自定义指令

比如我们自己写一个v-green指令，字体颜色变成绿色，先直接上代码：

1.directive.html
<div id="app">
   <div v-green="color" id="dom1">{{num}}</div>
   <div @click="add">
       <button type="">add</button>
   </div>
</div>
2.directive.js
Vue.directive('green',function (el,binding,vnode) {
   el.style = 'color:' + binding.value
})

运行结果：

二、自定义指令中传递的三个参数

• el:指令所绑定的元素，可以用来直接操作DOM。
• binding:一个对象，这个对象中包含很多指令信息。
• vnode:vue编译生成的虚拟节点。

在浏览器中输出el,binding,vnode：

三、自定义指令的生命周期

自定义指令有五个生命周期（也叫钩子函数）

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

2. inserted:被绑定元素插入父节点时调用。

3. update:被绑定于元素所在的模板更新时调用。

4. componentUpdated:被绑定元素所在模板完成一次更新周期时调用。

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

    unbind.html
     <div style="text-align: center">
        <button onclick="unbind()">解绑</button>
    </div>
    unbind.js
      <script>
        //解绑
          function unbind() {
            app.$destroy()
        }
        // 自定义指令生命周期
        Vue.directive('green',{
            bind: function (el,binding) {   
                el.style = 'color:' + binding.value   
                console.log('bind');
            },
            inserted: function () {
                console.log('inserted');
            },
            update: function () {
                console.log('update');
            },
            componentUpdated: function () {
                console.log('componentUpdated');
            },
            unbind: function () {
                console.log('unbind');
            }
        })
      </script>