自定义指令

自定义指令

除了内置的指令以外，Vue 允许用户注册自定义指令。在某些情况下需要对普通 DOM 元素进行操作的时候就可以使用自定义指令。

在 Vue2 中，自定义指令分为 全局指令 和 局部指令，全局指令是在 new Vue 之前定义的指令，作用在整个应用中。局部指令是在组件中定义的指令，只能作用在该组件内。

全局指令的注册：

• 通过 directive 函数注册。

Vue.directive('focus', {  
     //... 
})

• Vue.directive 第一参数是指令名称，第二参数是配置对象，用于定义 钩子函数。

局部指定的注册：

• 在组件内部通过 directives 属性注册，directives 属性和 data 数据对象同级定义。

directives: {  
    focus: {  
        //...
    }  
}

• directives 以 key-value 形式定义指令，key 是指令名称，value 是配置对象。

注册的指令需要加上前缀 v- 使用，例如上面 focus 指令，在模板中使用时要写成 v-focus。

钩子函数

• bind：

  • 只调用一次，在指令第一次绑定到元素时调用。

• inserted：

  • 被绑定元素插入到父节点调用。

• update：

  • 组件更新之前调用。

• componentUpdated：

  • 组件更新之后调用。

• unbind：

  • 指令解绑时调用，一般也就组件或元素销毁的时候才会调用。

bind 是在插入前调用，该阶段 DOM 已经创建，但是还未插入到父元素中，所以此时访问不到父节点。

inserted 是在插入父节点时调用，此时可以访问到父节点。

Vue.directive('focus', {  
     bind() {},
     inserted() {},
     update() {},
     componentUpdated() {}
     unbind() {}
})

注意：在钩子函数中无法使用 this 指向当前实例。

钩子函数参数

• el：
  • 指令所绑定的元素，可以用来直接操作 DOM。
• binding （参数对象）：
  • name：
    • 指令名称，不包含 v- 前缀。
  • value：
    • 指令的值，例如：v-focus="1 + 1"，绑定的值为 2。
  • oldValue：
    • 旧的指令值，只有 update 和 componentUpdated 钩子中可以用。
  • expression：
    • 字符串形式的指令表达式，例如：v-focus="1 + 1"，表达式为："1 + 1" 。
  • arg：
    • 指令参数，例如：v-focus:foo，foo 就是指令参数。
  • modifiers：
    • 一个包含修饰符的对象，例如：v-focus.a.b，修饰符对象为：{ a: true, b: true }
• vnode：
  • 虚拟DOM，Vue 编译的虚拟节点。
• oldVnode：
  • 旧的虚拟DOM，只有 update 和 componentUpdated 钩子中可以用。

函数简写

如果只需要使用到 bind 和 update 钩子，不关心其他的钩子，可以将对象写成一个函数。

Vue.directive('focus', function (el, binding) {  
    //...
})