在Vue中除了默认的核心指令，Vue 也允许注册自定义指令。在Vue里代码复用的主要形式和抽象是组件。然而有的情况下，仍然需要对纯 DOM 元素进行底层操作，这时候就会用到自定义指令。
自定义指令分类：
<1>全局自定义指令：Vue.directive("指令名称",callback)
Vue.directive('focus',{}) 第二个参数是一个对象,对象内部有个 inserted() 的函数,函数有 el 这个参数.
el 这个参数表示了绑定这个指令的 DOM元素,在这里就是后面那个有 placeholder 的 input
el 就等价于 document.getElementById('el.id')
可以利用 $(el) 无缝连接 jq
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
<div id="app">
<input type="text" v-focus/>
</div>
<2>局部自定义指令：directives:{"指令名称",{}}
可以注册局部指令，组件或Vue构造函数中接受一个 directives 的选项。
new Vue({
el: '#app',
directives:{
focus:{
inserted: function (el) {
el.focus()
}
}
}
})
<div id="app">
<input type="text" v-focus/>
</div>
自定义指令的生命周期：
bind(){} 绑定元素时被调用.只调用一次.
inserted() 绑定了指令元素插入到父元素上时触发
updated() 所在组件的VNode更新时调用.
componentUpdate 指令所在的组件的VNode以及其子VNode 全部更新后调用.
unbind: 指令和元素解绑的时候调用,只调用一次
Vue.directive('pic',{
bind() {
// 绑定元素时被调用.只调用一次
console.log('bind')
},
inserted() {
// 绑定了指令元素插入到父元素上时触发
console.log('inserted')
},
updated() {
// 所在组件的`VNode`更新时调用.
console.log('updated')
},
componentUpdated() {
// 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
console.log('componentUpdated')
},
unbind() {
// 只调用一次，指令与元素解绑时调用.
console.log('unbind')
}
})
接下来会为大家写几个对应的案例，但是在写案例之前需要明白几个指令钩子函数里面的参数：
el: 绑定指令的那个dom元素
binding: 具体的对象
name : v-pic==pic不包括前面的v-
valule : 指令后面的值 v-pic='item' value=item
oldValue 前一个值,只能在 update & componentUpdate 中使用.
expression : v-pic='1+1',如果是 value = 2 ,如果是 expression = 1 + 1
arg: 指令传递的参数 ,比如 v-pic:msg arg = msg
modifiers : 比如 v-msg.a.b modifiers = {a:true,b:true}
vnode:Vue编译生成的虚拟节点.
oldVnode:上一个虚拟节点,仅在 update & componentUpdated 中可用
案例：图片懒加载
Vue.directive('pic', {
//钩子函数
inserted(el,binding,vNode) {
// el：指令所绑定的元素，可以用来直接操作 DOM 。
function loadpic(el,binding){
if(!el.src){
el.src=binding.value;
}
}
// console.log(binding)
const io=new IntersectionObserver(item=>{
item.forEach(ioe=>{
// target 被观察的目标元素，是一个 DOM 节点对象
const el=ioe.target;
// intersectionRatio 目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
const intersectionRatio=ioe.intersectionRatio;
if(intersectionRatio>0&&intersectionRatio<=1){
loadpic(el,binding)
}
el.onload=el.onerror=()=>io.unobserve(el);
// 当图片加载成功或是失败时就停止观察
})
})
io.observe(el);
}
})
<div id="app">
<img v-pic="路径"/>
</div>
案例：节流函数
Vue.directive("debounce", {
inserted: function (el, binding) {
let timer;
el.addEventListener('keyup', () => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
binding.value()
}, 300)
})
}
}
<div id="app">
<input type="text" v-debounce="search"/>
</div>
如若感觉还行，请帮忙点个赞！！！！
