“Vue从入门到实战:自定义指令”的版本间的差异
来自CloudWiki
第132行: | 第132行: | ||
data: { | data: { | ||
message: 'Vue.js无难事' | message: 'Vue.js无难事' | ||
+ | } | ||
+ | }) | ||
+ | </script> | ||
+ | </body> | ||
+ | </html></nowiki> | ||
+ | |||
+ | ==动态指令参数== | ||
+ | 指令的参数可以是动态的。例如,在 v-mydirective:[argument]="value" 中,argument 参数可以根据组件实例数据进行更新!这使得自定义指令可以在应用中被灵活使用。 | ||
+ | |||
+ | <nowiki> | ||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <meta charset="UTF-8"> | ||
+ | <title></title> | ||
+ | |||
+ | </head> | ||
+ | <body> | ||
+ | <div id="app"> | ||
+ | <!--直接给出指令的参数--> | ||
+ | <p v-pin:top = "100"> | ||
+ | Vue.js无难事 | ||
+ | </p> | ||
+ | <!--使用动态参数--> | ||
+ | <p v-pin:[direction]="100"> | ||
+ | Vue.js无难事 | ||
+ | </p> | ||
+ | </div> | ||
+ | |||
+ | <script src="vue.js"></script> | ||
+ | <script> | ||
+ | Vue.directive('pin', { | ||
+ | bind: function (el, binding, vnode) { | ||
+ | el.style.position = 'fixed'; | ||
+ | let s = binding.arg || 'left'; | ||
+ | el.style[s] = binding.value + 'px' | ||
+ | } | ||
+ | }) | ||
+ | new Vue({ | ||
+ | el: '#app', | ||
+ | data: { | ||
+ | direction: 'left' | ||
} | } | ||
}) | }) |
2021年2月7日 (日) 13:02的版本
使用背景
vue的内置指令可以满足大部分业务需求。
在某些特殊情况下,如果我们需要对普通的DOM元素进行底层操作,就要用到自定义指令了。
自定义指令的注册
Vue提供了两种注册的方式,全局注册和局部注册。
全局注册
全局注册使用Vue.directive()方法来注册一个全局自定义指令。
Vue.directive(id,[definition])
例如,要编写一个让元素自动获取焦点的全局指令。
// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } })
全局指令可以在任何Vue实例的模板中使用。
<div id="app"> <input v-focus> </div> <div id="app2"> <input v-focus> </div>
局部注册
局部注册是在Vue实例的选项对象中使用directive选项进行注册。
new Vue({ el:'#app', directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }
局部注册的自定义指令只能在该实例绑定的视图中使用。
<div id="app"> <input v-focus> </div>
钩子函数
自定义指令的功能是在定义对象中实现的,而定义对象则是由钩子函数组成的。
Vue提供了下面几个钩子函数,这些钩子函数都是可选的:
- bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
- update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
- componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind:只调用一次,指令与元素解绑时调用。
<div id="app"> <input v-focus> </div> >
// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } })
接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。
- el:指令所绑定的元素,可以用来直接操作 DOM。
- binding:一个对象,包含以下 property:
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 钩子中可用。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app" v-demo:foo.a.b="message"></div> <script src="vue.js"></script> <script> 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: '#app', data: { message: 'Vue.js无难事' } }) </script> </body> </html>
动态指令参数
指令的参数可以是动态的。例如,在 v-mydirective:[argument]="value" 中,argument 参数可以根据组件实例数据进行更新!这使得自定义指令可以在应用中被灵活使用。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <!--直接给出指令的参数--> <p v-pin:top = "100"> Vue.js无难事 </p> <!--使用动态参数--> <p v-pin:[direction]="100"> Vue.js无难事 </p> </div> <script src="vue.js"></script> <script> Vue.directive('pin', { bind: function (el, binding, vnode) { el.style.position = 'fixed'; let s = binding.arg || 'left'; el.style[s] = binding.value + 'px' } }) new Vue({ el: '#app', data: { direction: 'left' } }) </script> </body> </html>