前言:
自定义指令的作用和使用场景一般是,dom操作的一些逻辑的封装
一、局部和全局自定义指令
局部:
directives: {
color: {
bind(el, binding) {}
}
}
全局:
Vue.directive('color', function(el, binding) {})
二、自定义指令的钩子函数
1、vue2中
bind:只调用一次,在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind:只调用一次,指令与元素解绑时调用。
2、vue3中
created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted
三、钩子函数参数(即 el、binding、vnode 和 oldVnode)
1、vue2中
el---
指令所绑定的元素,可以用来直接操作 DOM。
binding---
一个对象,包含以下 property:
value:指令的绑定值。 eg: v-color="2" '2'
oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression:字符串形式的指令表达式。
arg:传给指令的参数。 eg: v-color:once 'once'
modifiers:一个包含修饰符的对象。 eg: v-color:once.xx
vnode---
Vue 编译生成的虚拟节点。
oldVnode---
上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
2、vue3中
binding.instance可以获取当前组件实例
四、具体实用场景
v-copy
v-longpress
v-debounce
v-emoji 表单验证
v-LazyLoad
v-permission 按钮权限验证
vue-waterMarker 添加水印
v-draggable