在Vue中除了默認(rèn)的核心指令槽奕，Vue 也允許注冊自定義指令稻励。在Vue里代碼復(fù)用的主要形式和抽象是組件禀梳。然而有的情況下，仍然需要對純 DOM 元素進(jìn)行底層操作利耍，這時(shí)候就會用到自定義指令蚌本。
自定義指令分類：
<1>全局自定義指令：Vue.directive("指令名稱",callback)
Vue.directive('focus',{}) 第二個(gè)參數(shù)是一個(gè)對象,對象內(nèi)部有個(gè) inserted() 的函數(shù),函數(shù)有 el 這個(gè)參數(shù).
el 這個(gè)參數(shù)表示了綁定這個(gè)指令的 DOM元素,在這里就是后面那個(gè)有 placeholder 的 input
el 就等價(jià)于 document.getElementById('el.id')
可以利用 $(el) 無縫連接 jq
// 注冊一個(gè)全局自定義指令 v-focus
Vue.directive('focus', {
// 當(dāng)綁定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
<div id="app">
<input type="text" v-focus/>
</div>
<2>局部自定義指令：directives:{"指令名稱",{}}
可以注冊局部指令隘梨，組件或Vue構(gòu)造函數(shù)中接受一個(gè) directives 的選項(xiàng)程癌。
new Vue({
el: '#app',
directives:{
focus:{
inserted: function (el) {
el.focus()
}
}
}
})
<div id="app">
<input type="text" v-focus/>
</div>
自定義指令的生命周期：
bind(){} 綁定元素時(shí)被調(diào)用.只調(diào)用一次.
inserted() 綁定了指令元素插入到父元素上時(shí)觸發(fā)
updated() 所在組件的VNode更新時(shí)調(diào)用.
componentUpdate 指令所在的組件的VNode以及其子VNode 全部更新后調(diào)用.
unbind: 指令和元素解綁的時(shí)候調(diào)用,只調(diào)用一次
Vue.directive('pic',{
bind() {
// 綁定元素時(shí)被調(diào)用.只調(diào)用一次
console.log('bind')
},
inserted() {
// 綁定了指令元素插入到父元素上時(shí)觸發(fā)
console.log('inserted')
},
updated() {
// 所在組件的`VNode`更新時(shí)調(diào)用.
console.log('updated')
},
componentUpdated() {
// 指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
console.log('componentUpdated')
},
unbind() {
// 只調(diào)用一次轴猎，指令與元素解綁時(shí)調(diào)用.
console.log('unbind')
}
})
接下來會為大家寫幾個(gè)對應(yīng)的案例嵌莉，但是在寫案例之前需要明白幾個(gè)指令鉤子函數(shù)里面的參數(shù)：
el: 綁定指令的那個(gè)dom元素
binding: 具體的對象
name : v-pic==pic不包括前面的v-
valule : 指令后面的值 v-pic='item' value=item
oldValue 前一個(gè)值,只能在 update & componentUpdate 中使用.
expression : v-pic='1+1',如果是 value = 2 ,如果是 expression = 1 + 1
arg: 指令傳遞的參數(shù) ,比如 v-pic:msg arg = msg
modifiers : 比如 v-msg.a.b modifiers = {a:true,b:true}
vnode:Vue編譯生成的虛擬節(jié)點(diǎn).
oldVnode:上一個(gè)虛擬節(jié)點(diǎn),僅在 update & componentUpdated 中可用
案例：圖片懶加載
Vue.directive('pic', {
//鉤子函數(shù)
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 被觀察的目標(biāo)元素锐峭，是一個(gè) DOM 節(jié)點(diǎn)對象
const el=ioe.target;
// intersectionRatio 目標(biāo)元素的可見比例中鼠，即intersectionRect占boundingClientRect的比例，完全可見時(shí)為1沿癞，完全不可見時(shí)小于等于0
const intersectionRatio=ioe.intersectionRatio;
if(intersectionRatio>0&&intersectionRatio<=1){
loadpic(el,binding)
}
el.onload=el.onerror=()=>io.unobserve(el);
// 當(dāng)圖片加載成功或是失敗時(shí)就停止觀察
})
})
io.observe(el);
}
})
<div id="app">
<img v-pic="路徑"/>
</div>
案例：節(jié)流函數(shù)
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>
如若感覺還行援雇，請幫忙點(diǎn)個(gè)贊！Ｗ笛铩１共！
