5 |; o6 ]: x8 q) m. U除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例
; U* m, z9 }5 u- i( F: I s* g+ |/ l$ Q: s
- <div id="app">
# x0 v/ n; E# s- |7 |; r - <p>页面载入时,input 元素自动获取焦点:</p>
- F' J. {5 m0 J7 v - <input v-focus>* Y' J- d2 _! y
- </div>
/ x9 k% k% ?4 A* q5 ~ - * q9 x$ Y r2 M1 F/ \* z# D" m6 I! ] y
- <script>
9 h6 C9 m. q' y0 G' O - // 注册一个全局自定义指令 v-focus6 b' v4 @& C I
- Vue.directive('focus', {1 @1 P4 M) q" m/ N! J' O' u) }- L
- // 当绑定元素插入到 DOM 中。
U- }- ?; S& c - inserted: function (el) {6 m5 T1 M$ `8 P' _0 ]* t7 A" Y
- // 聚焦元素' M4 g- U$ o' z7 E( D
- el.focus()
0 F. V# A+ I* L( l: [ - }
2 l( v9 n* E# f5 o J! c1 o - })
j1 r9 Y( O& i* e" c: M: X - // 创建根实例
, x7 J% _6 u, q) A& M% G5 Z - new Vue({+ @5 K7 ~1 N& {2 k; \
- el: '#app'5 G0 f, F1 S- U* h- S, T
- })
! u U! {! B* p! T& ]) ^7 ? - </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例( F3 G1 r+ T! X) u/ W; w- d
" i4 z% z5 Z( u& e c5 S- <div id="app">
* g6 X% `2 I# l9 n( l3 W+ r2 @ - <p>页面载入时,input 元素自动获取焦点:</p>
" M3 S2 V' \. F - <input v-focus>
8 d8 [9 J6 I! c5 y" d - </div>- _9 @" I a! I4 u( A; a/ l
-
6 }2 [' A, Q+ q( B b8 C1 { - <script>) S! i$ a- E6 `0 H& l8 e
- // 创建根实例
$ f2 ?7 ]$ S1 {( T - new Vue({
4 m5 p& N( b" U6 m# c! d - el: '#app', I" P. ~7 P* q% R+ Y4 }4 i" a( V
- directives: {- i1 G. p3 } [ G4 V: `- z
- // 注册一个局部的自定义指令 v-focus
* l1 C# [& v* |+ i - focus: {
% J2 F+ `' I0 y" | - // 指令的定义$ f1 c3 [6 [# H4 Y; w
- inserted: function (el) {
0 J l- |( L2 o, u9 D0 G - // 聚焦元素# |1 P% K; t# J3 N
- el.focus()
9 A% O) k& {/ O/ e5 m - }1 n3 C& T5 E2 @% _5 H1 H
- }
: y! `1 X7 e( J+ W0 e& C7 t - }% L: Z6 z, A' i9 l3 P$ e# o
- }), b8 Q4 `0 {4 _! n
- </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。 % P: K9 h, D5 s& E8 U7 i: u
钩子函数参数钩子函数的参数有: - 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 }。' f0 `- u( s! k" H4 |
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。6 ] `; X) X/ x
以下实例演示了这些参数的使用: 实例
1 z- {: b2 M9 _8 s2 a2 l2 l8 y1 s5 l7 w" P% V7 v
- <div id="app" v-runoob:hello.a.b="message">( T# S8 ^( ^5 F$ J1 _: j/ m3 J
- </div>
6 p% ~/ H) e) d6 Z8 m -
# t* u" @$ N( c$ k/ z4 x5 [ - <script>
0 O3 ?+ w" x6 I - Vue.directive('runoob', {
, `5 F* t( z9 ^2 J E2 ]3 c) i - bind: function (el, binding, vnode) {
0 ^& [0 t) g' L% s* D - var s = JSON.stringify
! T; K' N& v, E+ S+ }, b$ E - el.innerHTML =9 K% d7 P2 n" o% z) E0 o: m
- 'name: ' + s(binding.name) + '<br>' +
& S( G' r5 g( [7 Q - 'value: ' + s(binding.value) + '<br>' +, r) n N' X1 `
- 'expression: ' + s(binding.expression) + '<br>' +" K; F6 }. Q u3 Y7 q' Y# q) `" ]
- 'argument: ' + s(binding.arg) + '<br>' +5 |" H! a s6 p s9 }6 z) p
- 'modifiers: ' + s(binding.modifiers) + '<br>' +
! Y: s2 k) f" ]' G' \ - 'vnode keys: ' + Object.keys(vnode).join(', ')
& o1 P! ^% G( W7 ]- r7 d0 M, ?+ W- \/ b - }, Z9 u* G% \' {+ j. s
- })
+ }% q- {+ a0 ?) |$ O& \3 } - new Vue({
0 I% T9 x; }; o' |9 ~* Z ~1 n - el: '#app',
9 \/ {% m3 I* G1 k2 k4 _ - data: {' N0 G, M4 @- I4 k. ~2 a E. U
- message: '菜鸟教程!'
/ N! q Y2 L# u" |, ^) ]: _ - }: A0 K+ B. e0 n3 b) E/ N
- }). j) Y3 f3 W3 Q+ Q3 H& G& Q" o5 Y
- </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:1 C f8 h3 s' \/ j! U
- Vue.directive('runoob', function (el, binding) {) e' `! g9 L' k8 U
- // 设置指令的背景颜色* Q4 V- z5 l6 z7 Y
- el.style.backgroundColor = binding.value.color
, f1 V- ^0 d0 R ]; I% {! `2 s6 r - })
复制代码 ' L2 s& c5 Q) h6 t" U. k: ~4 |5 D
! @; T" n. I: f8 j" \ n
指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例
$ x2 u3 J; g, B0 P5 e9 g! Z' g6 c' b. E$ q8 d8 L: ]- ^& [
- <div id="app">' z( O6 E" d, P' b1 d$ ~0 h
- <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
6 ~& y7 r, |9 {; A [) V" ?" P) U/ T - </div>
9 X: z( a$ N' n6 F% l3 N ~ -
+ C0 M6 h3 a$ K# ` - <script>
: J+ m- J3 k# z i - Vue.directive('runoob', function (el, binding) {
- }- B) R( _/ a0 o# f0 L" U: J - // 简写方式设置文本及背景颜色
$ f4 |) m0 _3 T, e- M+ W - el.innerHTML = binding.value.text) |5 [6 K( P/ G2 }; i; a, p
- el.style.backgroundColor = binding.value.color
! \, ~( M$ C( F4 } - })
2 N* D% T( Z1 A - new Vue({
# Z0 o7 y5 U# m: D3 v/ {2 E - el: '#app'9 j) a# q m/ ~& Q: C
- })1 r9 |% |( c$ S) W
- </script>
复制代码 3 B9 K0 ~8 g2 d( F, l: k3 x
% L e4 C: \) P
& Z6 b4 m9 C8 J3 ]4 ?4 C |