自定义指令

简介

除了 Vue 核心携带着的一些默认指令(v-modelv-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: {
// 指令定义对象
}
}

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

<input v-focus>

钩子函数

指令的定义对象提供了几个钩子函数(全部可选):

我们将在下一节中,探讨传入这些钩子函数的参数(例如 el, binding, vnodeoldVnode)。

指令钩子函数参数

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

除了 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)

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

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