除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。官网
1.分类 => 全局 、局部
自定义指令有全局指令和局部自定义指令
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
局部
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
然后就可以在模板中的任何元素中使用指令
<input v-focus>
2.钩子函数
钩子函数总共有5个
bind:指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:插入父节点时
updated:所在组件的VNode更新时,可可能在子VNode更新前。指令的值可能发生看改变,也可能没有。
componentUpdated:指令所在组件的VNode及其子VNode更新时调用
unbind:指令与元素解绑时调用。
3.钩子函数的参数
主要有四个参数:el,binding,vnode,oldvnode。
el:指令所绑定的元素,可以用来直接操作DOM
bingding:一个对象,包含很多属性
vnode:Vue生成的虚拟节点
oldvnode:上一个虚拟节点。仅在 update 和 componentUpdated 钩子中可用
除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。
4.demo
Vue.directive('drag', {
inserted:function(el){
el.onmousedown=function(e){
let l=e.clientX-el.offsetLeft;
let t=e.clientY-el.offsetTop;
document.onmousemove=function(e){
el.style.left=e.clientX-l+'px';
el.style.top=e.clientY-t+'px'; };
el.onmouseup=function(){
document.onmousemove=null;
el.onmouseup=null;
}
}
}
})
5. 注意事项
不支持驼峰式写法,指令命名统一为小写,所以,还是用’-‘或者’_'分割吧。