' d- \% o' ~7 F% F8 s' {除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例+ O' O+ v. B8 }- j! t; v# F
) \ Q! A, ^/ A. {, U! G+ @- <div id="app">- ]. F; o& H( k/ L2 Q) C9 I* A$ o
- <p>页面载入时,input 元素自动获取焦点:</p>1 Z) L1 }1 u; N0 ^4 u \
- <input v-focus>
) ]% F" g# o% W8 A7 l: H2 T - </div>
" |& T. Z% ?. k( t -
5 F' U% Y/ i7 X' d) y9 m9 c - <script>
9 F1 `2 b5 |4 L! K7 g - // 注册一个全局自定义指令 v-focus! L$ g# p- r& a, J' m
- Vue.directive('focus', {
( \' O/ C+ g6 H" k& A - // 当绑定元素插入到 DOM 中。
2 K) q$ q' \3 X. Z1 l- L - inserted: function (el) {
! I8 R8 T) ` n; M& f$ [3 @ - // 聚焦元素, z# S( ]- y z! E
- el.focus()
k7 z( Q# F+ L" }0 Q/ I - }
6 i" j, Q% g$ M3 I. P - })
0 u- D6 c# H* }" T1 K' e7 M - // 创建根实例5 c+ ~7 Z) F, B. x4 I
- new Vue({& m' n# b% O$ E
- el: '#app'
3 l4 w) \! P2 s/ |8 S1 m4 z - })
+ D5 y$ `/ F6 C - </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例
$ v h) ^; f9 U: E4 _- h" s6 W' @8 G9 M' x( O4 M- c' s
- <div id="app">
% L/ U, ]# Z' _0 D0 ] - <p>页面载入时,input 元素自动获取焦点:</p>
: M3 e" p( W! d - <input v-focus>
$ j8 ?7 P# a* ?/ d5 U8 }) O1 { - </div>! J+ p8 c; |7 L5 c, E/ G/ s
- % |* e* H, E; x; d( ~# ?
- <script>
. R5 j0 T9 W! ~( c( S1 J) z5 _ - // 创建根实例
' b4 D; p% M" l' ~3 i. l4 L - new Vue({
5 _, |" D F4 u- D2 o* R - el: '#app',
; n$ R* w8 N5 i, s" i! a - directives: {3 C; j K+ |& |& {: p
- // 注册一个局部的自定义指令 v-focus
! K+ I9 [! M6 u; ] - focus: {
: Z% H! k. D7 J- x* T" S/ N - // 指令的定义
& _ t1 Y0 U0 y - inserted: function (el) {3 B- b7 p; h( Q: B- b+ N
- // 聚焦元素5 z5 J+ i0 e6 ~2 ^8 G" ]
- el.focus()
/ b% }* s/ E2 j' F, G - }
$ @4 R$ t, W/ u7 b5 i; V8 i - }4 \- [, s( H# S+ j
- }' S" q0 u0 x( i
- })5 ?: w ?9 h6 b0 I/ A5 H; \2 u2 B
- </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。 4 F0 o9 }, H6 W& b/ U% o
钩子函数参数钩子函数的参数有: - 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 }。# J! t( k- r# A) N/ \
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
, L+ @% i) @0 P) {: q2 |
以下实例演示了这些参数的使用: 实例3 I- N- F- i+ V3 o- `
7 m) ?4 A1 S" }& e: p
- <div id="app" v-runoob:hello.a.b="message">4 X, w" o4 L; {" X
- </div>
1 T. u0 s# t( C6 p( [" p -
9 b: o8 s, B1 j3 H- n$ T: ^4 N/ T2 T# E - <script>6 {4 Q/ j- R& y6 ~9 \; @6 u
- Vue.directive('runoob', {: H# y4 ^. u4 e; \. n
- bind: function (el, binding, vnode) {8 K7 K6 C4 i- F! L# M" e
- var s = JSON.stringify
) A) _1 F9 s, @ - el.innerHTML =
4 F, J0 v; j7 J - 'name: ' + s(binding.name) + '<br>' +
, s# L! f+ [6 A: j0 O - 'value: ' + s(binding.value) + '<br>' +* V+ A: ~. N) u% n7 |
- 'expression: ' + s(binding.expression) + '<br>' +! r; G9 R1 p$ T- D$ W( q
- 'argument: ' + s(binding.arg) + '<br>' +
. u! T& t" \6 Y& o$ z - 'modifiers: ' + s(binding.modifiers) + '<br>' +# N% }! F( S5 l5 T9 l' K0 V
- 'vnode keys: ' + Object.keys(vnode).join(', ')( i" o% j' j. [" \& C# g
- }
( j7 L2 y" T6 H1 {; Z - })
/ `) }( n9 Z1 O+ V! j' |$ W! H3 o - new Vue({
. U z* H+ Y' h4 E- K6 x - el: '#app',
: g7 Y. u7 T* K' m- Q - data: {
6 j# b, I! D I( j - message: '菜鸟教程!'
9 m5 {" e; g" x9 K5 R- J% p - } q) x+ O1 L/ {9 ~
- })
+ O! n+ n( i S - </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:/ F0 F3 g3 u! C) D1 m$ I
- Vue.directive('runoob', function (el, binding) {
3 P: P) \( Q/ g" P$ p9 @2 M - // 设置指令的背景颜色
7 V$ W2 j4 M4 U: Q - el.style.backgroundColor = binding.value.color
- F; Q/ f+ w$ `# m1 U7 e, W$ f - })
复制代码
) A( U; ~0 b# T |3 a0 X
0 g1 C+ H& f" e% u; c1 N指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例
$ d2 n- c) X7 m E4 g
* @! c6 H: ]. K* M I5 i2 K8 @- <div id="app">& y( ?9 v5 W& C5 \. L
- <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div># c8 O- c q4 }8 ]7 n- @4 E. L
- </div>
5 v+ u1 _" \* [ -
% [! } O! f& i8 A* {2 i) b0 E - <script>
$ |; B3 f3 s8 F3 V" ~/ N( W - Vue.directive('runoob', function (el, binding) {! N0 {( V: s+ p* H% I
- // 简写方式设置文本及背景颜色0 c& B* D1 N% d8 `8 g; M
- el.innerHTML = binding.value.text
. J1 P: j+ e/ i6 }' {0 S+ } - el.style.backgroundColor = binding.value.color: {( Y! M e0 N) M% e- w- ]
- }), O5 B" ~5 U% p7 J2 t$ u s
- new Vue({
, `/ m$ r2 v0 X; E6 C9 u5 F7 C, r - el: '#app'" ~1 ]( g& e& Y7 S( g# p( G2 f
- })- H$ g3 ?1 \5 c: K& Y
- </script>
复制代码 & |8 h, u8 H1 U' P7 P, A ]
4 K# A- S2 O* [: x+ J( I9 L
5 {, o+ h0 U! O) M% J) |' K9 D
|