& r8 B: d( _: A& r8 Q& k+ y: ~3 q' Y
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例) E: E7 G4 y, C
1 m1 T( b f& H- <div id="app">) G" R* ^5 I( l9 J Q- m9 U8 T; q
- <p>页面载入时,input 元素自动获取焦点:</p># q7 L3 L7 l! }$ D; X
- <input v-focus>
( F0 \1 X3 \2 f( t# j6 s - </div>
& p* J; l7 F8 g2 @* i9 i) w -
: X6 @) N7 l7 h* T3 _ - <script>
" W2 B' j @3 ^* M6 s - // 注册一个全局自定义指令 v-focus
# `7 e6 \1 r: a5 h - Vue.directive('focus', {
" q7 Z$ g% H, h+ s4 |. M3 s - // 当绑定元素插入到 DOM 中。+ f) j. q& m0 I4 F/ ^
- inserted: function (el) {
2 c- \8 J9 e5 |% j) P5 ^2 N - // 聚焦元素 D3 z! N r3 c; t# P! @
- el.focus()
, l3 I- k) C( z" z7 K4 X) ? - }
% W8 |( H0 g9 c3 p) d1 K - })
! f( D/ Y- L o. [4 A! c. k - // 创建根实例7 W( E5 k' O* \! o& q+ y. \
- new Vue({
; N! y$ c$ o. @" R ]0 \# g0 S" s& b - el: '#app'
! O4 C8 \$ T) ]& n$ M! u2 J - })# ~* W. z& ?8 \2 ?# z
- </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例
1 b* n5 T! ]1 s# L! ~0 |0 W6 g9 E- \6 K
- <div id="app">7 X K5 S. j( T* l
- <p>页面载入时,input 元素自动获取焦点:</p>$ ~. ]* G/ B' h9 E: J9 @( S/ b( m
- <input v-focus>1 m! @ [6 p5 S. K
- </div>
) e( J4 @$ v5 {# v6 y( j - # Y2 Y6 B1 q0 @7 e
- <script>
/ z( K' j l1 e/ W* R' j* d3 X r - // 创建根实例% ^% ~2 k7 B1 \ I W W
- new Vue({% ?% F$ ~9 Z" Q8 a
- el: '#app',
) ]' h: X& q$ I# F1 E - directives: {
+ D- l2 C6 N5 K- k: k - // 注册一个局部的自定义指令 v-focus
4 O1 Z+ V- ]9 Z: g3 ?/ p2 h - focus: {6 w3 n1 s' H* s/ Y$ r' ~% i0 s7 b
- // 指令的定义
6 M9 h9 ~' n$ q+ M9 a8 i6 {% i - inserted: function (el) {2 u9 w$ T3 _, _2 a+ |, A' t: i1 y8 F! m
- // 聚焦元素
1 K( u7 r, Y- J7 R. |, s - el.focus()$ U r* k( ]: h
- }# Y5 s# H M2 y/ i4 e# Y
- }
/ J+ Z7 X: I5 M - }
0 F0 Y7 l5 \& q' T1 y- y# E/ K - })
8 t. Q* j5 m. V* H' p - </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。
# r9 _0 ]) m: q" o 钩子函数参数钩子函数的参数有: - 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 }。/ ?. c& y3 y3 C8 f
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
, \5 |. ?# j# ]. p# H
以下实例演示了这些参数的使用: 实例
6 ^6 }, B! v: k, B# \4 D; z# Z( y( z1 J& B$ K' T
- <div id="app" v-runoob:hello.a.b="message">
8 \4 e5 ^. l3 B' @6 u( q - </div>' G4 \3 X6 W# X+ v8 A0 U9 p8 C
-
+ d; H: U X2 C! |0 F* } - <script>
) I# ~) V3 @9 w+ P0 } - Vue.directive('runoob', {; j8 _! }# B: I4 z9 T4 L2 \$ F
- bind: function (el, binding, vnode) {
) A: n" |( e4 P) I! o& l. | - var s = JSON.stringify
3 q* F) I/ `- ~' P# Z( g* q8 f2 N - el.innerHTML =" u q7 `# [- l! E0 \
- 'name: ' + s(binding.name) + '<br>' +
5 z" `2 C9 C2 ~+ g9 C; R& c - 'value: ' + s(binding.value) + '<br>' +
7 b, s! o$ n) E, X; B7 } - 'expression: ' + s(binding.expression) + '<br>' +
x3 [, S2 A2 n4 G% @ - 'argument: ' + s(binding.arg) + '<br>' +
0 d* A U5 r, x7 V" r( w- E0 q2 x2 `! ~ - 'modifiers: ' + s(binding.modifiers) + '<br>' +
- V0 F O7 Y2 s - 'vnode keys: ' + Object.keys(vnode).join(', ')9 |' Q6 ]& V% v
- }
: K8 d1 T _7 G* v - })3 H" T' f0 ?) e B2 n* R
- new Vue({
e1 n+ p0 s- W/ Z( Z7 M - el: '#app',& ^: U4 t" ?1 m" d4 D4 g
- data: {
1 c& K2 X6 {% S" Z: g% @ - message: '菜鸟教程!'4 q& `/ q% _, h; H/ X( R
- }
3 s* ?3 a! g! {, y) y - })
7 R" }; R* n$ I0 `% f9 b - </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:
% T8 m1 B# b1 ^) X" K. K) [- Vue.directive('runoob', function (el, binding) {$ r" ]. T* ?+ d3 I+ @
- // 设置指令的背景颜色
' Q! h9 W! `4 ?1 E: ^ - el.style.backgroundColor = binding.value.color
, n. t2 J! u/ _/ c# C, i; ]# l( I( l - })
复制代码 ; u2 e$ o7 u) @- G
9 m& X/ B1 W# w指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例
7 v" `9 y& y1 O/ \6 O$ c
$ |# }4 h+ Q6 a& b; Q- <div id="app">
3 l+ L6 v' N2 E+ l' T* v - <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
2 s3 l% X! c0 S" I) N2 `2 V3 {0 r7 @ - </div>
. C; d0 `& j7 z- t7 h6 G - ; ~$ }$ h$ q) K) A' x
- <script>
9 j; N7 O: p0 K* h - Vue.directive('runoob', function (el, binding) {# u) k q: O0 k. Z1 y6 X
- // 简写方式设置文本及背景颜色1 M: W2 y- U1 J; z( i% u
- el.innerHTML = binding.value.text
5 g0 m' q3 I$ c/ [( l - el.style.backgroundColor = binding.value.color
! f2 n& o9 R' A% a; g0 l) D - })& ~5 r+ C6 M% Z$ k: K" C5 i# R
- new Vue({
, l& v2 D8 P+ C9 K; R7 a( s0 N - el: '#app'
5 p5 j$ g% K* j7 N1 I7 ~: N - })1 k0 J, m0 g% d$ {7 u: w
- </script>
复制代码 * i1 t& [0 P q5 r8 O" W$ s
, z5 l$ y7 Y9 R* C. O+ v: }5 D0 c1 v, U( n3 {
|