指南

自定义指令

简介

除了 Vue 核心携带着的一些默认指令（v-model 和 v-show）之外，Vue 还允许你注册自己的自定义指令。请注意，在 Vue 2.0 中，代码重用和抽象(reuse and abstraction)的主要是以组件的形式 - 但是，可能某些情况下，还是需要对普通元素进行一些底层 DOM 访问，这也是自定义指令仍然有其使用场景之处。接着来看一个在输入元素获取焦点的示例，如下：

当页面加载时，元素将获取焦点（注意：自动获取焦点在 Safari 手机上无法运行）。事实上，在访问页面时，如果你还没有点击任何地方，上面的输入框现在应该处于获取焦点的状态。现在让我们构建指令以完成此效果：

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

如果你想要注册一个局部指令，也可以通过设置组件的 directives 选项：

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

然后在模板中，你可以在任何元素上使用新增的 v-focus 属性，就像这样：

<input v-focus>

钩子函数

指令的定义对象提供了几个钩子函数（全部可选）：

我们将在下一节中，探讨传入这些钩子函数的参数（例如 el, binding, vnode 和 oldVnode）。

指令钩子函数参数

指令钩子函数可传入以下参数：

除了 el 之外的其他参数，都应该是只读的，并且永远不要去修改它们。如果你需要通过钩子函数共享信息数据，推荐通过元素的 dataset 来实现。

下面是使用这些属性的自定义指令的示例：

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})

new Vue({
  el: '#hook-arguments-example',
  data: {
    message: 'hello!'
  }
})

函数简写(Function Shorthand)

在许多情况下，可能只需要在 bind 和 update 钩子函数上定义过相同的行为就足够了，而无需关心其他钩子函数。例如：

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

对象字面量(Object Literals)

如果指令需要多个值，你还可以向指令传入 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!"
})

原文：https://vuejs.org/v2/guide/custom-directive.html

← mixin render 函数 & jsx →
发现错误？想参与编辑？ 在 GitHub 上编辑此页！