vue2.0自定义指令

一、什么是指令？

指令一般以"v-"做为前缀, 以方便Vue知道你在使用一种特殊的标记。
除了 Vue 核心携带着的一些默认指令（v-model 和 v-show）以外，
Vue 还容许你注册本身的自定义指令。某些状况下，仍是须要对普通元素进行一些底层 DOM 访问，
这也是自定义指令仍然有其使用场景之处。

二、全局指令：

当页面加载时，元素将获取焦点，事实上，在访问页面时，若是你尚未点击任何地方，上面的输入框如今应该处于获取焦点的状态。如今让咱们构建指令以完成此效果：

<template>
<div class="parent">
  <input v-focus>
</div>
</template>

import Vue from 'vue'
  import cnChildren from './children'
  // 注册一个名为 `v-focus` 的全局自定义指令
  Vue.directive('focus', {
    // 当绑定的元素插入到 DOM 时调用此函数……
    inserted: function (el) {
      // 元素调用 focus 获取焦点
      el.focus()
    }
  });

若是你想要注册一个局部指令，也能够经过设置组件的 directives 选项：

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

咱们有几个可用的钩子：

• bind：在指令第一次绑定到元素时调用，只会调用一次。能够在此钩子函数中，执行一次性的初始化设置。
• inserted：在已绑定的元素插入到父节点时调用（只能保证父节点存在，不必定存在于 document 中）。
• update：在包含指令的组件的 VNode 更新后调用，但可能以前其子组件已更新。指令的值可能更新或者还没更新，然而能够经过比较绑定的当前值和旧值，来跳过没必要要的更新（参考下面的钩子函数）。
• componentUpdated：在包含指令的组件的 VNode 更新后调用，而且其子组件的 VNode 已更新。
• unbind：在指令从元素上解除绑定时调用，只会调用一次。

每一个钩子能够选择一些参数。

• el：指令绑定的元素。能够用于直接操做 DOM。

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

  一、name：指令的名称，不包括 v- 前缀。
    二、value：向指令传入的值。例如，在 v-my-directive="1 + 1" 中，传入的值是 2。
    三、oldValue：以前的值，只在 update 和 componentUpdated 钩子函数中可用。不管值是否发生变化，均可以使用。
    四、expression：指令绑定的表达式(expression)，以字符串格式。例如，在 v-my-directive="1 + 1" 中，表达式是 "1 + 1"。
    五、arg：向指令传入的参数，若是有的话。例如，在 v-my-directive:foo 中，参数是 "foo"。
    六、modifiers：一个对象，包含修饰符，若是有的话。例如，在 v-my-directive.foo.bar 中，修饰符是 { foo: true, bar: true }。

• vnode：由 Vue 编译器(Vue’s compiler)生成的虚拟 Node 节点(virtual node)。更多细节请查看
  VNode API。

除了 el 以外的其余参数，都应该是只读的，而且永远不要去修改它们。

三、自定义指令示例

若是指令须要多个值，你还能够向指令传入 JavaScript 对象字面量(object literal)。记住，指令可以接收全部有效的 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!"
})