简介

Vue中内置很多指令，如v-model,v-show,v-for等，若无法满足我们的需求时，Vue 也允许注册自定义指令，主要分为全局自定义注册和局部自定义注册。

钩子函数

指令定义函数提供了几个钩子函数：

• bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
• inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
• update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
• componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
• unbind: 只调用一次， 指令与元素解绑时调用。

全局注册

语法

应用场景1：给头像设置默认值；

//注册一个全局自定义指令v-errorImg

Vue.directive("errorImg",{

 inserted(el,binding){
 //el是指令所绑定的元素，可以用来直接操作 DOM。
 //binding是一个对象，其中有个属性是value值，指指令的绑定值，
 
   el.src = binding.value 
   //当图片有地址没有加载成功时，会报错触发图片的事件----onerror
 
  el.onerror = function(){
 //当图片出现异常时，会将指令配置的默认图片设置为该图片内容
   el.src = binding.value 
  
  } 
 }
})

应用场景2：当页面加载时，input元素将获得焦点自动聚焦：

// 注册一个全局自定义指令 v-focus
    Vue.directive('focus', {
    
  // 当指令绑定的元素被插入DOM树上时执行
  inserted (el) {
  
    // 触发标签的事件方法
    el.focus()
  }
})

局部注册

对于局部组件，我们需要在组件的钩子函数directives中进行声明。

语法

directives: {
        focus: {
            inserted(el){
                el.focus()
            }
        }
    }