Class6 directive自定义指令

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