Vue自定义指令

前言

vue中除了核心功能内置的指令外，也允许注册自定义指令。有的情况下，对普通DOM元素进行底层操作，这时候就会用到自定义指令。自定义指令又分为全局自定义指令和局部自定义指令。

全局自定义指令

全局注册主要是用过Vue.directive方法进行注册
Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据。

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()  // 页面加载完成之后自动让输入框获取到焦点的小功能
  }
})
使用：
<input type="text" v-focus />

局部自定义指令

局部注册通过在组件选项对象中设置directives属性

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
    }
  }
}
使用：
<input type="text" v-focus />

自定义指令的钩子函数

钩子函数：

• bind : 只调用一次，指令第一次绑定到元素时调用
• inserted : 被绑定元素插入父节点时调用
• update : 所有组件的虚拟节点VNode更新时调用
• componentUpdated : 指令所在组件的虚拟节点VNode以及子虚拟节点更新之前
• unbind : 只调用一次，指令与元素解绑时调用
  钩子函数的参数：el绑定元素,binding一个对象 包含指令的值value,vnode虚拟节点,oldVnode旧的虚拟节点等