全局指令

  1. // 注册一个全局自定义指令 `v-focus`
  2. Vue.directive('focus', {
  3.   // 当被绑定的元素插入到 DOM 中时……
  4.   inserted: function (el) {
  5.     // 聚焦元素
  6.     el.focus()
  7.   }
  8. })

局部指令

如果想注册局部指令，组件中也接受一个 directives 的选项：

  1. directives: {
  2.   focus: {
  3.     // 指令的定义
  4.     inserted: function (el) {
  5.       el.focus()
  6.     }
  7.   }
  8. }
  1. <input v-focus>

钩子函数

  • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
  • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind：只调用一次，指令与元素解绑时调用。
    ```javascript Vue.directive(‘focus’, { // 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 inserted: function (el) {
    1. console.log('inserted >  ', ...arguments);
    2. // 聚焦元素
    3. el.focus()
    }, /* 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 / bind: function () {
    1. console.log('bind >  ', ...arguments);
    }, update: function () {
    1. console.log('update >  ', ...arguments);
    }, componentUpdated: function () {
    1. console.log('componentUpdated >  ', ...arguments);
    }, unbind: function () {
    1. console.log('unbind >  ', ...arguments);
    } }) / arguments 为是个参数 */ / 接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。 */
  1. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/525177/1611715323635-6d9f17e5-1338-4e73-b4a7-d2aa0b475a36.png#align=left&display=inline&height=117&margin=%5Bobject%20Object%5D&name=image.png&originHeight=117&originWidth=564&size=17007&status=done&style=stroke&width=564)
  2. <a name="nPRa4"></a>
  3. ## [钩子函数参数](https://cn.vuejs.org/v2/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0)
  4. 指令钩子函数会被传入以下参数：
  6. - `el`：指令所绑定的元素，可以用来直接操作 DOM。
  7. - `binding`：一个对象，包含以下 property：
  8.    - `name`：指令名，不包括 `v-` 前缀。
  9.    - `value`：指令的绑定值，例如：`v-my-directive="1 + 1"` 中，绑定值为 `2`。
  10.    - `oldValue`：指令绑定的前一个值，仅在 `update` 和 `componentUpdated` 钩子中可用。无论值是否改变都可用。
  11.    - `expression`：字符串形式的指令表达式。例如 `v-my-directive="1 + 1"` 中，表达式为 `"1 + 1"`。
  12.    - `arg`：传给指令的参数，可选。例如 `v-my-directive:foo` 中，参数为 `"foo"`。
  13.    - `modifiers`：一个包含修饰符的对象。例如：`v-my-directive.foo.bar` 中，修饰符对象为 `{ foo: true, bar: true }`。
  14. - `vnode`：Vue 编译生成的虚拟节点。移步 [VNode API](https://cn.vuejs.org/v2/api/#VNode-%E6%8E%A5%E5%8F%A3) 来了解更多详情。
  15. - `oldVnode`：上一个虚拟节点，仅在 `update` 和 `componentUpdated` 钩子中可用。
  17. 除了 `el` 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 [`dataset`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dataset) 来进行。
  19. <a name="yWZRk"></a>
  20. ## 动态指令参数
  21. 指令的参数可以是动态的。例如，在 `v-mydirective:[argument]="value"` 中，`argument` 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。
  22. ```javascript
  23.   <div v-show="showInput">
  24.     <input 
  25.     v-focus:[args].a.b="foo" 
  26.     type="text">
  27.   </div>
  29. /** <script>
  30.   data() {
  31.     return {
  32.       foo: {age: 18, name: 'ming'},
  33.       name: 'ming',
  34.       showInput: true,
  35.       message: 'message',
  36.       args: 'dyArgs'
  37.     }
  38.   },
  39.   */

image.png

函数简写

在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写：

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

对象字面量

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

  1. <div v-demo="{ color: 'white', text: 'hello!' }"></div>
  1. Vue.directive('demo', function (el, binding) {
  2.   console.log(binding.value.color) // => "white"
  3.   console.log(binding.value.text)  // => "hello!"
  4. })