Directive对元素标签进行自定义指令封装
自定义指令定义
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.自定义集合关键字directives，可定义多个自定义指令
2.采用key和value形式定义单个指令
3.自定义指令捕获三个状态
3.1 bind(el, binding) 元素绑定，只会触发一次
3.2 inserted(el, binding) 元素插入dom树，，只会触发一次
3.3 update(el, binding)元素数据更新，会触发多次
el为被自定义指令标记的元素
image.png
binding为相关自定义附加属性
image.png
自定义指令标记
自定义指令标记元素采用的形式如下
<img class="w-100 mb-2" style="min-height: 100px;" v-skeleton.img="item.src">
自定义指令：skeleton
自定义指令标记在元素： v-skeleton
v-skeleton.img:会提现自定义组件的binding中，可传递值，如下图modifiers和value进行提取
image.png
