) a J! e5 I6 `. W除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例+ {; z# h% b: Q3 f! J
$ S" A& o1 x% c2 O( F
- <div id="app">! k2 u4 `+ a3 e; A4 d
- <p>页面载入时,input 元素自动获取焦点:</p>( }3 O7 I' y, u1 }2 V
- <input v-focus>
' [0 ]0 y" S+ u: k. o - </div>) Z6 {, r2 ~" @- j# U* ~
-
7 k1 [5 A1 ~ e- X6 |: R - <script>
# k3 @ w' b' C9 T! H - // 注册一个全局自定义指令 v-focus
, j7 s& T9 g( @1 i8 U5 |8 ^* F - Vue.directive('focus', {4 s, y$ J0 E/ D, V+ V8 m' ~
- // 当绑定元素插入到 DOM 中。2 z p% k4 d7 }4 s
- inserted: function (el) {
9 H8 b% D7 B3 k9 P - // 聚焦元素
) O$ I1 e' l1 ~8 g0 i - el.focus()
# \# r8 B i% R( w. C) Q$ b, }0 e - }
/ s7 w! s1 b! V& H" t - })6 t$ k. V5 b# @, w, C e( K6 d0 T
- // 创建根实例
4 |7 `5 h. b5 v - new Vue({
7 s# m2 V# }5 C/ F3 V - el: '#app'
" I4 \; L T) \& ]6 ` - })
- K: M+ O! p; x# ]/ M - </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例
" F" a6 P6 F3 `& e# m/ X8 F8 {; K1 ~" W* ]- d. M5 G
- <div id="app">8 z: Z; h+ S0 y' }9 {1 H" x
- <p>页面载入时,input 元素自动获取焦点:</p>2 ? v- Q f/ c/ |, Y9 K+ v
- <input v-focus>9 O/ E& h3 f% J
- </div>% v* z( a$ T: A) t0 M+ [
-
3 a0 L& {& t. K* c - <script>
6 \6 M4 K. H9 E6 q$ F( Y' c - // 创建根实例% ]4 G) \) N$ G0 x( S7 t) b
- new Vue({5 I) [4 i7 p$ j" ~5 f$ i$ i
- el: '#app',
; _! W/ |0 R% N5 j- g - directives: {5 V3 r" w# D% W" o. d) G- @
- // 注册一个局部的自定义指令 v-focus
: S2 {9 w$ w1 r: k' z9 z @ - focus: {4 w+ p# o }5 P& Y& D- ^
- // 指令的定义2 D: k u& @0 G+ t4 z
- inserted: function (el) {
6 T* \% ]0 Q8 Q+ J1 X( A* f% W - // 聚焦元素$ L x9 f( ~+ ?. y0 C
- el.focus()
8 t/ u3 \! g4 V0 t! { - }
0 O/ |5 T1 G* ~5 k7 H" }: Z - }0 X" V+ j# Z6 K6 J
- }: }) F( B6 S0 r2 e
- })
3 M8 S. v {. F& a - </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。
2 s; _- ?0 F/ [( { 钩子函数参数钩子函数的参数有: - 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 }。* e5 m* F I8 E6 T" m
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
. I+ ]0 l( L7 ?9 n
以下实例演示了这些参数的使用: 实例
! k$ A% l+ z2 k: g- E$ S0 f
% c& T' @, K6 B! r- <div id="app" v-runoob:hello.a.b="message">& Z1 L- [8 o% J' g" R. z
- </div>& i8 q& y" n' t2 a; A) j! z1 [0 O
-
5 ?; z+ Y& M) V - <script>
* `; g5 @+ W# G6 @# | L3 ?1 Z* L - Vue.directive('runoob', {
7 v" Z9 r4 E: v - bind: function (el, binding, vnode) {
Q4 R# S/ b$ K' h- T E! O z# I( X - var s = JSON.stringify
3 m. j2 ?1 v9 F, T: H% p - el.innerHTML =
. f# s; x+ ]3 | - 'name: ' + s(binding.name) + '<br>' +
. |! n7 ~. f7 t- Z7 F0 u; v - 'value: ' + s(binding.value) + '<br>' +
9 w7 E/ T* h e+ ^! b! E - 'expression: ' + s(binding.expression) + '<br>' ++ G- O( \* G: ]5 B
- 'argument: ' + s(binding.arg) + '<br>' +
' s- @/ W6 ]3 P1 l9 Q - 'modifiers: ' + s(binding.modifiers) + '<br>' +
3 s1 j) P% b1 }% n - 'vnode keys: ' + Object.keys(vnode).join(', '), x1 n0 T. k, F
- }
2 m3 t L4 Z# J7 q! }9 v - })
7 r( ?$ ~4 \( o" x# e2 k - new Vue({( {# S1 C/ A) K3 U
- el: '#app',
7 R Z! W7 m: [ B - data: {) G* u' x z- o0 t: k6 u
- message: '菜鸟教程!'
/ S/ z0 J) U9 l) _7 E3 | - }7 L9 j# u. l L( ~ Q* E5 T
- })0 e5 a4 W2 @7 _0 `# N# H3 l
- </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:
) q; s. j" a! w5 S, i- Vue.directive('runoob', function (el, binding) {8 E2 N4 q/ q) b6 o+ S3 R2 C
- // 设置指令的背景颜色7 C r2 n7 H) x/ {/ n7 ?9 P
- el.style.backgroundColor = binding.value.color) @7 O2 h$ ^9 m. z" ?( \1 [5 K
- })
复制代码 7 j5 N+ f+ M+ h
1 o6 o) |+ o: [6 X* a指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例4 b6 U0 i# L9 J. n% {2 M. U
l3 i+ Q9 u$ f. r
- <div id="app">
6 I1 [( g3 F \6 L* B4 E - <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>/ W2 v/ D# L5 _3 w N
- </div>* z3 ^$ S. }& F# G. z( Q
-
7 q5 b( d, [! b G - <script>! X9 x* L4 o D2 W
- Vue.directive('runoob', function (el, binding) {
- [, _' T& U0 L7 h5 ~: ]. G - // 简写方式设置文本及背景颜色
. m8 e G) s% [/ o - el.innerHTML = binding.value.text
2 ?2 L$ [( J" D$ H$ K1 l - el.style.backgroundColor = binding.value.color+ |: {! t r( f
- })
& p+ w7 V& Q! @. h$ c - new Vue({
0 t/ ?2 A" z* @) ^$ ?" A5 r - el: '#app'
' L) [* V; l e - })
3 G& N$ O# q2 @7 _ - </script>
复制代码 , O1 L3 V; E, O m, V. }: ^
1 O1 f7 g1 P( g' _
( b1 V2 ~9 l, M! _+ B0 B* } |