7 Y0 C" ~. ~7 J' Z. n0 T! T
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例
. ^7 Z1 S0 C, t2 t6 n4 O0 M( |8 O& j5 \6 n# \1 f, |
- <div id="app">
% F8 ~3 V" ?3 H" H - <p>页面载入时,input 元素自动获取焦点:</p>
$ U" |( c+ ?$ |; v - <input v-focus>* h7 W b' X2 B6 ?" u
- </div>
3 Z( I& g! q' H' | -
; \# k. e$ b! m' V - <script>
/ z2 ]! k D5 @ - // 注册一个全局自定义指令 v-focus S& j# {3 z5 _6 _
- Vue.directive('focus', {
7 Y+ w- F# P" W) U - // 当绑定元素插入到 DOM 中。* ^+ f* K! ?: T% t4 i
- inserted: function (el) {
C$ h+ ~' |- N) {! f - // 聚焦元素0 y% l0 S: |' g! `9 \- }7 D5 p
- el.focus()
j c. \( [& y; y) z - }
( D3 g: V) W' X4 i' A3 w9 n7 k - })8 \) q& A$ K2 ?6 x: {# K2 h
- // 创建根实例
* x. Q/ Q3 W! l( t i# k5 k - new Vue({" Y* C. S& J% v
- el: '#app'6 @ g: U# ]: t# P! b
- })) L2 |, s( N8 D
- </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例
1 R1 x; z3 F) m j) U0 n8 |) o9 h i( q% V3 u
- <div id="app">
. i2 F9 Q- S* L# L - <p>页面载入时,input 元素自动获取焦点:</p>
' s6 u* [ h/ z* a - <input v-focus>4 w9 V% N1 @6 _6 W8 I& E
- </div>
0 T2 o$ u6 f4 Q! s - ! w$ }6 S/ F9 e2 W) ^& x
- <script>
: \4 J4 @7 R5 h+ |1 v; e - // 创建根实例
8 k, w3 ?7 [# q+ H( F; {) B0 v - new Vue({3 {! j$ W3 e. t2 C' c
- el: '#app',7 `: F- V3 Z: ` R. _" \
- directives: {* @! ^4 E% Y. L# T+ C* H9 ^0 E5 J
- // 注册一个局部的自定义指令 v-focus
/ B9 v+ G {2 L! ?" W, b: s4 | - focus: {, D6 i! h0 N- f& J: Y- H
- // 指令的定义) D& f' h7 s* }; {* e8 E8 ?( L- o8 M
- inserted: function (el) {: z2 u7 o' i* Z v1 D# S
- // 聚焦元素4 m: s" K" S5 |) z, h
- el.focus()8 q$ z6 d+ Y. Z, o
- }
( ^ _1 N, z0 B2 K' r3 I - }: v, B3 T* V; t. o, S3 Q; E) a
- }
) I7 I" I& h: `. f, a" _ - })+ {4 l8 l- W, q' H: i; U
- </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。
7 U- D2 Q: Q8 R1 F+ r8 V/ 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 }。
- _$ T+ ?8 q8 b) e
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
5 v' J3 a+ ^/ @0 b: a1 Q
以下实例演示了这些参数的使用: 实例
( E. I) D& Q' {- r: A: X
- A) j# ]. C# { t( c; |- <div id="app" v-runoob:hello.a.b="message">
: z! K* ^# V+ P5 X& g0 X- J3 N" B - </div>
) f! I P u. `- j0 h/ @) @ -
* o) w; |! M* C/ N) | - <script>
5 i$ T ]: W- I) E8 u4 [ - Vue.directive('runoob', {
5 J- C1 Z, N5 s- f" f8 m0 b - bind: function (el, binding, vnode) {5 F4 [% D( w; S# y Z2 p S7 n, j
- var s = JSON.stringify% e5 J0 _1 t# c2 W1 E7 h# u; w
- el.innerHTML =0 i5 K, t1 v4 O+ c$ q! |+ @2 D4 B( b
- 'name: ' + s(binding.name) + '<br>' +
* A8 C! y* U/ i5 M0 Y - 'value: ' + s(binding.value) + '<br>' +
4 c3 e- [0 y) g - 'expression: ' + s(binding.expression) + '<br>' +
2 v8 P7 Z: A! A% r6 e. B - 'argument: ' + s(binding.arg) + '<br>' +' ]: m& E! o, c6 L+ m) I: C
- 'modifiers: ' + s(binding.modifiers) + '<br>' +1 n4 j0 y+ ]8 N' o& [
- 'vnode keys: ' + Object.keys(vnode).join(', ')
5 ?, ]. X/ X) p2 l& ~1 Z0 }% { - }
9 f. n# o$ \' `+ N3 X - })
0 ~. l# a, ]) I6 B, W# y S* ` - new Vue({8 \5 H, F: b- W+ }
- el: '#app',
3 E% f2 n; O$ R! Z - data: {; x: O+ d/ {( x% I. ?
- message: '菜鸟教程!'
, F- `; C Q* L/ \* I, X1 z% w. m - }
+ ~6 c, x# Y/ V1 j% Q - })
+ G+ G9 x1 N9 @ - </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:
' Q, J0 ], V- u3 @3 n0 k% J' i- Vue.directive('runoob', function (el, binding) {, `$ G8 N: \) s4 K% r+ z% R
- // 设置指令的背景颜色
& |9 L* t/ {6 m7 J - el.style.backgroundColor = binding.value.color- J& @4 S' ~ C9 w# Q: s
- })
复制代码 . m& I9 H+ T; O5 K. ^
4 Z, N5 m' j4 D2 n% x) }. F& P" t
指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例, I1 Z* p0 b. |9 a5 r
4 l% f; w- r5 f+ q- a- <div id="app">+ _2 m6 c1 V2 n4 Q" |
- <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
! l4 H; w2 C' F8 K - </div>
& m' i& g, q4 S0 a. P& v1 R% C1 W -
9 [' V Y5 p* K - <script>" M1 R1 n- t) k; W
- Vue.directive('runoob', function (el, binding) {
; h( u0 n! T; X% Z ^- k3 d - // 简写方式设置文本及背景颜色! Z( S) }& C" Q4 g
- el.innerHTML = binding.value.text
; J5 u+ D5 `" V1 Y& G - el.style.backgroundColor = binding.value.color4 r/ h2 P& k: F$ L6 }
- })
( B) T( N2 V* _9 ]5 _, z: u - new Vue({' f1 A; X4 g; _8 c; |' n9 x7 J
- el: '#app'
9 w5 G" u8 m& Q$ q& g1 a - })
- l, @4 s; ~9 B. L7 U4 _. o - </script>
复制代码
' V, R# Y1 A* d6 B7 t- t) w0 T% S) A: O% A' S9 U4 G; I8 M' Z
; e- k1 |3 r0 \5 F: |, f K
|