3 U6 b1 U1 g3 a: q1 X" h除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例$ T9 E. N* Q# S: M) [; U6 ~
# C* s7 F7 l! O U" C
- <div id="app">
- [$ m: S* W& a - <p>页面载入时,input 元素自动获取焦点:</p>7 } k# ^* B5 q2 ?2 u3 D7 h
- <input v-focus>
6 d0 {* ~7 I2 t! H& w - </div>4 p$ T' n5 c: P9 V
-
: A8 ^, z7 w1 v/ } - <script>
6 p- \! ~4 h/ J5 W r - // 注册一个全局自定义指令 v-focus0 l: v3 P. g' |' C
- Vue.directive('focus', {7 z7 i0 X+ G4 F3 q5 ~
- // 当绑定元素插入到 DOM 中。- @% @- h: k2 w9 X7 V0 @
- inserted: function (el) {& V8 j$ M( S$ D: v! j& f
- // 聚焦元素
; l- h7 I2 S) `& ]% p. Q - el.focus()
5 M* W8 f% S7 n1 g+ c - }
) i6 l. P$ v" v3 B+ n - })
0 B E2 w- ]" | - // 创建根实例3 U ]$ U9 t2 t4 m; u) \# ?
- new Vue({
; n! `+ [) K" Q& j6 ^0 t" Z - el: '#app'- }; ~4 w" y' H6 U$ Y6 g& L
- })5 h7 m& T! Q1 a8 _: b I3 O3 I
- </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例
1 r; [5 ]0 s% |2 z3 I8 a
" z' K ^8 e6 G) Q4 @4 ] C- <div id="app">
& o+ n. z: t$ f! L- y - <p>页面载入时,input 元素自动获取焦点:</p>8 `6 }1 ]8 `6 m# p# q7 e
- <input v-focus>
2 ?% y+ L z0 X: ~8 Y+ z - </div>
: k: n" X" U T0 q8 v - 4 K) T8 `- i* P! Q( m- }* F J( m
- <script>) i$ S. K5 u C& _/ A
- // 创建根实例
+ L t9 t; C% N1 e, U4 a7 J - new Vue({
6 [6 Q" t* k- Z8 ` - el: '#app',: W( a* a( d) K) ?# x5 T
- directives: {
8 n( [* x- Y( ^. T - // 注册一个局部的自定义指令 v-focus8 Y' b, y! a0 w" f8 W
- focus: {/ i3 l+ H6 |% J' o& e( b) W4 n
- // 指令的定义
; b4 ~/ a! G! ~; E - inserted: function (el) {9 i8 M- z$ [0 ~
- // 聚焦元素
; L& r M& ^3 z" F - el.focus()
% ^4 q; Z0 w' Z; s% V8 H, s0 K - }
: F0 b* V( n6 ^& d! M7 r - }
0 @' g/ D: g* a( }- b# m W* y - }
2 V) @# Q7 L- p - })
2 a/ N, p/ r, R! _ - </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。
! U0 h5 f( t: N7 j% `; Q2 h 钩子函数参数钩子函数的参数有: - 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 }。6 ?4 D# r3 c8 l* @# t# V- F9 }
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。. v5 _# z5 Y& |3 Z+ ^
以下实例演示了这些参数的使用: 实例
4 s% @% J* e; s8 m; d4 v, _. _6 x& P' `
- <div id="app" v-runoob:hello.a.b="message">" e0 s( [; w% ]8 Q% C
- </div>
0 `1 E* a+ c/ y j9 K( [* i; [ -
d& s8 [& ]' _0 h5 S - <script>. ~6 m6 [. a1 V F
- Vue.directive('runoob', {$ G( Z' U1 d( v6 S
- bind: function (el, binding, vnode) {
+ p" w; s0 X2 n ] - var s = JSON.stringify
# D" f4 i+ l. W6 a" @5 c# _ - el.innerHTML = y- i: y, ^$ u# t; ^8 r( x
- 'name: ' + s(binding.name) + '<br>' +
$ n+ s2 i0 o+ J - 'value: ' + s(binding.value) + '<br>' +( S+ R m1 R9 x) z2 T4 B! \
- 'expression: ' + s(binding.expression) + '<br>' +
! ~% r5 D: ]( }2 W. A - 'argument: ' + s(binding.arg) + '<br>' +
* n" v0 f6 k0 g" I+ r - 'modifiers: ' + s(binding.modifiers) + '<br>' +
. K. w' ]. h6 d - 'vnode keys: ' + Object.keys(vnode).join(', ')/ b$ n- I2 T0 s8 O) J
- }/ {' Q# k1 v; i" F# V) B* @! m
- })7 |* [0 d2 F+ C: p4 v3 ~5 R) ^1 d( Q U
- new Vue({# H& z* n/ j! B6 j" `) X. p
- el: '#app',
. q2 ]/ U: A2 {% s7 Y - data: {
) q9 E# S ?& U5 R# ^, \ - message: '菜鸟教程!'* W8 {4 t3 G: }: _) c- C
- }
, l: K: @( s4 K: |" N - })9 d* m$ r, S/ @9 {) Q8 B* @
- </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:
5 s3 l4 D; N7 o) s4 C- Vue.directive('runoob', function (el, binding) {
# b0 N3 l' c* J t. \$ @ - // 设置指令的背景颜色
9 z" W+ h: L s$ [1 M7 N - el.style.backgroundColor = binding.value.color
5 U7 c% \) l! n' j3 z - })
复制代码 9 U/ J: b, X$ w; T9 J. O
[ C- F4 c% c( G% k9 J
指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例* x- O$ ]- u8 v8 |0 ~$ l
6 `% E) y0 C T9 a
- <div id="app">
; g: H; I$ V; c: p# `" V! f R1 u! b - <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>$ i# p5 |& u# V
- </div>' B1 g, l6 A) T$ t* D& J1 q
-
' H7 X" U2 @# h0 U- \7 H - <script>
/ g" j3 v3 z w/ ^7 W* f5 w. v - Vue.directive('runoob', function (el, binding) {
: U8 X% n* v; D6 r - // 简写方式设置文本及背景颜色
q: d, u9 r1 p3 S - el.innerHTML = binding.value.text. E8 `% S M5 ?5 J! E1 b% ^/ M
- el.style.backgroundColor = binding.value.color
o) T- u* w2 _4 t) ]( P" F - }). u# U/ g* S" Z9 f' L
- new Vue({/ V* k6 a! J/ b% M6 Y0 e
- el: '#app'6 }' \% V6 v [
- })* p2 w8 R& G M; v
- </script>
复制代码
! x- `( _6 G5 H$ m, `+ \/ @( U! G% c( p W! C& G
5 u* |& n) e2 c4 c- S) _; h e+ {/ B |