Vue 2参考手册
Vue.js 自定义指令
Vue.js 自定义指令
Vue.js 自定义指令
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。
下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点:
实例
尝试一下 »
我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用:
实例
尝试一下 »
钩子
钩子函数
指令定义函数提供了几个钩子函数(可选):
bind
: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。inserted
: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。update
: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。componentUpdated
: 被绑定元素所在模板完成一次更新周期时调用。unbind
: 只调用一次, 指令与元素解绑时调用。
钩子函数参数
钩子函数的参数有:
- el: 指令所绑定的元素,可以用来直接操作 DOM 。
- binding: 一个对象,包含以下属性:
- name: 指令名,不包括
v-
前缀。 - value: 指令的绑定值, 例如:
v-my-directive="1 + 1"
, value 的值是2
。 - oldValue: 指令绑定的前一个值,仅在
update
和componentUpdated
钩子中可用。无论值是否改变都可用。 - expression: 绑定值的表达式或变量名。 例如
v-my-directive="1 + 1"
, expression 的值是"1 + 1"
。 - arg: 传给指令的参数。例如
v-my-directive:foo
, arg 的值是"foo"
。 - modifiers: 一个包含修饰符的对象。 例如:
v-my-directive.foo.bar
, 修饰符对象 modifiers 的值是{ foo: true, bar: true }
。
- name: 指令名,不包括
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在
update
和componentUpdated
钩子中可用。
以下实例演示了这些参数的使用:
实例
尝试一下 »
有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:
Vue.directive('verydoc', function (el, binding) { // 设置指令的背景颜色 el.style.backgroundColor = binding.value.color })
指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象:
实例
尝试一下 »
Vue.js 自定义指令 |
---|
Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
主页 | https://vuejs.org/ |
源码 | https://github.com/vuejs/vue |
版本 | 2 |
发布版本 | 2.5.2 |