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
      }
  }