Vue自定义指令详解-CSDN博客

一、vue自定义指令是什么

和官方规定好的v-on,v-show,v-if等指令类似,只是名称和方法由我们来定:比如v-focus。自定义指令一般用于对普通 DOM 元素进行底层操作

二、vue自定义指令使用方法

//分两种注册方式:全局注册和局部注册

全局注册

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

局部注册

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

使用:

<input v-focus>

三、自定义指令钩子函数

bind: 只调用一次，指令第一次绑定到元素时调用。用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted：被绑定元素插入父节点时调用（父节点存在即可调用）。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次， 指令与元素解绑时调用。

钩子函数的参数：(el, binding, vnode, oldVnode)
el：指令所绑定的元素，可以用来直接操作 DOM 。

binding：一个对象，包含以下属性

name：指令名，不包含v-的前缀；

value：指令的绑定值；例如：v-my-directive=“1+1”，value的值是2；

oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子函数中可用，无论值是否改变都可用；

expression：绑定值的字符串形式；例如：v-my-directive=“1+1”，expression的值是’1+1’；

arg：传给指令的参数；例如：v-my-directive:foo，arg的值为 ‘foo’；

modifiers：一个包含修饰符的对象；例如：v-my-directive.a.b，modifiers的值为{‘a’:true,‘b’:true}

vnode：Vue编译的生成虚拟节点；

oldVnode：上一次的虚拟节点，仅在update和componentUpdated钩子函数中可用。