Vue.js指令篇之自定义指令

Vue.js除了默认的核心指令，也提供了自定义指令的功能。通常，我们可以通过自定义指令进行dom元素操作。

本文通过讲解一个小例子，来进行说明：

Vue.directive('directive-demo',{
                bind:function (el){
                    el.style.color = "blue";
                }
            })

上面就是自定义全局指令的方式，调用Vue的directive方法，第一个参数传入的是指令名称，第二个参数传入的是指令勾子函数，勾子函数的参数el就是当前绑定指令的dom对象。这里我们实现的效果是，绑定指令后将dom元素的颜色值自动改为蓝色。

自定义指令注册好后，就可以在模板中使用v-directive-demo`绑定：

    <div id="app">
        <input type="text" v-directive-demo value="test">
    </div>

绑定自定义指令也相当于标签的一个自定义属性，只不过这个属性是已v-开头，而且在浏览器解析的时候，会自动擦除这个属性。

指令函数有以下勾子函数可以实现：

• bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。可以用来添加事件处理器或只需要运行一次的高耗任务
• inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
• update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）
• componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
• unbind: 只调用一次， 指令与元素解绑时调用。