除了内置的指令外,Vue 也允许注册自定义指令。
vue用Vue.directive(id,definition)方法注册一个全局自定义指令,它接受两个参数,指令ID和定义对象。也可以用directives注册一个局部自定义指令。
// 注册一个全局自定义指令 `v-my-directive`
Vue.directive('my-directive', {
// 钩子函数 当指令第一次绑定到 DOM 中时……
bind: function (el) {
}
})
// 注册一个局部自定义指令
directives: {
my-directive: {
bind: function (el) {
}
}
}
一个指令定义对象可以提供如下几个钩子函数:
-
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 -
inserted
:被绑定元素插入父节点时调用 。 -
update
:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。可以通过比较更新前后的值来忽略不必要的模板更新 。 -
componentUpdated
:指令所在组件的 VNode 及其子 VNode 全部更新后调用。 -
unbind
:只调用一次,指令与元素解绑时调用。
钩子函数的参数:
-
el
:指令所绑定的元素,可以用来直接操作 DOM 。
-
vm
: 拥有该指令的上下文。
-
binding
:一个对象,包含以下属性:-
name
:指令名,不包括v-
前缀。 -
value
:指令的绑定值,例如:v-my-directive="1 + 1"
中,绑定值为2
。 -
oldValue
:指令绑定的前一个值,仅在update
和componentUpdated
钩子中可用。无论值是否改变都可用。 -
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 编译生成的虚拟节点。 点击VNode API 了解更多。 -
oldVnode
:上一个虚拟节点,在update
和componentUpdated
钩子中可用
<div id="demo" v-demo-directive="LightSlateGray : msg"></div>
Vue.directive('demoDirective', {
bind: function () {
this.el.style.color = '#fff'
this.el.style.backgroundColor = this.arg
},
update: function (value) {
this.el.innerHTML =
'name - ' + this.name + '<br>' +
'raw - ' + this.raw + '<br>' +
'expression - ' + this.expression + '<br>' +
'argument - ' + this.arg + '<br>' +
'value - ' + value
}
});
var demo = new Vue({
el: '#demo',
data: {
msg: 'hello!'
}
})
如果指令需要多个值,可以传入一个 JavaScript 对象字面量。记住,指令函数能够接受所有合法的 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!"
})
高级选项
- deep
如果你希望在一个对象上使用自定义指令,并且当对象内部嵌套的属性发生变化时也能够触发指令的 update 函数,那么你就要在指令的定义中传入 deep: true。
<div id="demo" v-my-directive="obj"></div>
Vue.directive('my-directive', {
deep: true,
update: function (obj) {
// 当 obj 内部嵌套的属性变化时也会调用此函数
}
})
let demoVM = new Vue({
el:"#demo",
data:{
a:{b:{c:2}}
}
})
- twoway
如果你的指令想向 Vue 实例写回数据,你需要传入 twoWay: true 。该选项允许在指令中使用 this.set(value)。
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)
}
})
let demo = new Vue({
el:"#demo",
data:{
a:{b:{c:2}}
}
})
网友评论