Vue自定义指令 例：解决异常图片情况

全局自定义指令

• v-on:keyup.enter="()=>{}"

• v-指令名:属性名.修饰符=’值‘

• 定义

input  v-xxx

Vue.directive('指令名',{
    自定义指令的生命周期
    bind:绑定时，自定义指令绑定于相应dom时执行（类似于vue生命周期的beforeMount）
    bind(dom,obj,vnode){
        dom:指令所在dom
        obj:{
            属性名
            修饰符
            值
        }
        vnode:虚拟dom节点信息
           context:能获取指令所在组件的实例对象        
    }
    inserted:指令所在dom添加到父节点时执行，渲染时（类似于以前的mounted）
    inserted（dom,obj,vnode）{
        
    },
    update:更新时，不保证更新完成（指令所在组件有更新时执行），不保证该更新和当前指令所在dom有关 
    update(dom,obj,vnode){
        dom:当前指令所在dom
        obj:{
            属性名
            修饰符
            值   
        }
        vnode:context:获取指令所在组件的实例对象
    }
    
    componentUpdated:更新完成时，指令所在组件更新完成（类似于以前vue生命周期的updated）
    unbind:解除绑定，类似于beforeDestroy
})

局部自定义指令

directieves:{
    指令名:{
        bind,
        inserted,
        update,
        componentUpdated,
        unbind
    }
}

例：自定义指令-解决异常图片情况

 main.js中全局注册自定指令

 使用：