vue的自定义指令

vue的自定义指令用法

vue.directive('指令名',{
    //在使用该指令的标签插入到html文档中的时候触发（既将标签渲染到页面中的时候），只触发一次
    inserted(el,binding){
        //el:使用该指令的标签
        //binding:记录使用该指令时传入的对象，里面包括传入的值value
    },
    //在传入的数据发生变化的时候触发
    update(el,binding){
        
    }
})

例如：

// 自定义头像指令
Vue.directive('imgErr', {
  inserted(el, binding) {
    // 监听使用指令时有错误
    el.addEventListener('error', function() {
      el.src = binding.value
    })
    // 如果后台返回的图片地址不存在为null时，不报错
    el.src = el.src || binding.value
  }
})

<img v-imgErr="require('@/assets/common/bigUserHeader.png')" src="http://dsadasd.png" class="user-avatar">