vue自定义指令
vue除了提供了v-model、v-show、v-if等默认指令，还允许注册了自定义指令。比如在需要对DOM元素进行底层操作的时候，就会用到自定义指令。
自定义指令用法
可以在全局中定义自定义指令：
Vue.directive('demo', {
bind (el, binding, vnode) {
//操作
},
unbind(el) {
//操作
}
})也可以在组件中自定义局部指令：
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
},在模板中任何元素上使用新的 v-focus 属性，如下
<input v-focus>自定义指令语法：
钩子函数
- bind : 只调用一次，指令第一次绑定到元素时调用。可用于一次性初始化；
- inserted: 被绑定元素插入父节点时调用（仅保证父节点存在，不保证插入都文档中）
- update:所在组件的Vnode更新是调用，可能发生在子VNode更新之前。
- componentUpdated : 指令所在组件的Vnode及其子VNode全部更新后调用。
- unbind：只调用一次，指令与元素解绑时调用。
钩子函数参数
指令钩子函数会被传入以下参数：
- el : 指令所绑定的元素，可以用来直接操作DOM;
- binding: 一个对象，包含以下属性
- value: 指令的绑定值，例如： v-my-directive="1+1"中，绑定值为2
- expression： 字符串形式的指令表达式。例如v-my-directive = "1+1"，表达式为"1+1"。
- name: 指令名，不包括v-前缀
- oldValue: 指令绑定的前一个值，仅在updata和componentUpdated 钩子中可用。无论值是否改变都可用。
- arg : 传给指令的参数，可选。例如 v-my-directive:foo 中，参数为"foo"。
- modifiers ： 一个包含修饰符的对象。例如：v-my-directive:foo.bar中，修饰符对象为{foo : true,bar : true}
- vnode : Vue编译生成的虚拟节点。
- oldVnode : 上一个虚拟节点，仅在update 和 componentUpdated 钩子中可用。
例子：
<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!'
}
})
函数简写
很多时候，你可能想bind和update时触发相同行为，而不关心其他钩子。
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})对象字面量
如果指令需要多个值，可以传入一个 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!"
})本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-03-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读