# U" p9 D: W/ d- S8 I8 [: Z除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例6 [2 j+ R4 e* x& o% d, `
( d. Y1 m6 x1 E5 X
- <div id="app">/ |: y; y. ?$ y- I( m x2 J1 m; ?
- <p>页面载入时,input 元素自动获取焦点:</p>' t1 x5 `$ c7 d( K
- <input v-focus>* y% [( d0 o1 t- }( a3 G1 G$ @
- </div>3 a1 _2 e- F2 P- w1 F+ ]
-
- I) y$ e& k( o8 }+ ^# u" N - <script>
8 T1 g! ~- R' L c5 u% h# H - // 注册一个全局自定义指令 v-focus6 Y' X1 d/ C2 Y: P
- Vue.directive('focus', {, }7 G2 l* j: ^* M! Y; M3 t
- // 当绑定元素插入到 DOM 中。1 Y+ I) P1 l: M5 X5 ^0 J4 L
- inserted: function (el) {6 Y3 N1 ?. p( a! o
- // 聚焦元素! Y* S) ]* B5 a7 W
- el.focus()
4 k8 M# l! c* K5 }/ V/ Q0 ^# } - }
6 s; y4 F* a% z" q( p& e4 r - })
% L, L; J% b5 E - // 创建根实例6 p5 @5 ^" m, p5 U, b- r& U
- new Vue({
' _4 @2 f/ O# V) k# ~* D/ \: y- U - el: '#app'/ o' ?6 J2 ?7 _0 I
- })0 E# j' u @# T( R$ s6 f8 ^# o
- </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例. b1 O" g1 z+ l6 L, c) v2 t9 L
' _( p. U# d5 f5 I
- <div id="app">+ {, b4 X% Q$ Q1 }) J- \
- <p>页面载入时,input 元素自动获取焦点:</p>
X! \+ x* @4 H+ V/ l - <input v-focus>
. ^0 W# e, u0 [ - </div>
7 J% W# k& I B. t8 o! S) y$ u2 \ - " Y' ~6 T0 P; \8 Q4 w; G
- <script>
- j# S, `/ q1 I) q - // 创建根实例1 H0 Y% Z0 D6 ?' T; G, q
- new Vue({
3 |6 T) M2 q# R a U& ?& v9 ?9 p - el: '#app',
0 L. Q1 N0 k9 v. F3 {% t - directives: {
# i/ K6 h$ u& T3 {7 P - // 注册一个局部的自定义指令 v-focus
6 J4 n8 K ` T7 V+ O& Q - focus: {
1 G7 Z7 @4 e a. ]' j N- N - // 指令的定义) F, {2 H/ U9 {1 l8 W
- inserted: function (el) {; F$ ~, g4 r% L( T2 M5 [: ^
- // 聚焦元素4 q7 I" v( O3 K1 d5 n9 }
- el.focus()
- s: p7 U8 n' s* I: t3 [% @ - }+ E4 W2 p( \/ {' m
- }+ |" k N/ S& M. B
- }' n( t* |: g$ X* E
- })
) d9 A3 f% ]' M9 `! t) Z$ Q; F - </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。 , d2 v# u9 {; F
钩子函数参数钩子函数的参数有: - 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 }。
8 L- }; h% b5 u _: r/ D
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。1 e" I6 f3 X( D; {2 L* o; u
以下实例演示了这些参数的使用: 实例) X$ _2 ]) L, t- n- @& n
" }! f3 k- j3 K: g
- <div id="app" v-runoob:hello.a.b="message">
" H c3 S. [5 p+ N - </div>
! K5 e! i$ \" g" N -
+ V. J; n" @9 C; m+ q - <script>
& `7 c( A- J f - Vue.directive('runoob', {
/ H$ W& v4 f; X2 b. Y4 n7 ]) n- e - bind: function (el, binding, vnode) {- H; K8 F; |. ]- b
- var s = JSON.stringify5 |: ^% k9 ^3 ~3 v! m1 M% j
- el.innerHTML =3 u1 ~1 G ]8 `2 i. U! E: U- d
- 'name: ' + s(binding.name) + '<br>' +
: Q; j* R. G5 V; l7 d5 r6 {; J - 'value: ' + s(binding.value) + '<br>' +
% o! V) \% S3 J9 O- o2 {; U - 'expression: ' + s(binding.expression) + '<br>' +7 ~' M* ?8 L/ a0 @& u
- 'argument: ' + s(binding.arg) + '<br>' +! y$ u x2 z" Q: F0 y5 \
- 'modifiers: ' + s(binding.modifiers) + '<br>' +
! L" x* k, ]+ ?. D - 'vnode keys: ' + Object.keys(vnode).join(', ')
7 ?" B* F( w k. j - }
/ z" ^ J3 G0 y0 y! |: A - })7 f* p1 r1 K1 z; a9 \: b2 ?" ^
- new Vue({+ X2 {1 A1 g1 m \ z, T
- el: '#app',
X7 I: p% ~# B - data: {
+ X7 E; \1 t' T! Y - message: '菜鸟教程!'( y- c- L; b g4 {, f. [& ^/ s1 p0 t
- }) [: ^; g" y: z( f, a) `
- })+ x) r" z0 n( N, T
- </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:
' k7 L& u& M: E/ X" |- Vue.directive('runoob', function (el, binding) {
. J5 ?* N* D/ U9 ^# ] N* b - // 设置指令的背景颜色6 y; e9 ^* M2 Z3 j* W: p' e
- el.style.backgroundColor = binding.value.color8 i+ Z5 u5 X7 G
- })
复制代码 / y8 s2 k7 p- y; u8 m" V" h7 e
5 q/ ?9 H: u; Y' y2 z( t指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例2 G. r) }6 J# ]% Q" u( W
$ o" V) Q1 \1 |; q1 H, E- <div id="app">, m. F$ I. @8 J% |
- <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
* g+ D" t+ V+ o: z - </div>
8 e- A3 q0 g( h: u W - / _7 j q C" b, g/ d6 c& _$ n
- <script>9 b+ R& y& c" T
- Vue.directive('runoob', function (el, binding) {3 L( ~3 R3 n: r) V0 k! E% j! g
- // 简写方式设置文本及背景颜色0 i+ K% O1 e/ s% R" N- ?
- el.innerHTML = binding.value.text
/ U8 G+ d( m5 L5 } - el.style.backgroundColor = binding.value.color
9 J: @, F) |% [. k& x: Q; y( ? - })9 U( L- S" ^$ b! _9 [% I2 b
- new Vue({6 ?# ?; X, n& \9 H s
- el: '#app'
0 X' ?# Q/ p/ Q- I6 L5 ^" m - })6 h. z" L, O. q5 g$ y
- </script>
复制代码
6 q' c- V. Y; y `1 N& P- l8 [) P! ?. \# e( O
$ T- _+ |& \7 Q |