" v( s" k' j8 O1 L3 C9 K9 }/ z
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例
/ \4 N! j5 ?+ V' @
4 r' X/ g, w* `2 N6 q5 l e- <div id="app">
! C8 |2 [- H% K - <p>页面载入时,input 元素自动获取焦点:</p>
6 X1 @# o- t8 F2 z3 Q" F# x+ a6 [- [ - <input v-focus>
* S3 K1 o* `: v - </div>
8 B2 X3 S$ c% K+ a6 m0 s& b - 1 L z, {9 @7 i O/ ~
- <script>7 J0 _8 `$ M! |2 V
- // 注册一个全局自定义指令 v-focus: r5 @1 C( I6 N1 ~
- Vue.directive('focus', {
( m# |9 J3 X O' u" N G9 G - // 当绑定元素插入到 DOM 中。2 M2 h% v" H/ p$ S& L8 \1 D% d# S x9 {
- inserted: function (el) {* N1 `( A0 M& f
- // 聚焦元素. l' ~: K2 x( e4 X$ I
- el.focus()
$ K% S/ x/ g$ t2 [" f, }- }$ { R - }
- n4 n2 j) }1 L3 [: R: P - })
5 w) X/ \8 h6 |5 I1 a% e/ A1 @ - // 创建根实例
- F% K3 I* p8 P+ @9 B& F - new Vue({; ?1 q# o/ H7 U7 [6 `1 `5 g8 O
- el: '#app'
5 J8 h1 ]) V( A: b/ _) O0 J1 a - })
9 q5 `7 \ {: |: I" m, h - </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例
. P5 V3 @( O& T8 p4 o. S7 L' R+ i/ d! B# s
- <div id="app">& @2 h9 |& i6 o; e6 s8 _. o) W
- <p>页面载入时,input 元素自动获取焦点:</p>+ `( z9 k$ s/ E( F8 f
- <input v-focus>* n+ _$ K. \+ b
- </div>
) u% @) X) w, o% F! E1 v3 j - ) k/ q: C# X" Y+ m3 N/ b
- <script>) \ T5 i: R. S# |6 D) K# {
- // 创建根实例
N/ `' K9 i! N" ]/ q. j# o - new Vue({
" z5 @* ]1 d% |7 c8 t# T - el: '#app',# {/ c+ ~' l1 o2 S6 r$ q, p
- directives: {1 h5 v) |& ? P* D8 T5 Q6 I G$ M. A
- // 注册一个局部的自定义指令 v-focus& {- z7 s) e" b/ | y
- focus: {7 `: ^: j: }+ y Y, Y
- // 指令的定义
# Q# a6 a9 S' x4 ~3 @ - inserted: function (el) {
3 m; e& g& M1 u$ @5 A, ]! B: E - // 聚焦元素% @' u$ d& v# X$ }3 A7 M* d! Q; J
- el.focus(); ^$ }7 W/ d' U7 {; G& h3 Y
- }8 N: Y; {' [/ b
- } ]1 z; [) }) D s# y
- }
; Z% z3 ], W5 x" t6 a - })
5 B! H' ^8 k- n G7 C( ?+ X, F - </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。
5 Q# i# A3 `; M. l# r( s* ]) x5 [ 钩子函数参数钩子函数的参数有: - 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 }。
9 D' r! u* s4 ~; Z
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
+ i/ v) |/ M( s% y0 X% s2 W
以下实例演示了这些参数的使用: 实例% R# M, r0 N) v4 \
; {, W! W) n4 x4 z, Q- <div id="app" v-runoob:hello.a.b="message">
4 [! d. K- f! l) ~ - </div>
* X$ a+ L6 B7 w5 k f! W) u: `% R - 7 l* D3 l) h! ^$ h
- <script># h" V% e+ A R/ h6 i
- Vue.directive('runoob', {6 m: m# z: O4 J( B. k1 G
- bind: function (el, binding, vnode) {
4 p: J# l0 }$ R; w+ h/ D - var s = JSON.stringify- m- A+ w' d/ ~/ q5 i' f
- el.innerHTML =
# z& {1 y2 A) D7 c - 'name: ' + s(binding.name) + '<br>' +1 z p( N; \/ Y
- 'value: ' + s(binding.value) + '<br>' +! ?& Q: U7 M& g: c
- 'expression: ' + s(binding.expression) + '<br>' +: S/ L2 P/ I4 v" J/ o( m3 k9 v. {
- 'argument: ' + s(binding.arg) + '<br>' +) p5 K$ [) s$ Q+ b1 ?. B+ ^
- 'modifiers: ' + s(binding.modifiers) + '<br>' +; b$ ~& m9 _) c1 }- a( F
- 'vnode keys: ' + Object.keys(vnode).join(', ')! T4 _3 u8 M9 Z) D
- }; Y( Y, ^7 B0 O3 H
- }), h' W$ n7 O3 E5 h
- new Vue({
3 k7 K8 C% t' J2 V7 n4 q# N - el: '#app',
$ l1 M7 o9 f. K9 [) n5 ~( M - data: {7 p% z/ n" f1 ~
- message: '菜鸟教程!'
w, i* H% T* v8 ~ z. K1 p - }6 ^/ J4 }* e0 i5 H; L, |* J( k# i
- })8 S' [. i+ _/ ?* @" o4 q
- </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式: G7 F9 ~2 {3 e+ n, x$ H( J5 D
- Vue.directive('runoob', function (el, binding) {
- e5 K4 N# ~" _) J( | g - // 设置指令的背景颜色
2 g0 p) I2 S3 \" B" u$ @+ ]; ` - el.style.backgroundColor = binding.value.color; ]4 p& S& t6 e. ?( Y
- })
复制代码
. a7 o5 v: t4 |) P3 Q- }! v% V% k3 W% Q; {5 n+ v
指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例. a1 n: @" ], G0 i) Y$ ]3 s
% T# e2 k2 v N5 \2 L$ z
- <div id="app">" F/ @/ X) M" u: p0 S
- <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>( E9 W1 l& D6 S$ c( Y; f+ ]. U! v- v
- </div>
1 F. i2 r2 H- D Q3 s! }* F, f - : _6 s# A2 k$ ~3 {
- <script>* F* S/ D( f0 v6 a
- Vue.directive('runoob', function (el, binding) {
$ i+ c5 ?' v1 ~8 W9 v - // 简写方式设置文本及背景颜色# C5 @1 C$ N3 K
- el.innerHTML = binding.value.text3 e! _0 P4 K" j+ C
- el.style.backgroundColor = binding.value.color
$ A( U% _* G- j8 i3 ~# y& Z7 c2 ^ - })
* {/ F8 x% ~9 j; u! F n, Q - new Vue({
# z- v2 e# d/ N) i. U - el: '#app'( d, Z r2 i. P6 }& {! g
- })
8 o" A* y* d3 z% z - </script>
复制代码
, {0 @) o) ~+ E" f: I
4 Y) ~0 R- P8 G- a, d% Q% _
6 N9 o" j* }! t! z% D* Y |