7 c' b) h( g* X4 p
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例6 q" ]/ }' U: R; @* d
6 r3 g3 ]% Y2 `4 c9 A3 D- n! s
- <div id="app">) T+ ?. k6 j( O5 ^. m/ q
- <p>页面载入时,input 元素自动获取焦点:</p>" E. i0 X, [& R+ ]9 ?
- <input v-focus>3 J( B, A; _5 ~, d- U) \8 E, }- h
- </div>) N, e7 b& B+ m+ x( F s$ F
- 5 m" l6 a; @3 s1 R7 T
- <script>& o- E: d1 z5 b2 k \, f
- // 注册一个全局自定义指令 v-focus
' c$ b5 }! ~4 R4 f/ I - Vue.directive('focus', {1 x* b( }( f- E! ]5 D+ G
- // 当绑定元素插入到 DOM 中。
5 C0 n5 z7 D0 F1 r9 X, D* I - inserted: function (el) {- t/ c& M. l: M: h5 w( O
- // 聚焦元素, q8 b" m+ f4 V; [. |3 A
- el.focus()
# C% q, M( k2 C - }
5 O# z9 s' u A4 |# E, W9 o/ f) \ - })7 [, z/ B7 }/ [" u& @
- // 创建根实例9 n+ O$ B- V9 Z) y6 x
- new Vue({
& \+ P0 o3 ~; n/ z3 E5 Q* ~ - el: '#app': [' w2 a, w: v6 F' r
- })
6 m/ U, C& [: h9 |/ u6 Y - </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例
# E$ h( m$ z: S, ?) S2 Y0 P, @
0 g: s( N& _) t/ |' n% C- <div id="app">( q) j/ K6 X4 J5 z4 ]
- <p>页面载入时,input 元素自动获取焦点:</p>8 g- ]+ M5 v+ i$ Y1 k$ J) o
- <input v-focus>
( M5 E; I1 B9 L5 W - </div>& ~8 Y3 b5 i: f! W6 s" p
-
3 y9 U% v8 {+ u7 g8 f - <script>
. }! h# A$ ~$ f# U, q( c. u$ y - // 创建根实例
; l, |, ^+ g( K _% r4 \1 m - new Vue({
9 v& v* K7 c: l3 T2 R: T! q7 p - el: '#app',
H3 X9 {5 p: H3 L# F5 E* i# E - directives: {2 E* P/ X# _2 y1 p1 I; G% W; e" u/ t
- // 注册一个局部的自定义指令 v-focus
& P5 I1 j8 E G/ O8 f - focus: {
# U' h* R# }" U3 q: w9 k - // 指令的定义
& @! X3 n, d) h" r( r" k, h - inserted: function (el) {! }( S4 t( h3 i$ J% k+ F
- // 聚焦元素
, M$ u) f% E* I2 }% c6 E7 A$ H0 A - el.focus()
! z6 R1 U: L. u( t. F5 {+ C Z+ a - } z e* [8 b- r ~$ x
- }
7 d: M0 s+ |8 z - } U8 H# ^3 l3 Y! N& I: J, H0 T
- })
3 S+ E: R1 Y3 J3 V! E/ Q+ M6 m, E9 l! t - </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。 $ \* I/ [3 {2 `7 {& s1 E$ y% L
钩子函数参数钩子函数的参数有: - 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 }。2 O) p* W7 h2 J3 t
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。4 H0 \* {& y/ x' S7 k- M& [1 k. U
以下实例演示了这些参数的使用: 实例% A7 M! U6 ~6 }' ^4 ~: \
$ }* |2 v" F2 D; R+ `- <div id="app" v-runoob:hello.a.b="message">' F ~- B( R4 j8 V( h1 H! A
- </div>' u# v$ q3 Y* F+ ~- X' ]
-
, v$ @( y/ y0 c6 H- Z& E - <script>
4 F( ^! Q% k' g; B8 Z7 D - Vue.directive('runoob', {$ W y; r* z {# H/ Z4 H! C# W
- bind: function (el, binding, vnode) {
1 T9 o' _7 P6 _+ q# F& X - var s = JSON.stringify7 C) R- H k- u* b/ }
- el.innerHTML = n% V& m: h' r4 g: R
- 'name: ' + s(binding.name) + '<br>' +
, S0 z3 S4 ?+ \: P$ k0 ]) P) k - 'value: ' + s(binding.value) + '<br>' +7 s7 L5 V, p0 }" O! L
- 'expression: ' + s(binding.expression) + '<br>' +
! P: J8 \( {0 H8 U5 M# y J; M - 'argument: ' + s(binding.arg) + '<br>' +
% }& M; r/ D: \ - 'modifiers: ' + s(binding.modifiers) + '<br>' +
{* Z) s1 i+ U/ R0 m8 ?" I - 'vnode keys: ' + Object.keys(vnode).join(', ')
! R1 l) P8 r( N" a - }: \- a- V( M" h# J
- })2 f* c; H# O" e2 t7 G5 m
- new Vue({5 {; u7 _# X) _( `/ _
- el: '#app',
( t9 J3 c( Q5 Q9 R - data: {5 P( x5 @2 H8 N" T
- message: '菜鸟教程!'
+ w: ?- H' q8 o o! f - }/ S: C/ a+ U' g
- })
D+ h3 F; { o" `. I, m( Q! d - </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:
& s M! o2 j: v9 }% h* w- Vue.directive('runoob', function (el, binding) {
/ M. z+ T! C5 X1 o, p# ~ - // 设置指令的背景颜色# W' c/ Q6 } l; o6 Q
- el.style.backgroundColor = binding.value.color
1 G) k2 s! U! C4 [ - })
复制代码
) ]/ N0 o: `. }' k, a, C( o. u' x" C2 t- h5 V
指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例2 O" R% ?, h x1 D8 b( {8 g$ C
0 h+ ^5 R4 t4 w% ], M% u- q7 ~) B
- <div id="app">6 \: t9 q- V& c8 J
- <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>, K1 A% Q4 r! e0 r( l3 {
- </div>% V6 O. N4 Q' {& X5 i' f2 k, H
- & X# f: l/ V8 t* E' n5 W% B: L7 a
- <script>
2 {' H8 F# g. C, q- T - Vue.directive('runoob', function (el, binding) {+ a9 R, H. S/ H2 ^8 j
- // 简写方式设置文本及背景颜色- N0 d, Y# Y+ _& G
- el.innerHTML = binding.value.text
. G0 t& g7 v5 v& s( s - el.style.backgroundColor = binding.value.color
3 y6 L% M3 t- I% K0 | - })
9 m [6 t6 B" W x, _ - new Vue({
1 n3 J5 c% `) H# ]6 C$ v) F% R - el: '#app'
W' ^. N3 y0 z3 [8 X* } - })
9 O; L8 M$ W+ H3 C: V - </script>
复制代码
3 W+ i3 V8 Q* F) r4 }. y( d2 W% }; t
& a2 K. {5 f. H |