一：什么是指令？
在vue中，看到v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能。
二：如何实现？
注册一个自定义指令有全局注册和局部注册
全局注册Vue.directive方法进行注册
第一个参数是指令的名称，第二个参数可以是对象，页可以是一个指令函数。
局部注册通过在组件options选项中设置directive属性
自定义指令的钩子函数：
- bind:只调用一次，指令第一次绑定到元素时调用。在这里进行一次性的初始化设置。
- inserted: 被绑定元素插入父节点时调用。
- update：所有组件的VNode更新时调用。
- componentUpdated:指令所在组件的VNode及其子VNode全部更新后调用。
- unbind:只调用一次，指令与元素解绑时调用
所有的钩子函数的参数如下：
-
el：指令所绑定的元素，可以用来直接操作dom
-
binding--一个对象，包含一下property
- name：指令名，不包括v-前缀
- value： 指令的绑定值
- oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用
- expression：字符串形式的指令表达式
- arg：传给指令的参数
- modifiers：一个包含修饰符的对象
-
vnode：Vue编译生成的虚拟节点
-
oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用
三：应用场景
防抖，图片懒加载，一键Copy的功能
防抖
Vue.directive('throttle', {
bind: (el, binding) => {
let throttleTime = binding.value
if(!throttleTime){
throttleTime = 2000;
}
let cbFun
el.addEventListener('click', event => {
if(!cbFun){
cbFun = setTimeout(()=>{
cbFun = null
}, throttleTime)
}else{
event && event.stopImmediatePropagation()
}
}, true)
}
})
图片懒加载 一键copy的功能 拖拽指令 页面水印 权限校验
