" W" S; B. k8 [* Q3 { ^
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例7 x( ^% @" l6 f/ w# w1 G
7 q' a9 a- E" W. {. q
- <div id="app">
$ [+ x& r# K9 H; }' B2 F" _- Z; @ - <p>页面载入时,input 元素自动获取焦点:</p>( @! H$ i# k# `/ h0 B' g7 G' H
- <input v-focus> B! `3 q- h0 k9 \4 N
- </div>; C; S0 H& a; L: G" s# a2 D3 O( x
-
% j, J; N( X9 G, {& P& h - <script>& N- {; O7 C. ^4 f. K% ]' H% J
- // 注册一个全局自定义指令 v-focus9 K/ R6 c/ G$ s
- Vue.directive('focus', {3 h2 X, x7 o6 ^- N$ m
- // 当绑定元素插入到 DOM 中。
' F. @4 v! n, m: M: k7 Y; e - inserted: function (el) {1 ?; t$ j" R" a& P( @( o3 y1 D
- // 聚焦元素0 S4 S3 S9 K6 F/ `+ i6 C
- el.focus()- `/ }0 C" h* S4 G9 I
- }
0 K3 I" o1 A0 K* h1 S u - }); i" s% g5 m, x& h+ D
- // 创建根实例: ]9 c# s1 ^; X* y. ?9 z: P
- new Vue({
2 ^( X2 ^* Y2 }6 |8 T - el: '#app'4 ~' J3 c1 {3 m
- })
, y7 [8 z0 C. K' { - </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例# [, M: V4 p' x. |7 D
! `' O& h8 U5 _1 N0 k6 E/ @" D5 q
- <div id="app">
$ }+ E- M5 z; ~0 m1 l# N3 a - <p>页面载入时,input 元素自动获取焦点:</p>
# V$ W) i0 u- c% C9 Y! I - <input v-focus>
! s( |* D9 p$ [1 t) M& i3 a7 ]; Y1 y - </div>
7 {! Q; H% q* K( c; B; p& ~ -
" Z# a* s( Q, `7 m, i9 u, Q# k - <script>: Y8 Z" M2 ] M4 o. U
- // 创建根实例
3 z) t ]/ M/ i9 Y, c. i: q6 F - new Vue({
' O5 c4 L$ G$ l - el: '#app',
- \ o# V) e. b: d z) X) G1 i - directives: {$ c# _# }4 m; I7 u% N# e
- // 注册一个局部的自定义指令 v-focus
. E1 w& M( Y5 Z) t i - focus: {
6 p5 p+ U& z3 i) ^ - // 指令的定义
4 f z, A6 \8 P! o& b4 R - inserted: function (el) {
5 l+ y# v5 t* q% V1 _7 \% @ - // 聚焦元素
/ ?: s+ i/ D; e" w - el.focus()
# X$ O0 Z: |/ `9 c - }% G* ?1 u6 K* U) o( `% a/ X
- } I8 a/ c b. e: b5 p1 O
- }% F1 N7 v; R$ b! x+ H
- })
" S5 J" \6 B) o0 {) V% X - </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。 9 i4 U3 K" w% E0 D8 V' ?/ m5 a
钩子函数参数钩子函数的参数有: - 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 }。
1 G# I9 b) a6 v# G/ J2 i
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。; X" i" K+ r' ?9 L
以下实例演示了这些参数的使用: 实例
9 X, Q0 O: u( Q/ W: x( V
) s* p- u, y; b5 Z- <div id="app" v-runoob:hello.a.b="message">* t2 @1 t" S9 V8 f$ j
- </div>& J7 E3 U& C$ l
- # b* K9 g' j7 S% ~
- <script>: D( K3 h9 }; h/ D% R# V' W
- Vue.directive('runoob', {
8 e9 @ [+ t( [8 ?* C - bind: function (el, binding, vnode) {7 h) k! A' h' J( p9 g- Z
- var s = JSON.stringify6 v# p& }; L1 m2 g2 B9 w! C
- el.innerHTML = ?" R [# H& Y' a) P- S( K
- 'name: ' + s(binding.name) + '<br>' +3 @! D: ]8 j6 V" `; C/ B k
- 'value: ' + s(binding.value) + '<br>' +% k- B2 N" D) Q( p
- 'expression: ' + s(binding.expression) + '<br>' +! A. C) }. Y! v" ]# h
- 'argument: ' + s(binding.arg) + '<br>' +$ C9 V, {# S" n* L# o6 n1 D" o
- 'modifiers: ' + s(binding.modifiers) + '<br>' +; l8 m" E' j. R% Z! L
- 'vnode keys: ' + Object.keys(vnode).join(', ')% w E& S: H v( }, l% r
- }9 e# Z* G) _1 N- w6 o$ | G
- })
+ K& ^, G# a0 T* V - new Vue({" X- C, D$ \, } A2 A
- el: '#app',5 z" N3 v$ {2 S! e+ D
- data: {
0 k5 r- `/ T/ F% ~9 P4 O9 N: } - message: '菜鸟教程!'3 A' @. ]" ^$ |7 T: B6 s
- }
' C9 n1 X: M: N2 X - })6 j' B$ z& S9 c; T" X: b
- </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:
0 `9 @; Y- m7 A' I1 h- Vue.directive('runoob', function (el, binding) {/ l1 X4 o0 j2 H- H8 b
- // 设置指令的背景颜色
n% a) g- m& \ - el.style.backgroundColor = binding.value.color8 b: o: S$ b" z$ k
- })
复制代码
' S; }8 Y( K6 v' n% J) P% }" h) _, F' b! r' A
指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例
$ Z7 K: _8 g/ o: h1 u* y' {3 c9 u% Z/ Z8 P( A& [$ A. X
- <div id="app">
5 y& G8 p4 [0 J/ m* Z; s. [! c* { - <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>+ B- N& x0 m0 v( p( w3 w4 m
- </div>
y# b1 P2 n3 Z) K* e5 a2 @. |& B -
7 F9 K) i: x: N - <script>
$ g2 c+ G7 S) [1 h - Vue.directive('runoob', function (el, binding) {
% e2 W! s3 B+ N - // 简写方式设置文本及背景颜色
3 H' b; J* \& }2 _. S5 V0 B6 n - el.innerHTML = binding.value.text. C; c+ x \; L. m6 J! @8 u" n
- el.style.backgroundColor = binding.value.color
1 a5 L1 X g" ^+ G! @ - })
' J# }4 k) V: F. N - new Vue({
# \' p' A* Y3 l" J7 I: G, E/ N - el: '#app'
" }! D* ?0 U! x/ H; k$ l - })9 ^) `6 A7 U8 l8 W: z
- </script>
复制代码 5 ^% v+ l! J; e3 h6 W$ K
: I& A2 T" ]5 E# l
: Q' \% y+ @ H3 q$ Z: V$ }$ f: T |