( v3 N }8 }7 Q9 z% K( T% G
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例
2 o3 ~! O% C( \% o' |5 v0 ^8 [7 b8 ~: o% H1 y: q/ a
- <div id="app">
$ W6 B) K$ k1 P/ G0 [( ]' a) X1 ~ - <p>页面载入时,input 元素自动获取焦点:</p>
3 k2 D' m' ?5 T# ]# X8 Q - <input v-focus>$ j( X9 Z c j" g
- </div>! V9 y* u/ m* u" `/ `
- 8 v) } E. P& Q- q$ P+ E( b2 d
- <script>8 {( l6 `$ X1 b+ x x
- // 注册一个全局自定义指令 v-focus' c+ C, A0 G+ p0 u0 u5 A+ Y
- Vue.directive('focus', {
. Q/ j( R) n. o& Y - // 当绑定元素插入到 DOM 中。; h( f4 h3 f) o2 v+ u
- inserted: function (el) {/ Q+ C- T C+ N
- // 聚焦元素0 N# I0 _% O3 I' H
- el.focus()
0 |1 m+ ~- e' n# ? {" ?2 r - }
/ k- s: @ w! |3 q - })/ z: [9 x( M$ I. o
- // 创建根实例
$ w; x; c2 m5 k - new Vue({/ u% M- w2 g/ t' N# ~
- el: '#app'
& P; S- ?4 H* S, F# Q; q' i - })3 ^7 o, I. f+ `" w( R
- </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例
, M! S0 Q" p" n6 I) t5 ~! v$ G% o& h |
- <div id="app">) H/ V$ E9 c, P2 g: |% a$ ^
- <p>页面载入时,input 元素自动获取焦点:</p>9 K& T" X& v. C
- <input v-focus>3 ?$ e" _+ |7 V
- </div>8 z+ ~8 T8 V; f9 M- ~
-
& l. `" k0 [' m1 Q, V - <script>
, U$ D1 i, {4 X+ I! r6 ]" z- n" K - // 创建根实例' R2 L# y! N" C7 r b
- new Vue({
7 w8 K7 M6 J( K5 j" \: p - el: '#app',
# @" n2 F# c S- Z7 Z* h% ~7 s4 S - directives: {
9 y/ D/ s6 W: @7 i* ~* Q9 k - // 注册一个局部的自定义指令 v-focus) b+ B9 ^1 P3 n0 U" R/ M* o9 W
- focus: {* P. d% b- P3 h5 B! e7 p7 J
- // 指令的定义
3 F& e. e4 u6 I5 M/ p' Q - inserted: function (el) {
; W2 t% e) |. x- ?: `, l - // 聚焦元素
; s4 o* I1 s i - el.focus() s6 k! w& @9 q2 C2 g
- }
, x: S. ^) q( p I - }
: S0 D2 k3 _$ l$ n! F - }
2 M2 t( Z& C3 p. S# `4 y. L8 X - })- }% p* l: c7 W
- </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。
& T( e* U: t; 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 }。2 P% v( P! y( } n) i
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
) [$ I: P3 m! \) d) A- u
以下实例演示了这些参数的使用: 实例, \8 Z; g8 Z; f: M" z2 j6 ~ U1 _
) ^& Z& t# Z+ u+ [: {0 q1 y& C" w- <div id="app" v-runoob:hello.a.b="message">8 f) ^0 x6 y6 b* w- b
- </div>
2 a2 K1 J" C& U! w; i- ~ -
- H0 P- X6 N' F$ p - <script>0 |3 d, z' s5 Y9 g1 o- `9 H
- Vue.directive('runoob', {2 x& H. N4 x0 o' d# p7 \% N
- bind: function (el, binding, vnode) {0 q7 O# L0 {7 _' ^' m" \3 t
- var s = JSON.stringify$ g: |0 ^/ ^% k5 x
- el.innerHTML =5 @. g' F& H1 k1 {0 r
- 'name: ' + s(binding.name) + '<br>' +
& e+ b4 ~; V- |! H - 'value: ' + s(binding.value) + '<br>' +
( e1 g& M! E$ ^ - 'expression: ' + s(binding.expression) + '<br>' +
" D" D, K& N/ K3 ]' B- M - 'argument: ' + s(binding.arg) + '<br>' +0 `6 ?& A& U9 |' ]8 N
- 'modifiers: ' + s(binding.modifiers) + '<br>' +8 j6 B) _' k4 `/ w
- 'vnode keys: ' + Object.keys(vnode).join(', ')
8 O+ h# x. F# @6 x1 E - }2 e7 C0 W4 a/ K c b3 U
- })5 p' G) _" \! O2 D7 T1 N
- new Vue({
: }; }8 n3 S) k ]! b3 S - el: '#app',
. u9 j3 y7 I; r! {/ ?: V$ J - data: {2 W* j7 T+ f* v) [+ T. L
- message: '菜鸟教程!') B0 N! }* M0 m+ g A3 u7 |6 n
- }
" M& y( o+ ?) i) R# l4 h9 }5 ` - })$ F7 m- Z9 ~# {: v2 T) g
- </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:
+ a+ {$ p6 j5 U3 R0 \4 A- Vue.directive('runoob', function (el, binding) {, H- k( x$ B( H' O9 Q3 \, ?
- // 设置指令的背景颜色0 D- o0 v/ k% T' V) _) i+ V. _
- el.style.backgroundColor = binding.value.color
0 T% r% L( Z6 e$ @' [% T - })
复制代码
8 n5 J9 l4 [$ p# Y! ]; N+ m4 g* T2 }, l( f: X
指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例1 l y& M3 l1 U: W( {5 j
+ W' t7 @+ [& D2 ~
- <div id="app">
- n! V' [7 N& X& o2 y - <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
+ ?3 B8 h: G2 s4 Q7 E7 @* n1 G - </div>
! R' y( n/ [, ]% V: H% o4 d - 4 Q5 |$ w b* [' U+ m- _
- <script>" \+ x2 J7 x1 A& \3 l# ?$ ]9 a
- Vue.directive('runoob', function (el, binding) {
n3 L9 m/ K" x: w' {# @ - // 简写方式设置文本及背景颜色. n# n8 k/ S( U, ` \$ T* t
- el.innerHTML = binding.value.text+ { e/ F6 V: E, l. V2 H
- el.style.backgroundColor = binding.value.color
/ U3 E7 ]- b t - }), Z5 D4 V" Z4 j P' C
- new Vue({
& c2 T$ L6 C% C: B' T6 ? r( W. n - el: '#app'
0 v$ [' k3 Q, H8 `* m' o* z; n - })
+ l, x4 B$ k& r C* {3 \# y" l - </script>
复制代码 2 c. i' B/ s3 S5 u4 H8 Z3 A4 G
/ t2 {) n# R! a9 F- w! H+ D9 J" T) c' Y/ \! I
|