vue官方文档中介绍了两种自定义指令的方法:全局自定义和局部自定义。
全局自定义组件可以在main.js中直接注册。领用directive方法:
// 自定义一个全局自定义指令 v-addOne
Vue.directive("addOne",{
bind: function(){
//只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
},
inserted: function(){
//被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)
},
update: function(){
// 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新
},
componentUpdated: function(){
//被绑定元素所在模板完成一次更新周期时调用。
},
unbind: function(){
// 只调用一次, 指令与元素解绑时调用。
}
})
结构模板中使用: <div v-addOne></div>
局部自定义组件:在组件中添加一个directives选项:
directives: {
addOne:{
// 里面和全局注册的钩子函数一样
}
}
若是自定义的指令只使用update时,直接传入函数即可,如下:
Vue.directive('my-directive',function(){
// ............
})
自动获取input焦点的示例
//注册一个全局自定义指令v-focus
html部分:<input v-focus>
Vue.directive('focus', {
// 当绑定元素插入到DOM中
inserted: function (el) {
// 聚焦元素
el.focus()
}
});
var app = new Vue({
el: '#app'
});
当指令需要多个值时也可以传入一个字面量对象
<div id="hook-arguments-example" v-demo-directive="{ color: 'white', text: 'hello!' }"></div>
Vue.directive('demoDirective', function(el, binding, vnode){
console.log(binding.value.color);
console.log(binding.value.text);
});
var demo = new Vue({
el: '#hook-arguments-example'
})