' p! C; h5 x( P# Q4 F除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例$ ^/ Z! J; j# |. w; j' K
4 B/ f- b9 X! w7 R. \
- <div id="app">
4 W& m; q( d- d9 x& X- r - <p>页面载入时,input 元素自动获取焦点:</p>
1 ]! p: y* p* Y- o( J7 y - <input v-focus>- ^# t' |/ _+ i
- </div>3 k( c+ A% h& U! K1 [% b
-
7 a& D8 H: F& F7 u3 ~2 [ - <script>
% h5 W( P7 j& C- @ - // 注册一个全局自定义指令 v-focus
" ~! s7 @- d1 ~9 v9 Y& p - Vue.directive('focus', {1 i( p$ T. F9 v' u, ^4 {
- // 当绑定元素插入到 DOM 中。- q% ?8 K- q- A6 I$ k
- inserted: function (el) {
7 P+ f* B: k( u/ Y- T - // 聚焦元素1 h3 g T" k+ U; i4 q7 W9 S
- el.focus()( N6 ?: e8 p( h0 \
- }7 E; [) N: e& V' {% w" t8 O
- })
+ s. d8 `+ l" u$ Q7 B5 Q - // 创建根实例: Y) q$ @% X- l+ Q z: s& |* H( y
- new Vue({
8 ]# h, k" o4 M( P! v$ f0 @1 P/ ~( P - el: '#app'
: z0 X- v& o. f$ V* b4 T - })
: m" U, x* X2 l; H5 B - </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例
' j+ N. \' s Y w1 m- {: q0 Q9 E6 V$ Y6 X$ R( c3 f; o
- <div id="app">
, N2 M) \6 }) |: H% V2 s- J2 w; b - <p>页面载入时,input 元素自动获取焦点:</p>2 c! [4 W3 s7 w- ?
- <input v-focus>' L2 E7 |# x% M- P5 o
- </div>/ z5 \7 c/ _% I$ t& V
- - j2 m- X* o0 q: _. I; U
- <script> }# D( L0 ^6 L4 h
- // 创建根实例/ H) N: S( r+ d( h9 \* n
- new Vue({! ~# P: @+ E9 L' e% z" `- H
- el: '#app',
+ H2 `/ _, C0 g$ s! j* ]4 U, ^1 S - directives: {3 Q8 \8 w. \8 [; |+ [7 ?
- // 注册一个局部的自定义指令 v-focus* W2 C: O1 g; e# n
- focus: {
0 \ l( Y) N; \. N - // 指令的定义
8 ]/ }- {$ z% F1 ?1 g) t; [ - inserted: function (el) {
0 N. ?; t3 Q- y0 }. L3 [1 p# P - // 聚焦元素" K# t# ~* n. j! P3 j
- el.focus()
! J4 a# F4 O8 R+ }( z9 ~ - }7 z5 e: p! E! r$ H4 G5 x4 C
- }+ D) A" O; d8 `( O
- }$ M! N: Z6 G# R N8 z* i* Y
- })
- w, ]: L5 T$ B0 H" |. j - </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。 * Q& C4 B. n C9 ^+ ~, ]
钩子函数参数钩子函数的参数有: - 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 }。& S9 U n) C# r
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
6 g @% D) s; S) {( a( ~
以下实例演示了这些参数的使用: 实例" k" F" t6 R( q k
7 D% Z7 z3 |* d5 u. e! t
- <div id="app" v-runoob:hello.a.b="message">
- f( X: ~; b8 ?! m) i - </div>2 L0 n0 a0 a, ]
- % {( V6 {' t* i- a8 }3 M
- <script>( h2 b, i0 N( V3 h
- Vue.directive('runoob', {6 f& c) k% U; y
- bind: function (el, binding, vnode) {7 L. U. x; f1 c3 V8 ]& S
- var s = JSON.stringify$ z3 X4 M4 a% Q
- el.innerHTML =6 K/ F1 i8 h1 g
- 'name: ' + s(binding.name) + '<br>' +
% T; u* ? C/ e; L - 'value: ' + s(binding.value) + '<br>' +
5 Z# a0 _. `7 {. F6 w0 t - 'expression: ' + s(binding.expression) + '<br>' +. x. a# A8 ]9 W6 u9 b) |$ n
- 'argument: ' + s(binding.arg) + '<br>' +
9 v4 v2 A2 ~0 |& |9 K - 'modifiers: ' + s(binding.modifiers) + '<br>' +
) p) D# o L X. W3 H( m2 o7 s4 Z - 'vnode keys: ' + Object.keys(vnode).join(', ')5 ~- V" H$ Q* j) @5 {7 R
- }- c* E$ }1 N( M/ b/ v6 ]
- })* Y3 e! [. g! R: h/ M A
- new Vue({
4 [+ T7 z- ?7 R' b3 B - el: '#app',
7 N) c/ }; i. A( E, U1 F; J - data: {9 g2 B* I! ^+ Y5 ~3 M6 [4 w
- message: '菜鸟教程!'1 h2 {+ W) P, v1 e' n( y
- }
" k8 k- i Z- m( ^# N- q# m - })
+ a! `! n; I( k3 h v1 E - </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:0 ?# T% D) J3 M W8 P
- Vue.directive('runoob', function (el, binding) {* u2 Y+ K( k j$ N8 d+ d: ^8 k
- // 设置指令的背景颜色
: p1 p; z! V+ l% u2 A/ o3 \% V p4 x - el.style.backgroundColor = binding.value.color
- n" w$ Z2 L+ j& N - })
复制代码 " P4 a+ U( r+ V; f" a) B t
+ ~+ R7 Y/ g! B+ J指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例& P1 H: b; Q) v" c2 t6 |
1 k* ^* j) ?3 k9 q# k" V: e- <div id="app">
0 l/ p! S2 j' {6 H. U - <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
6 S: O# t; j4 r, H - </div>
6 S& K" _' L# b q: {1 W2 {. p - 3 i: F8 l( x! W; z) x5 }6 Q
- <script>
z6 B: t6 n/ ^ - Vue.directive('runoob', function (el, binding) {
2 q* W" l3 A$ C" m - // 简写方式设置文本及背景颜色" a' D. L7 x/ L" E% t2 @" C, A) i
- el.innerHTML = binding.value.text2 {8 \- b0 U" d$ q
- el.style.backgroundColor = binding.value.color0 {9 @! u p0 g" G. G7 k$ k P
- })# y! Q% ^, C+ Z; `4 a% N# a
- new Vue({
+ z' L3 S5 r [5 D3 [+ L* U - el: '#app'
! J) [8 b9 W* V/ ?( m. L% Y - })
3 s! q$ g7 O6 ?: V: `" a% }3 W/ \ - </script>
复制代码 % h* b; x. \1 o
- ]" x9 k* x2 J- Y' i* V
, N. i9 r( B+ X W. K |