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: 只调用一次, 指令与元素解绑时调用。