基础
除了内置指令,Vue.js 也允许注册自定义指令。自定义指令提供一种机制将数据的变化映射为 DOM 行为。
可以用 Vue.directive(id,deFinition) 方法注册一个全局自定义指令,它接收两个参数指令 ID 与定义对象。也可以用组件的 directives 选项注册一个局部自定义指令。
钩子函数
定义对象可以提供几个钩子函数(都是可选的):
•bind:只调用一次,在指令第一次绑定到元素上时调用。
•update: 在 bind 之后立即以初始值为参数第一次调用,之后每当绑定值变化时调用,参数为新值与旧值。
•unbind:只调用一次,在指令从元素上解绑时调用。
示例
rush:js;">
Vue.directive('my-directive',{
bind: function () {
// 准备工作
// 例如,
添加事件处理器或只需要运行一次的高耗任务
},update: function (newValue,oldValue) {
// 值更新时的工作
// 也会以初始值为参数
调用一次
},unbind: function () {
// 清理工作
// 例如,
删除 bind()
添加的事件监听器
}
})
在注册之后,便可以在 Vue.js 模板中这样用(记着添加前缀 v-):
当只需要 update 函数时,可以传入一个函数替代定义对象:
rush:js;">
Vue.directive('my-directive',function (value) {
// 这个
函数用作 update()
})
所有的钩子函数将被复制到实际的指令对象中,钩子内 this 指向这个指令对象。这个对象暴露了一些有用的属性:
•el: 指令绑定的元素。
•vm: 拥有该指令的上下文 viewmodel。
•expression: 指令的表达式,不包括参数和过滤器。
•arg: 指令的参数。
•name: 指令的名字,不包含前缀。
•modifiers: 一个对象,包含指令的修饰符。
•descriptor: 一个对象,包含指令的解析结果。
你应当将这些属性视为只读的,不要修改它们。你也可以给指令对象添加自定义属性,但是注意不要覆盖已有的内部属性。
示例:
rush:js;">
Vue.directive('demo',{
bind: function () {
console.log('demo bound!')
},update: function (value) {
this.el.innerHTML =
'name - ' + this.name + '
' +
'expression - ' + this.expression + '
' +
'argument - ' + this.arg + '
' +
'modifiers - ' + JSON.stringify(this.modifiers) + '
' +
'value - ' + value
}
})
var demo = new Vue({
el: '#demo',data: {
msg: 'hello!'
}
})
对象字面量
如果指令需要多个值,可以传入一个 JavaScript 对象字面量。记住,指令可以使用任意合法的 JavaScript 表达式:
rush:js;">
Vue.directive('demo',function (value) {
console.log(value.color) // "white"
console.log(value.text) // "hello!"
})
字面修饰符
当指令使用了字面修饰符,它的值将按普通字符串处理并传递给 update 方法。update 方法将只调用一次,因为普通字符串不能响应数据变化。
teral="foo bar baz">
rush:js;">
Vue.directive('demo',function (value) {
console.log(value) // "foo bar baz"
})
元素指令
有时我们想以自定义元素的形式使用指令,而不是以特性的形式。这与 Angular 的 “E” 指令非常相似。元素指令可以看做是一个轻量组件。可以像下面这样注册一个自定义元素指令:
rush:js;">
Vue.elementDirective('my-directive',{
// API 同普通指令
bind: function () {
// 操作 this.el...
}
})
不这样写:
类似于 props,指令参数的名字在 JavaScript 中使用 camelCase 风格,在 HTML 中对应使用 kebab-case 风格。例如,假设在模板里有一个参数 `disable-effect`,在 JavaScript 里以 `disableEffect` 访问它。
rush:js;">
Vue.directive('example',{
twoWay: true,bind: function () {
this.handler = function () {
// 将数据写回 vm
// 如果指令这样绑定 v-example="a.b.c"
// 它将用给定值设置 `vm.a.b.c`
this.set(this.el.value)
}.bind(this)
this.el.addEventListener('input',this.handler)
},unbind: function () {
this.el.removeEventListener('input',this.handler)
}
})
Vue 通过递归遍历 DOM 树来编译模块。但是当它遇到 terminal 指令时会停止遍历这个元素的后代元素。这个指令将接管编译这个元素及其后代元素的任务。v-if 和 v-for 都是 terminal 指令。