1 z% N4 y" J' n
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例
* X. y! z1 b/ ^# i: I; v; F
9 ^5 d; _5 W' L& h* ^4 S3 }- <div id="app">1 A3 D# ~) i9 V; ~5 C0 h ~
- <p>页面载入时,input 元素自动获取焦点:</p>% q/ V% }! m7 L9 E% X3 d- V
- <input v-focus>
. b* p( }1 q- v8 Y - </div>
7 q, t8 M7 u2 ^3 ?: P: i - 0 g a1 l2 h' Z q$ }* [
- <script>
" i/ K7 g" j6 J; p" Y! N2 W( }; _ - // 注册一个全局自定义指令 v-focus
& q1 x' a0 P+ ], W* U1 y; b! w - Vue.directive('focus', {
& l+ V5 ]/ I: V; J - // 当绑定元素插入到 DOM 中。
! o! Y3 Z. T7 d/ ]" p% K - inserted: function (el) {
- U8 S9 @; U9 D/ u, \ - // 聚焦元素& u/ [" Q$ n5 {( V2 m" r
- el.focus()
% J* I: w% ]0 B3 i - }3 Y$ U- b) I. x: G1 v' A2 \) |
- })
{$ S% t# \ O( i* b) e7 a+ { - // 创建根实例, N+ [2 X! L* a' t+ ^, u
- new Vue({8 g1 O ?! `! ^ Z6 P' X& R- B
- el: '#app'5 V7 B8 {: z) f# L$ C
- })
$ J/ v3 B5 m4 \7 Y4 O, a4 W - </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例4 |( v- s) v. M0 g4 ?& d
( H0 X+ T( Q8 ^" y5 l- <div id="app">
) M# H* A+ x& r: d" Y6 a - <p>页面载入时,input 元素自动获取焦点:</p>
+ H* d$ V! P% i$ v7 S - <input v-focus>
2 [8 U3 k" m, W' t - </div>
' [" f; A& u, ^9 r0 h1 Z - 7 Z9 ^' E7 B, e- i: h. b2 S2 T
- <script>& H0 @+ L G) ]( c( J8 E( R
- // 创建根实例0 B4 g' U7 A' ^! Q4 J& `3 }
- new Vue({/ B# b+ F- n4 k: ?' h! w" o
- el: '#app',
* y; C0 F/ `( d) C - directives: {
E" {! U. B% e |1 Z: P - // 注册一个局部的自定义指令 v-focus: _( V6 z$ Z9 u$ Y& t" `
- focus: {7 E! T' g/ Q( w$ g; n& {
- // 指令的定义! }1 q, b5 ~# z0 t* R- G: \
- inserted: function (el) {
! D4 M, i# \- n/ B; Y: r3 N - // 聚焦元素5 N3 K0 {3 @7 o# F& i; p. a
- el.focus()
9 g# g1 z6 X3 Q) S" y; z - }
8 ~! r6 ^# L6 C, z7 E2 a - }3 A4 Y5 X" r, d* j! z
- }0 g" H' b c' J( \& F+ q
- })
' t* a$ m$ N" H. \; g - </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。
5 d& d0 y) h) [+ r 钩子函数参数钩子函数的参数有: - 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 w N/ }4 g% q7 N! G' w
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。9 H( U1 p0 N! u+ V
以下实例演示了这些参数的使用: 实例* W7 h- q9 D9 T* y F6 E
h' @7 }5 `+ Y; ]4 R0 T* Y* S5 h- <div id="app" v-runoob:hello.a.b="message">
, T" ~# K. C0 T - </div>& _8 [5 W' z( E' s
-
7 ~4 p! W3 S3 q) y0 c( z7 R- q - <script>. X, |/ R h: {/ p' j, Z" B) E4 u) [
- Vue.directive('runoob', {
4 |7 ?* j2 Z t% C& A: ] - bind: function (el, binding, vnode) {* ]! b3 |3 f7 @ J0 O$ ^. f9 b7 e+ K
- var s = JSON.stringify
; r; k' {6 ?! i2 f5 L9 s$ O; @ - el.innerHTML =
; M. Y' {# g; o: B7 K! X - 'name: ' + s(binding.name) + '<br>' ++ e" ]- y. [. C
- 'value: ' + s(binding.value) + '<br>' +
% g, M S& U7 P& y5 f5 c, B - 'expression: ' + s(binding.expression) + '<br>' +
! B$ a3 @: K' }3 B# r( ~3 Z2 \+ ?/ j - 'argument: ' + s(binding.arg) + '<br>' +* O1 \% @- I3 z W+ x
- 'modifiers: ' + s(binding.modifiers) + '<br>' +2 `, c; J4 Q- |3 Q- c5 @9 g
- 'vnode keys: ' + Object.keys(vnode).join(', ')
( `! x) _0 U. c& }9 k4 Z - }
: [# G9 T6 h' b - })' _/ A% }5 K4 b- u
- new Vue({
2 ^/ |+ V" A7 z2 T1 G ~' n# J5 l - el: '#app',2 {! W) Y. L- g2 d4 @# O$ f6 K
- data: {: H- s" D4 o6 \( p3 Y Q
- message: '菜鸟教程!'
: w, F5 R1 y; ?, q, I" U) L( b: k - }! O" h) L0 p* g! ^% S
- })
9 P6 I- \5 J. Y% ^5 I - </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:
; ^) R2 D R5 P; R- Vue.directive('runoob', function (el, binding) {
/ v4 A0 u4 u! ?; Z/ g# z+ } - // 设置指令的背景颜色
6 m7 h7 p. L3 _3 J - el.style.backgroundColor = binding.value.color0 t: q! g- {# m2 _( E
- })
复制代码
' y$ ^5 T7 S2 q G5 W- o( J! O/ W8 r5 H* h5 \8 {8 Z i. C( o
指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例4 ~3 b! o% m! `. y
2 w* x" u# G' \! {- <div id="app">* D8 y9 N/ O( O& W; l
- <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>7 H7 c4 q; k. F# A
- </div>* x2 [7 E. P3 y* k. j6 d* S
- - b8 w: J9 }- v0 X$ y; N( [& i
- <script>; s1 Y6 m; k/ _! @. S! F( Z: ~
- Vue.directive('runoob', function (el, binding) {& y" A" Z$ D! l* X* k
- // 简写方式设置文本及背景颜色( D z# k4 z; l w/ ` B; t, U6 X
- el.innerHTML = binding.value.text
& u5 a3 s! d# @; |, g& d - el.style.backgroundColor = binding.value.color
U# ^- S* x8 B+ R, p2 \ - }) ~7 @" ~3 @' E4 u
- new Vue({- i* A7 i1 w4 b+ `- q) o h! v/ h
- el: '#app'
9 f, M2 F* V9 f+ H7 f - })
0 t' P; ~# n% o( ]& G0 n - </script>
复制代码 ! u# I( z6 e" Z$ b% p# G
) l4 x/ p2 }4 K8 u9 q8 h; I$ j
0 s1 V* r& L* H7 O4 ~ |