Q5 G4 o1 m$ V$ Q+ V2 ~除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例) |# T9 O/ W7 z& \! s6 K
& f+ J( r% v3 h) s- <div id="app">3 O X- o5 ?. `
- <p>页面载入时,input 元素自动获取焦点:</p>
8 Y% ^9 N5 f2 H9 B( N - <input v-focus>! b( n8 H6 P) D( r$ V
- </div>7 f4 `8 B/ A! Z+ p. t; ]
-
5 u3 P: H" N' C% ~9 c7 n - <script>1 l! O: B5 V- n8 P) j/ }8 W
- // 注册一个全局自定义指令 v-focus
" g- [1 l% @7 w: o6 B* e - Vue.directive('focus', {4 Y$ F# g! w) ^5 E% o. M3 O
- // 当绑定元素插入到 DOM 中。" B2 x, x! ?1 z0 B4 E
- inserted: function (el) {6 ]' B2 k4 g3 y! X$ {+ R
- // 聚焦元素
) V- O: G. n, z+ r - el.focus()$ w$ j) M/ ^7 Q
- }, N8 @6 k0 u& P" N# B0 Z
- })
2 ~& x8 y1 Z- ^9 a4 V5 Y - // 创建根实例/ `# `6 o. G( p, P1 i. s; P
- new Vue({
7 |- s9 s# v1 ]8 o# K# ~ - el: '#app'% h- W) h. i% L0 l$ ^
- })
3 V8 J! B( o2 s L; D# u& s - </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例
# B" ?7 K6 Y8 R
D$ E$ C( ^6 {: ?1 w- <div id="app">
0 D0 G' T; d( ~& D - <p>页面载入时,input 元素自动获取焦点:</p>
. t1 n" @& V Q! j' d4 Z" L - <input v-focus>+ H$ p/ d* w& g0 d
- </div>5 w# M, D% r6 |
- 0 P+ u* p @# H5 Z p
- <script>
4 f. F$ u$ T, _ R2 Y4 C - // 创建根实例
6 y2 o7 I3 e: t4 x! g! X7 A3 l - new Vue({
1 i {8 Y# v3 J5 i8 L/ M7 f - el: '#app',
" h3 f9 V2 T2 z$ ` - directives: {
: ]0 A. ^' w. p) c - // 注册一个局部的自定义指令 v-focus% B" i5 d8 O5 X( j
- focus: {
2 d& l' D1 z% ^; }. l+ K6 O) X+ P - // 指令的定义
6 e6 k, A) m) s - inserted: function (el) {2 l* w6 O# E1 {* t, @ j
- // 聚焦元素 Z% C2 R+ o7 l( r
- el.focus()
* m0 v6 _0 _# A& l - }
5 |1 |6 S% P4 L- d; L# ~/ Z' X - }+ j# i, D& a, h$ j, T1 o
- }0 ]/ @* P5 R3 G* C( q
- })! T8 a- M- D6 X9 d3 y' C
- </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。 - T5 d1 u) ~- {7 O" C; ^
钩子函数参数钩子函数的参数有: - 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 }。
0 V! Z' d# P; p7 g9 h
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。& X7 B! f* [: x8 b
以下实例演示了这些参数的使用: 实例
/ Q& F3 U1 e# x- Q! q u
/ c1 a( Y- k% d: z1 E L: f- <div id="app" v-runoob:hello.a.b="message">
2 r) [+ Q" c$ t) l; i- ? - </div>: F2 W+ l& _6 a: }; O. {/ K# y
-
! }4 L, d) a7 a3 f7 a - <script>: r: @* @8 T' O% w3 |) o' n7 H. S9 S
- Vue.directive('runoob', {
4 [5 G+ n D* h: x& ^1 h - bind: function (el, binding, vnode) {
' @' G* J# O0 U2 k - var s = JSON.stringify* [: ?# w x# j6 t
- el.innerHTML =
& @( N3 i; ?* @4 ~. i+ z9 D - 'name: ' + s(binding.name) + '<br>' +0 W/ O. s \$ h
- 'value: ' + s(binding.value) + '<br>' +
3 p7 w p# x2 C3 \3 Z; @ - 'expression: ' + s(binding.expression) + '<br>' +
5 n: d5 @; X* B- X9 L - 'argument: ' + s(binding.arg) + '<br>' +
% t: n; F; n V4 G- V - 'modifiers: ' + s(binding.modifiers) + '<br>' +8 }$ W: i7 N" x/ ^/ [. s5 S1 p6 n
- 'vnode keys: ' + Object.keys(vnode).join(', ')8 ~/ R' Y: |& W& [7 o
- }2 _& L- Y s5 V5 U6 B- |4 P9 y
- })* O: n8 R6 }! r( d1 E
- new Vue({- z7 l, {# H; a
- el: '#app',
$ ~5 V0 ^, H0 g8 J - data: {& _: T9 x3 f9 a' X
- message: '菜鸟教程!'
0 M& X: n# P) ~1 C- w3 X. T& a - }
: |3 P! P. C% y( F1 a& o - })3 s9 J+ ~* N* |5 u
- </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:) t) q3 T' X8 r8 p
- Vue.directive('runoob', function (el, binding) {% S4 n0 ^6 |' `2 F% \
- // 设置指令的背景颜色 e3 E# \; P( Q, r) Y8 l) c2 ]7 ~
- el.style.backgroundColor = binding.value.color
( L; d0 n' L' t - })
复制代码 8 l) x1 I6 H: l# U2 J- w; }
/ A: T6 V5 L" h5 ^) L3 {指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例
, }; {7 r5 @+ L3 D# p5 }
7 S4 R x6 p( s' j- D- <div id="app">
9 b3 K, x, G( ~ - <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
9 ]: B& ^$ q2 A' I - </div>* m W& I0 o: Q( j0 H. I4 \
- ; D* w+ G7 f. I! k/ k4 c
- <script>! y: w$ u$ f$ N
- Vue.directive('runoob', function (el, binding) {% G' z7 ?7 \" w4 u$ A/ z ^5 q
- // 简写方式设置文本及背景颜色
" y! o5 x! z% `! O) ~ - el.innerHTML = binding.value.text
' G/ ~1 ]; b L+ s8 b8 o; Y - el.style.backgroundColor = binding.value.color5 b4 D5 W5 A6 W
- })% n5 \$ q; ^3 S6 ?& C
- new Vue({
. Y+ K# B7 d. Q/ Q: K8 x - el: '#app'2 g1 x) S/ B2 M' F
- })1 `6 {4 l8 @) U- B. `( K4 J. j% O
- </script>
复制代码 $ `8 V' B" K5 d' o1 U ^
2 `+ m% `9 a1 T& X8 n2 ~0 N. S8 l) v( ]- D1 T- A
|