Vue自定义指令

Vue的灵活需要你的自定义

Vue-directive允许注册自定义指令。注册的时候允许你全局/局部注册指令。区别：

1. 注册全局指令需要使用vue.directive（）。

2. 注册局部指令需要在data同级插入directive:{}属性。

// 注册一个全局自定义指令
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
// 局部指令
directives: {
  focus: {
    inserted: function (el) {
      el.focus()
    }
  }
}

// 使用它
<input v-focus>

其中的focus为自定义指令的名字，使用的时候可以直接放到html便签中使用。

上面也可以看到与一个inserted函数，它便是五大钩子函数之一。钩子函数会在特定的时候被执行。

• 五大钩子函数

  • bind：绑定到html元素的时候触发，只会触发一次。

  • inserted：被绑定的元素插入时触发(仅保证父节点存在，但不一定已被插入文档中)。

  • update：所在的component的Vnode发生改变的时候触发。（更为复杂一些）

  • componentUpdate：所在组件的Vnode全部更新的时候触发。

  • unbind：解除绑定的时候触发，只会触发一次。

• 这些钩子函数都将拿到什么参数呢？

  • el：绑定dom的实例。
  • binding：一个对象包含以下属性
    • name：指令名，例如：focus
    • value：指令=后面的值，例如：v-focus = “1+1”，值为“2”
    • oldvalue：指令绑的前一个值（更新的时候才会有）
    • expression：指令=后面的字符串表达,例如：v-focus = “1+1”，表达式为“1+1”
    • arg：传给指令的参数，例如：v-focus:foo 中，参数为 "foo"。
    • Modifiers：修饰符。例如：v-focus.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
  • vnode
  • oldVnode。

• 简写模式

很多时候你不需要那么多的自定义行为，所以你可以使用简写模式

想在 bind 和 update 时触发相同行为，而不关心其它的钩子。就可以直接传一个匿名函数即可。

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

• 对象字面量

如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})