Directive對元素標(biāo)簽進(jìn)行自定義指令封裝
自定義指令定義
directives: {
skeleton: {
bind(el, binding) {
console.log('====bind====');
console.log(el);
console.log(binding);
},
inserted(el, binding) {
console.log('====inserted====');
console.log(el);
console.log(binding);
},
update(el, binding) {
console.log('====update====');
console.log(el);
console.log(binding);
}
}
1.自定義集合關(guān)鍵字directives，可定義多個自定義指令
2.采用key和value形式定義單個指令
3.自定義指令捕獲三個狀態(tài)
3.1 bind(el, binding) 元素綁定他炊，只會觸發(fā)一次
3.2 inserted(el, binding) 元素插入dom樹友题，秩铆，只會觸發(fā)一次
3.3 update(el, binding)元素?cái)?shù)據(jù)更新倒庵，會觸發(fā)多次
el為被自定義指令標(biāo)記的元素
image.png
binding為相關(guān)自定義附加屬性
image.png
自定義指令標(biāo)記
自定義指令標(biāo)記元素采用的形式如下
<img class="w-100 mb-2" style="min-height: 100px;" v-skeleton.img="item.src">
自定義指令：skeleton
自定義指令標(biāo)記在元素： v-skeleton
v-skeleton.img:會提現(xiàn)自定義組件的binding中怕午，可傳遞值陋守，如下圖modifiers和value進(jìn)行提取
image.png
