6 f: f. c$ y! ^3 m2 p- `' m1 D
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例
" c7 a R3 X. e4 z2 w3 E' n9 y+ w1 \4 h; ?% d0 s
- <div id="app">
1 t. S2 h/ I# S/ Q! E7 l. O; i - <p>页面载入时,input 元素自动获取焦点:</p>
% E5 S: i N0 c5 K - <input v-focus>8 O& c) K0 l4 ]( U& C/ i
- </div>' U4 B* Q% S- ~* U1 Z1 b
- t u4 l; E& ?. `# V
- <script>1 F4 T2 b3 ~( W% r
- // 注册一个全局自定义指令 v-focus
- u" x# W) H) y: s - Vue.directive('focus', {) P `. i3 |' n0 K% S5 D# X% J+ ]2 v
- // 当绑定元素插入到 DOM 中。7 O0 Y3 z$ {; l) ]3 f
- inserted: function (el) {' Z2 y/ X' d7 ]- ]0 Y
- // 聚焦元素
& W7 {6 l' t2 Z5 x: A/ }% s2 s% e" \ - el.focus()
. w7 k& s5 G! U R/ h& D - }+ {6 ?& \ t$ Y a
- }); Q* x; H4 I- F+ E: Q) {: u
- // 创建根实例. s* A8 D; x7 }2 }) j( X! `; F' P
- new Vue({- m t) D$ g. t( p
- el: '#app'
. h( c" ]5 k( p7 K ] - })
! q* f1 f" h8 U. E - </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例
! Y) d7 k. i) T! Z7 Y
2 P# p3 D2 R& Y1 b+ C7 {4 G# k- <div id="app">
6 k' g! r/ J" u - <p>页面载入时,input 元素自动获取焦点:</p>
1 I! y+ {+ ]2 @ - <input v-focus>
: q) R* B+ A( f! Q* K+ } - </div>
) W# J$ c/ }2 @- |! G$ c/ Z( t& T - ( W x- X' ]3 d/ n2 X# u# Y
- <script>
Y9 f0 G* t& w! u9 w - // 创建根实例
" N. l- r- g' w. n C$ }$ W& w - new Vue({
7 h# n! L8 ]% e' R0 ]7 z* F - el: '#app',
3 N4 q2 B7 d, `" U& ]: i. s - directives: {
8 V V/ a- D& }" ?: u& z8 F S - // 注册一个局部的自定义指令 v-focus
7 ~% b J! r2 @2 a# k1 i0 g$ B - focus: {4 h! `$ H* \- e0 n; z: r5 W/ J8 U
- // 指令的定义1 x/ O; A$ @- m7 S; T* B/ I
- inserted: function (el) {' m, r- A `1 w9 c
- // 聚焦元素
: {7 T; y5 }. j6 |( i; u6 [2 g - el.focus()
) ~) E5 \' e7 |( c# ^' s" _/ I - }( a1 o5 D8 i% J( O- d, j
- }- L: w2 m4 y6 d* m4 u5 {' A
- }
$ q. `3 ?) c4 q) Y - })
3 g3 g* N3 M' n5 k - </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。
, {- D! i9 R! m7 H# F9 }8 K+ g 钩子函数参数钩子函数的参数有: - 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 R* ]5 d8 K: X4 U
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
3 y1 i2 E1 c! s, @
以下实例演示了这些参数的使用: 实例
, M' v! m2 o L3 Z8 `- W Y+ e* W, }2 y4 r( P1 r I' I
- <div id="app" v-runoob:hello.a.b="message">* H2 b, x9 m: u2 e4 T2 P) m$ i
- </div>
9 R( F9 z6 s+ x( Y& U' i! m2 N -
5 @# |8 U# b+ e. Y' L7 R8 T - <script>
' E% J+ V/ R- v* U) ` - Vue.directive('runoob', {
1 |: a; w; y, A8 i. d8 }: | - bind: function (el, binding, vnode) {
1 ]( o0 N7 X" b5 E6 J6 u - var s = JSON.stringify
/ }/ E; c; ^4 R Y" w - el.innerHTML =, X) t; D+ S8 |
- 'name: ' + s(binding.name) + '<br>' +
2 Q r+ _ S+ H$ n; F, i - 'value: ' + s(binding.value) + '<br>' +
$ k/ q" u+ @# R% r, x - 'expression: ' + s(binding.expression) + '<br>' +
/ a& u( R: }$ R( B - 'argument: ' + s(binding.arg) + '<br>' +9 C6 ~5 W! K1 T6 L# _. w$ D/ F2 ?
- 'modifiers: ' + s(binding.modifiers) + '<br>' +) Z& M- e6 Q0 D" v' z
- 'vnode keys: ' + Object.keys(vnode).join(', ')
. Z4 X; D0 C0 O' Z9 { - }4 R/ t1 v$ W/ ?. j9 `
- })% x, n. J& C3 k. K% d- a+ t( k! g6 |
- new Vue({( D/ W# ^( J0 e" U0 {. d5 E
- el: '#app',
2 |1 `, c! ]4 ?+ c, A' z. L - data: {# R5 S/ Q$ v+ x: M9 ?# s7 M
- message: '菜鸟教程!'. R5 v# g: p6 D6 M/ g
- }
4 H" o7 \1 V' H+ x$ w - })
0 s W( A7 \/ O+ ? - </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:
; L- e" k' H \# \- Vue.directive('runoob', function (el, binding) {
0 O, V* B2 H9 ^2 p! g! [1 A" M - // 设置指令的背景颜色+ [7 r. D2 u& {) L
- el.style.backgroundColor = binding.value.color
1 ~3 j' S' ?; ?9 U - })
复制代码
0 G. c h5 Q m1 z1 z! o. M) Y( X# f0 g
指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例7 H- m) s& Z5 a- m# U( B% [# A
6 L8 g' [. E; K! `$ c- <div id="app">1 F1 U& Y [! X( o- \
- <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>0 S, Y. v! X+ k, _3 R3 f" @( h
- </div>
' n/ O. j! m( ]0 ` -
. i8 J2 j0 V7 H0 N8 @1 v) a - <script>
. E! f" V5 G' j( x. k$ V4 | - Vue.directive('runoob', function (el, binding) {
0 @# I2 t7 o! a& L: Z p5 j - // 简写方式设置文本及背景颜色
5 T% B" m) k1 g: N5 ^ - el.innerHTML = binding.value.text' m8 x8 K" K0 L* P( V, C
- el.style.backgroundColor = binding.value.color- S% n+ U( j q5 [* R
- })
4 \$ C E1 ^" y' R' B& S - new Vue({
* D8 B7 n7 Z+ X" c# Q1 D - el: '#app'
5 p, {- q/ [# f: X - })
0 ? H* v0 O3 C' q/ y! s5 S$ y1 \ - </script>
复制代码
1 V- z# z- U+ |" p
X# Y5 l3 t* A5 U8 w( I+ x! f# S- x
|