+ n4 P6 h8 W) x, t
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例; u2 q2 t5 Z3 P, o! y
0 Z' T* ?3 S) Z$ f- <div id="app">
5 k) ^) [/ j+ q i4 H - <p>页面载入时,input 元素自动获取焦点:</p>
5 l8 [0 X0 j9 o* {0 i4 Q- j7 N - <input v-focus>+ v* p' [; s7 N$ f8 @7 k
- </div>
: ]$ u' d9 k8 g# I4 n1 ^1 U - # H' P5 I/ G; Z& S* d0 Q
- <script>
# {( _1 e; h' W4 s6 n - // 注册一个全局自定义指令 v-focus
: e! `) L2 j! Q: O7 [ - Vue.directive('focus', {
% W; c9 r$ n0 N3 ?0 j - // 当绑定元素插入到 DOM 中。
5 Z M8 ]: D7 h/ \ - inserted: function (el) {- K5 ]+ S9 i4 j$ F
- // 聚焦元素/ c9 V a- j6 _, J# f2 q0 ^
- el.focus()% o, S% q- Z& L5 b* K8 P1 {
- }
2 ?; K- D9 q0 R; ]% `, C3 V" e - })% s6 s1 w" @1 O/ G* K& y( S/ v8 e) `
- // 创建根实例
- r0 q$ s# R/ K$ S - new Vue({
( i% T& a* k% y) ?- ]) G - el: '#app') w2 s$ q( i- i* t4 }' H
- })
5 {* ?6 v5 W& w2 A. g, Q - </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例
0 T g, a1 d9 ^) |7 P- ~8 q( Q# W% S3 E) y) a
- <div id="app">
1 c+ w9 e( ?( [ @4 m- E - <p>页面载入时,input 元素自动获取焦点:</p>1 f, C9 E4 L' v9 M5 l" t
- <input v-focus>
' H! D D$ Z1 r8 N, m/ r, F: ? - </div>
% L1 o' s9 ]4 E& Q$ E$ r - ?( r! ^. T3 @* j: M
- <script>
6 N# s! e6 E$ E; l& s - // 创建根实例
6 _" ~: g0 G% h; L$ h) A - new Vue({+ B# s+ C8 @8 E: L1 Q+ n
- el: '#app',' W6 Y% q, r2 k; I) G W0 l
- directives: {7 Q, p; G! @% ?- o- {6 @3 q! k' @7 B
- // 注册一个局部的自定义指令 v-focus$ {$ x% o, v8 L6 W: m
- focus: {
: A8 z0 X( {2 h- R - // 指令的定义
. X+ V! y1 e+ n; d5 u; {8 I - inserted: function (el) {
4 r+ T4 r0 U" G: W4 q0 X7 F3 u; Z - // 聚焦元素
, n' \3 } f# r - el.focus()
# T4 p3 p2 C4 A" C4 a8 { - }3 {7 [9 B8 I' |" ]5 F* t# L
- }
! o) ?# {$ n; [/ [$ X |8 Y - }# Y' v$ X8 k. s7 ^1 a
- })5 y s5 R4 ^+ Q1 X% `! e* K& Z
- </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。 # s/ u3 a* Z: j6 x% U; q% O9 d
钩子函数参数钩子函数的参数有: - 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 }。
/ R+ T4 Y( g- e* J
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
! b) C: Q6 R% v& d2 S) o) P/ o; E
以下实例演示了这些参数的使用: 实例0 G _. P1 l) j
* d8 @9 s+ z' m& b
- <div id="app" v-runoob:hello.a.b="message">
# B8 I. g* z. u# ?5 w$ {; W$ ? - </div>% a& ?7 o8 q! h
- % R: I1 R' a5 c/ |) Y, W+ ^! f4 q- _0 N
- <script>) J" k) {+ d |/ t( H0 P
- Vue.directive('runoob', {$ P6 x& S- y1 x. p
- bind: function (el, binding, vnode) {
# \+ w3 _1 p0 S7 k: Q1 { - var s = JSON.stringify
# x/ w! ?/ O- u6 r% l - el.innerHTML =
0 G u z6 y$ g- [8 @ - 'name: ' + s(binding.name) + '<br>' +9 A) I+ n+ d% A8 O# R9 c
- 'value: ' + s(binding.value) + '<br>' +( \ E$ P' l; n" A& Q" O
- 'expression: ' + s(binding.expression) + '<br>' +! f, Q& K: T" j; d
- 'argument: ' + s(binding.arg) + '<br>' +
9 E/ A) U/ A" A - 'modifiers: ' + s(binding.modifiers) + '<br>' +. I h( w- M& _' f6 ]* H7 `
- 'vnode keys: ' + Object.keys(vnode).join(', ')2 B8 N; o. l( d d
- }0 W/ G7 T" j# f$ a s
- }) `; D+ D/ A4 x" U+ _/ C
- new Vue({
& B( v7 C2 k! M% Z' @1 i - el: '#app',0 W. @5 l% F2 r! a | ^! m6 a3 `( ~+ k
- data: {
1 V+ F2 S; Z" t. o: J/ S( C# g8 K - message: '菜鸟教程!'* k! I. J8 ]/ J" p. e
- }
# K7 k' }* J, z4 L7 n+ C7 { - })8 s$ Y# t N2 X6 a) S) u: Q4 i
- </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:. k' S2 Y3 Z% n6 C
- Vue.directive('runoob', function (el, binding) {
1 ^3 n8 o$ N0 [# f" V9 y& g - // 设置指令的背景颜色
- m% f6 V% \0 i8 m - el.style.backgroundColor = binding.value.color
+ Q" T" m9 S8 r" H - })
复制代码 6 P- F8 U& C, [& Z& }7 M
( W9 Q4 I; a& m/ u
指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例4 z2 }( g& Y, G; D1 I% s
; U- s$ f* t3 _# k- <div id="app">
% v1 h# m B2 M4 J' y" `1 k8 T - <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
" y6 f3 ~) w0 j- r W! F! Y - </div>% `& N* u/ q; s$ I( K$ D+ {% r
-
' i) ?& v& @$ g4 G6 J+ p( d - <script>& P& A% k# ~5 M% e) _
- Vue.directive('runoob', function (el, binding) {
7 f1 o" Z) |& n @ - // 简写方式设置文本及背景颜色5 [0 D) X4 j% g5 t4 m! `$ r
- el.innerHTML = binding.value.text7 o: c; t( M, j N5 \5 U8 f. G2 [* D) ]
- el.style.backgroundColor = binding.value.color$ f1 Y( H6 u" `1 P
- })
( l7 Q7 A, N" v: i - new Vue({
5 H+ U4 M. @+ I - el: '#app'1 H, ~8 H4 c. e4 X
- })
- `( [2 a: a8 L$ r - </script>
复制代码
. v! R) b& F" H8 p3 c/ ]# w# n, ~) P8 o! Q" i8 P( W; p# H0 L
j4 I! f8 o' B4 N, s9 L- D& n
|