. |8 I [# Z( g% ~4 I5 Q
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例; Q2 g7 v, e! q4 ^0 x5 p
+ q5 e/ o! [& [9 z! n9 p
- <div id="app">$ r1 t2 b& y3 ^ |: {
- <p>页面载入时,input 元素自动获取焦点:</p>
* V9 ]* o* F5 \' V* U - <input v-focus>( H6 M$ @5 q6 S6 t& u$ s6 p. s
- </div>& R& R9 |0 y: N! p p; d4 C }# e! c
-
2 R$ O/ @+ y5 I x h, y; t2 F - <script>7 @* F* E. f6 E- r! U6 E/ S
- // 注册一个全局自定义指令 v-focus$ W# @+ c5 C( W9 \6 { }5 Z X
- Vue.directive('focus', {. ^/ r5 T/ a% Y9 E. s+ I: F
- // 当绑定元素插入到 DOM 中。0 i6 y0 b. Q5 p
- inserted: function (el) {
6 q* x; B5 f' h - // 聚焦元素
7 M& a2 a d: m+ Z5 f( L* ^ - el.focus()
4 l9 h9 ?$ r2 B - }
( X* r+ V5 Q+ Y Q6 m/ U4 G - })
+ c4 @7 B- p3 G3 v - // 创建根实例
6 }3 _) T$ T, c9 [; `; l0 f6 C - new Vue({
% l6 y! J' q k* B# @+ M - el: '#app'2 `9 T- C* s$ K. P1 ~
- })6 k3 }: R4 s5 K/ f% x
- </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例
* ^3 L) Q0 n$ f6 E6 ^% E, s0 e+ q
0 V) }+ G1 p! C- p$ Z! `. V1 _$ N- <div id="app">
5 m2 }4 R2 X: |6 ]9 W - <p>页面载入时,input 元素自动获取焦点:</p>
7 Y+ ~6 L g: f8 ~6 R( Z4 ~ - <input v-focus>0 u+ O9 J; M8 y1 T3 C
- </div>
5 K2 q4 d+ K6 j( q8 U9 L - : ]7 e2 M6 L% Y% z/ F. L$ |; }
- <script>
3 f0 L! r# |+ z& P+ w+ {9 ` - // 创建根实例' F8 \. y; A0 ~
- new Vue({
1 t0 W; ^) s+ p6 X; y - el: '#app',& `* ~: E* p( E; m9 E0 i% j3 }
- directives: {; U3 \5 Q7 g- _$ t
- // 注册一个局部的自定义指令 v-focus! Z4 ^- z$ ~4 d& r7 I/ ~5 Q
- focus: { l' }4 Y2 d7 p9 M9 q/ I' w
- // 指令的定义
2 t) ?: N7 U, r, E/ c - inserted: function (el) {" }& Q6 W9 y2 F- l# q
- // 聚焦元素: m% E/ W4 f) f9 p1 P+ b
- el.focus()
- }: |; F$ T5 Y" {7 \' N3 I8 \ - }
9 D; m$ ]: A+ b& V! W; ?1 g, D - }
/ _3 p5 a* H/ l6 l9 {+ G: Q - }5 C( d) I, T( B6 S" z% _
- })) |5 R+ l' k6 U& ~6 X( n( Z
- </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。
1 m8 q \( V2 @# Q0 x* B% Y3 J 钩子函数参数钩子函数的参数有: - 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 }。; Z3 n' ?( p) h# a( V
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
& B! ^ K$ Y: N8 v
以下实例演示了这些参数的使用: 实例
3 A y5 F* \, H0 I T6 ~
1 {6 ?7 @. h7 Q6 j- j- <div id="app" v-runoob:hello.a.b="message">
5 U4 Y4 ~1 z& b+ n" X& B' Z) s M& ~ - </div>
6 ^6 o4 L# d7 C" l. S- O3 v! f4 l - U) y0 e; I' g1 C) r" M
- <script>3 p" Q, \0 C' E4 z% \- e8 |
- Vue.directive('runoob', {
7 X& o- Z. G! }& l& V4 I - bind: function (el, binding, vnode) {4 l" J \, P+ u' d% g% b$ w1 k
- var s = JSON.stringify
, o* x' p9 \6 L# o# w2 E" z4 g - el.innerHTML =: ^$ A0 ~5 e" G$ K; ?* |
- 'name: ' + s(binding.name) + '<br>' +- t6 n$ g: w$ [. U* I2 R
- 'value: ' + s(binding.value) + '<br>' +: Y7 a$ y0 `: C" M* |
- 'expression: ' + s(binding.expression) + '<br>' +
! _6 Z6 j( N; b1 L U( h - 'argument: ' + s(binding.arg) + '<br>' +8 H( }+ g" V1 j' i, ~
- 'modifiers: ' + s(binding.modifiers) + '<br>' +
2 q; Q* E- D) |% g! y1 v - 'vnode keys: ' + Object.keys(vnode).join(', ')
6 N+ K# y1 P4 K - }, l8 G1 U: h$ H" o5 o, O; P2 T
- })$ m4 M4 `* _5 s ~" I
- new Vue({4 d5 K t% C B9 y+ C. g3 g" c4 K
- el: '#app',9 }) _( T: C$ `. `9 u; m) f/ E, ~+ \
- data: {$ c6 a" ?/ W& {6 }' C2 [% {
- message: '菜鸟教程!'
2 I# J, |+ h1 _* F - }5 d( v' E% @" F5 X3 L
- })
2 U. L/ Q# X O& ^8 y - </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:
, J5 o4 u$ X9 k2 {- Vue.directive('runoob', function (el, binding) {
9 [9 \2 a9 M) @- W - // 设置指令的背景颜色5 Y8 ^( J. t1 F8 X# Z$ g
- el.style.backgroundColor = binding.value.color
: W7 d7 ^ E* u* Z4 w - })
复制代码
: [4 \* [3 P0 D/ a. H, l6 Z; D% m( T& L5 O2 W4 Z
指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例
" ^" e3 q+ n) A# o! |, D/ a' w; c) G m: t2 D- U) M
- <div id="app">9 p/ w; F% R; d: @+ q4 S
- <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
: ]' }5 @; F! B4 j! o# p - </div>
, a' |" ^0 M7 h: f4 M! ~1 m$ t -
: O7 s+ j N; j1 e - <script>
' L1 o O# u; l3 j - Vue.directive('runoob', function (el, binding) {2 Q/ {* I" _: q+ B
- // 简写方式设置文本及背景颜色( C2 O5 Q1 H; W7 }# H
- el.innerHTML = binding.value.text, x" R( D2 ^ g
- el.style.backgroundColor = binding.value.color
) t, l/ i. ~% w/ @ - })
O# B# o) s' |4 T! m) ^ - new Vue({, c) w7 v) \* f0 \; r
- el: '#app'$ b! t. x& O2 G" q+ H ?6 F& I
- })% q, h3 Y# H' z% U: c
- </script>
复制代码
1 M& |0 w$ h! h: j1 H' Y' _& @
1 X" F2 d7 [' W4 a5 V3 d4 x2 p' J6 ~. g+ v2 ~
|