1 w% O V* `; p除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例
. \7 A: C$ b) S j; @2 V$ ~- q- X/ C5 R" p8 [
- <div id="app">
. [6 p! w4 t% n! u4 r$ `) z - <p>页面载入时,input 元素自动获取焦点:</p>9 M& N: l; z! ^/ D; E2 l6 _
- <input v-focus>1 K7 t8 F+ `/ J7 @0 j7 y, L5 q" H
- </div>
" G6 p+ C* I9 u: _/ J+ F - / F7 L7 B9 l% @4 x- i
- <script>
% r2 k# ?! q8 t# ^ A2 O/ | - // 注册一个全局自定义指令 v-focus% {, P- k9 T1 E. i' C4 ^- [* S1 b" p
- Vue.directive('focus', {" G7 k6 _2 y0 K/ w+ F
- // 当绑定元素插入到 DOM 中。
3 v7 X& W* X8 K& [0 I' t! {0 y - inserted: function (el) {2 d ]) b7 ^1 l
- // 聚焦元素' o* w4 }8 i' m6 ?
- el.focus(). D9 |9 w5 E& ^" J& K, Q
- }
% W1 P# ^" I1 S( v1 _& T3 Z! I& s4 F - })5 \, \" V6 a* X5 ?1 a
- // 创建根实例
1 {0 H" N) j" V - new Vue({" J( S4 s+ `" T) b
- el: '#app'
8 J" V; g- [: _3 i. j0 ` - })! m- e) a* v( o
- </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例8 t- X$ }7 p1 r5 d9 s5 T. @6 c6 w2 O! Q
* h% @: `* [( Y; ~# A5 f
- <div id="app">3 ^* V+ O& y7 q: _" f4 D8 }
- <p>页面载入时,input 元素自动获取焦点:</p>
' t- I: Y% V0 @/ Z- T/ k - <input v-focus>
9 ^ n% H+ R! d3 _3 f - </div>
1 \0 J2 {- r; Z: w x* u* _ - ' P' y' ?% Y- P9 g; s; Q" P* g. r
- <script>
- O2 Z/ J: ~" ?& E1 V! ? - // 创建根实例
7 i$ s1 H6 V* Y% E) U& J( U - new Vue({! W/ J7 C, h& C: M
- el: '#app',% _, F9 d* X$ \3 T- G
- directives: {
- y; j0 p, ?8 A5 \; L2 r, V - // 注册一个局部的自定义指令 v-focus
( C6 r' i0 b9 F" V# F - focus: {
; s9 m+ h4 V/ [" r4 z3 X4 X# { - // 指令的定义
+ y+ j% L z3 U$ k1 t A' ` - inserted: function (el) {2 s/ S+ P, V1 ^; |* @4 _8 W
- // 聚焦元素& a4 n4 x( @0 o
- el.focus()
! W1 j$ R6 S# Z6 f - }0 D# ?. B' [6 l0 ~
- } B0 {- H+ D( }
- }9 W# @. m# A1 M, P
- })
7 K7 ~; |0 C# j, o1 e. T8 F! R/ G3 h - </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。 # b( [, G- A% v4 Q
钩子函数参数钩子函数的参数有: - 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 }。
+ Z- c7 E: [/ Z+ ^3 O" y3 Y- v
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。# V; G; u6 U0 i- F' w" |! ?- N
以下实例演示了这些参数的使用: 实例
7 d' ~5 Y: L- Y! p2 e ^
, q4 t" O4 }( j: T- Z- m3 _- <div id="app" v-runoob:hello.a.b="message">5 d2 `2 O3 Y* m f6 E& c
- </div>5 n* w }+ P3 A3 Q2 D* X, e1 _
- $ s6 `! K/ [$ @# G# U9 [
- <script>
, k3 P# j1 O2 q! K0 J- u( t9 b - Vue.directive('runoob', {
% H1 g- i7 M6 Q- T! f0 J - bind: function (el, binding, vnode) {$ s- l5 R G/ o; g3 |
- var s = JSON.stringify+ K, s H, D. Z" {1 s u- h
- el.innerHTML =
5 O7 f# h7 S) S5 z6 A) J2 B - 'name: ' + s(binding.name) + '<br>' +5 n/ P5 c0 B6 A ^1 `9 J; I
- 'value: ' + s(binding.value) + '<br>' +6 n: T! b F8 r( G
- 'expression: ' + s(binding.expression) + '<br>' +
# i& G8 j4 i. U. o/ R: D - 'argument: ' + s(binding.arg) + '<br>' +: R6 c+ W2 K9 T9 K# u5 H; n& V
- 'modifiers: ' + s(binding.modifiers) + '<br>' +9 i; y. L E+ j$ I8 r
- 'vnode keys: ' + Object.keys(vnode).join(', '): ~$ Z! V+ U9 J4 s8 k
- }1 ?5 q8 N7 g+ m. K/ g8 g4 {
- })" A" n% s# @* u1 q5 {" U
- new Vue({ s* V- j/ L3 ~7 k! @% s
- el: '#app',
! S4 N6 t+ \8 {, w' A( h7 Y - data: {
0 e8 F: E; P8 A/ O/ i4 J% J - message: '菜鸟教程!'# f$ E e: @$ I o. n3 N# x
- }
3 ?& V. A: ~0 H& u* G' P6 o# ` - })
, k5 x6 |5 q5 h - </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:" R9 r2 `8 Y" d+ |( j$ S, ?$ y
- Vue.directive('runoob', function (el, binding) {
9 a6 Z% J4 V$ a/ v/ [) b3 @ - // 设置指令的背景颜色
1 ]6 g/ g+ ?, v6 u6 \ T7 L9 j' X - el.style.backgroundColor = binding.value.color q9 t, A/ V; [0 }( w5 q8 L
- })
复制代码 6 z* ~- v& h, A' z! q8 Z3 Z5 f
3 T$ t- i5 W3 E( ?5 Y) ?
指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例$ b( B |' y) k- c
0 L/ p, N4 y( ^' C. C
- <div id="app">
% H# @! |. Q) D: L/ G2 T4 _ - <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>/ j8 z2 Y! P! D% z( m u* q
- </div>
% a, q5 F* h/ y, t- S1 o -
& r% g1 W4 U2 e; l' H: L - <script>
0 {* L2 m1 Y. C7 V - Vue.directive('runoob', function (el, binding) {
% X: O; ?3 d! O$ i4 Z7 @ - // 简写方式设置文本及背景颜色
$ U& p Q$ }% I9 z5 N - el.innerHTML = binding.value.text
2 I' ]+ i4 {5 k* p6 b - el.style.backgroundColor = binding.value.color
& L0 A* b1 S+ ^: {3 f9 n - })
, s7 \" @( U( d( ? - new Vue({
# t# g5 P- c+ K1 y - el: '#app'
! e e7 K0 S: L% X - })
' ?' }& B/ M' V( {) S \% Z, w - </script>
复制代码 1 b" a p1 [) v! u! j1 @4 Z
0 \5 z# _- L! G& ]3 B4 E7 H( v' b
' ?. v7 e; v0 j0 I! x
|