自定义指令的基本用法
和组件类似分全局注册和局部注册,区别就是把component
换成了derective
.
钩子函数
指令定义函数提供了几个钩子函数(可选):
-
bind
: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时
执行一次的初始化动作。 -
inserted
: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document
中)。 -
update
: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的
绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 -
componentUpdated
: 被绑定元素所在模板完成一次更新周期时调用。 -
unbind
: 只调用一次, 指令与元素解绑时调用。
钩子函数的参数有:
- el: 指令所绑定的元素,可以用来直接操作 DOM 。
binding
: 一个对象,包含以下属性:
name
: 指令名,不包括v
前缀。value
: 指令的绑定值, 例如:vmydirective=”1 + 1”
,value
的值是 2。oldValue
: 指令绑定的前一个值,仅在update
和componentUpdated
钩子中可用。无论值是否改变都可用。expression
: 绑定值的字符串形式。 例如vmydirective=”1 + 1”
,expression
值是“1 + 1”。arg
: 传给指令的参数。例如vmydirective:foo
,arg
的值是“foo”。
modifiers
: 一个包含修饰符的对象。 例如:vmydirective.foo.bar
, 修饰符对
象,,,modifiers
的值是{ foo: true, bar: true }
。
-
vnode: Vue
编译生成的虚拟节点。 -
oldVnode
: 上一个虚拟节点,仅在update
和componentUpdated
钩子中可用。
小栗子:
<div id="app">
获取焦点:
<input type="text" v-focus>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
// 自定义指令:
Vue.directive('focus', {
// 指令的选项 插入父节点的时候就调用
inserted: function(el) {
el.focus();
}
});
var app = new Vue({
el: '#app',
data: {}
})
</script>
网友评论