4 J+ I+ R n7 R0 e6 h: z4 {+ b
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例% f+ f5 v7 I6 |+ o: Z
1 d- n2 S# b: \! ?, V& ^# I- <div id="app">0 l$ w, u. F( v, c
- <p>页面载入时,input 元素自动获取焦点:</p>
1 j2 a0 M& _. n+ n - <input v-focus>
8 H* j% [& D* Z+ y0 U9 ~ - </div>& @2 r& V# [4 ~- X/ x. b# s1 R
-
6 y& r- q3 j7 x m, s8 L, f, q - <script>6 O: `7 f6 { _4 I4 j/ B
- // 注册一个全局自定义指令 v-focus
- P) ^2 v0 |5 H! L7 A; U9 W- m - Vue.directive('focus', {
/ ~1 A# q1 ~' x# j4 H9 B. } - // 当绑定元素插入到 DOM 中。
7 N$ }- l% c: [: p - inserted: function (el) {
% u) u6 J8 ^/ _2 k% \5 Z - // 聚焦元素# Z' o+ z9 v+ F: b/ D
- el.focus()4 g0 K. A' H/ ^1 j5 B8 n
- }( v, M$ X" G: p/ b% {5 y1 T
- })
% ~ b q8 o$ C% T7 ]9 l - // 创建根实例
" t, g9 J0 s$ l; q$ C3 k2 V% q - new Vue({
: R% s- f: K) l - el: '#app'
W4 E! f' H5 k- _+ G0 {9 K$ d) ^ - })
2 I1 E8 Z" n0 T$ t+ g - </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例7 [- o" @( H o, B
! I3 p/ ^! y! V- <div id="app">7 S( G9 o& B: ?& a
- <p>页面载入时,input 元素自动获取焦点:</p>4 _" z; S R3 x* s j: Q4 u
- <input v-focus>$ P: V5 u2 i% T( M" O# d9 B2 ]& {
- </div>; ?7 `0 w' S, B- k- H
-
5 B4 E) T" ~# D - <script>
1 C; K5 ?6 {- m8 t7 \6 v - // 创建根实例; K# W& {) N) d8 Z* |, A
- new Vue({
9 d% }* k/ q0 { - el: '#app',7 @) P& h N- C; e1 H
- directives: {
& r; {( X, ~8 i# z" k* f* h - // 注册一个局部的自定义指令 v-focus
$ s2 x; g3 h& M3 K. ? - focus: {2 w' D& A$ Z$ ]( ~3 c% V
- // 指令的定义
8 z8 P2 n* F6 {( b) R - inserted: function (el) {2 p/ W8 q2 X7 z
- // 聚焦元素
1 b7 i' I9 q5 W9 f/ Q, e' G3 K7 a - el.focus()1 `3 T4 ~, w+ B
- }5 L4 c4 ~4 j: V i9 D
- }
8 Q* }0 T ^3 f - }
# I) ^) N- I7 M$ w- s - })& I( R+ u8 l: @; u$ r
- </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。
2 W# Z7 n3 Y5 U( m. S0 b 钩子函数参数钩子函数的参数有: - 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 }。! p3 a2 E+ `% O% ?* g: x
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。( I# G# o8 ~( ]2 Q& g4 W
以下实例演示了这些参数的使用: 实例: p) X9 F. C& K* J$ e
, A2 l# E3 g' v
- <div id="app" v-runoob:hello.a.b="message">
& i' t: p/ y$ |! j% q& E$ B - </div> h: s# A6 f1 o! a) p* N
-
4 R$ R) Z7 m4 M* K9 L' g* n: W - <script>( j- [) s/ M* G4 @
- Vue.directive('runoob', {+ U$ Y0 B a i7 [! O! [" l
- bind: function (el, binding, vnode) {
. r2 g1 h+ f/ v: X, N1 G* A - var s = JSON.stringify7 O' {6 X2 G' f2 ^
- el.innerHTML = F/ q: _ Y" q' e8 f) \: {- l' [
- 'name: ' + s(binding.name) + '<br>' +
$ ]. j9 e. Q- m2 M% ^ - 'value: ' + s(binding.value) + '<br>' +" |$ F- G1 d. y, a! V1 D) ?, u
- 'expression: ' + s(binding.expression) + '<br>' +
/ h$ Q# V/ n1 t, L1 B& u. T# \ E5 P. y3 U - 'argument: ' + s(binding.arg) + '<br>' +% t; B" {5 \2 f) V% p
- 'modifiers: ' + s(binding.modifiers) + '<br>' +
+ s( h' x$ k, X a$ m4 D - 'vnode keys: ' + Object.keys(vnode).join(', ')) Q" F* l4 x; {! g& m0 O% S0 q0 e
- }
: z! z/ K3 h5 T8 O- ?1 O; i+ c - })
' N6 e$ K n0 q. \& u: N - new Vue({
( b! |) c e" f! x1 w8 b. G- W8 h - el: '#app',1 Z# r" u/ v6 R# a* M
- data: {5 T9 [$ A3 N! ?' H/ o$ _9 a
- message: '菜鸟教程!'7 j8 j; R! c+ c- r1 t5 q
- }
" U* u2 c) u1 F" E5 Y - })
; N$ R; ]- Y. S! Y8 z( S8 _% X$ F - </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:
1 S% |2 Y. I6 I3 z- Vue.directive('runoob', function (el, binding) {3 p5 }$ k% Q' e' }; j
- // 设置指令的背景颜色, @; I9 ?3 c0 P
- el.style.backgroundColor = binding.value.color& y# U5 {5 Z9 R1 ^2 T
- })
复制代码 9 T, v- O* c5 D9 y! S& F
t: l/ [4 e2 w1 l* y3 S指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例 H" N y; e5 e7 o' K+ w. |' ^
6 f: d9 ^( ? C* Z; @
- <div id="app"> |. F6 b$ C4 [
- <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
$ ?$ w! f: L( \) X; K5 }; I2 R; p9 i, e/ b - </div>
7 |# I# O) O8 Q ^3 N -
" ^: C4 T. W% B H5 m* B/ e - <script>
g k6 n$ p6 [) M0 M$ ^ - Vue.directive('runoob', function (el, binding) {
8 |4 K# |% v& ^2 C- q - // 简写方式设置文本及背景颜色
1 \1 \- J0 p" p5 [7 [7 k6 a/ [ - el.innerHTML = binding.value.text; b9 u0 D I" e4 ^
- el.style.backgroundColor = binding.value.color
( ^% ?/ Z* U# C; f0 N - })9 D$ ~, A2 e$ S- z! X$ _8 S4 u$ ]
- new Vue({
/ C9 E$ P% e4 p8 L - el: '#app'
/ G/ U" S d# }: H+ y5 \8 W" X - })
0 [& C9 t e" z4 c - </script>
复制代码
6 A" [7 y$ W' K5 c8 Q2 X+ W5 i
! M3 I! l) ~6 o* l- N/ ]* _, Y' e! p4 X- k5 h. Q# O' @- b
|