8 [2 A; _+ q% z9 s除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例
* W" [7 t$ k: O0 G+ J$ b- j' |6 p' C X- l. b+ k' o& b# C5 g
- <div id="app">
: o* F8 e/ u9 H! a8 d# S - <p>页面载入时,input 元素自动获取焦点:</p>! z# r0 G! I9 N2 U9 |% D u' s
- <input v-focus>: j7 F4 B* V* q
- </div>
. h& y0 p |8 u j: ?2 S - 7 [0 W5 e+ q, k3 I9 [0 [# \
- <script>
8 B9 T A( e5 m+ {) j - // 注册一个全局自定义指令 v-focus
9 M9 P& L Z# L* ]! c7 m - Vue.directive('focus', {
' H8 F" P- L" H5 `& ^$ [: d - // 当绑定元素插入到 DOM 中。0 X9 ?3 \4 H' h' Z
- inserted: function (el) {: s) q# r- L' s0 ]5 N( i
- // 聚焦元素# Y4 o5 F x, V/ N# Y$ n
- el.focus()
- _4 i2 ]3 S& R+ E `1 E - }& ?1 e/ s! M3 M% Z. X
- })
" i3 v' Y, a$ U ~6 {8 r7 ~ - // 创建根实例
, J$ T! }6 }: l d$ q - new Vue({2 O% `/ J7 H+ b2 f/ p o0 q
- el: '#app'! h1 L) v- ~4 G" P9 z' x
- })8 B! g4 k7 l. h9 c5 g7 {1 E
- </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例
# o2 J v* G" u1 g+ N! }% r
1 ]# t2 {: H' c. M* S: ?6 H( V/ d- <div id="app">4 j( P: E) m% u3 D+ e. b
- <p>页面载入时,input 元素自动获取焦点:</p>
) ?! ^ m& v5 h - <input v-focus>8 Q$ X% s- v" x3 a4 B
- </div>
( x# D9 V3 o& y! x: i - / b5 |3 p; Y- O, f
- <script>
" V1 z" L& J/ y) t6 U$ d - // 创建根实例! ~& s& f2 U. A, Y5 C; u
- new Vue({& {* m, D! m; b9 `
- el: '#app',0 ^& G, A/ [- Y
- directives: {
# X6 N9 I; `+ a2 l2 C n - // 注册一个局部的自定义指令 v-focus
9 L* j0 g7 _- U5 \- {. s% } - focus: {, q! T# g5 y" M$ C" Y
- // 指令的定义8 f+ r( h; T [+ I, {
- inserted: function (el) {% [3 }7 ?& E( A
- // 聚焦元素
( s! T- u; c5 h2 m# t - el.focus()
, S- S' x4 [% V! v o! [5 x - }
1 V/ z0 l+ h( M- { - }
* L- Q6 C; O; H* d% { m) O - }5 @ X4 O2 D+ s; \
- }). A4 W/ k2 z8 P, M5 t
- </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。 & [! W( r0 D" i. 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 }。
! \% `! S* t" y8 S$ t4 o
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
! l: D+ _9 r" F! g3 _% r
以下实例演示了这些参数的使用: 实例) w& A* m H- n* |8 D
( x! `9 g6 C& ]8 z8 ^$ ^6 V
- <div id="app" v-runoob:hello.a.b="message">6 h3 {* w7 U2 Z \& z% [2 L
- </div>9 F0 q# m, p8 k; N
- 9 q( w/ W9 s0 S
- <script>
5 ~/ M3 Q" a1 N% A: I - Vue.directive('runoob', {
) v. s( t5 v" k8 V. Y& b" _" m) j5 q: J - bind: function (el, binding, vnode) {% f$ o% c& i- J: [0 l4 j
- var s = JSON.stringify7 e1 m* G4 S; x. R
- el.innerHTML =
! R4 a8 V& N, z( r( e8 c - 'name: ' + s(binding.name) + '<br>' +
' A- W( z" K8 P k$ J( k3 E1 f# R - 'value: ' + s(binding.value) + '<br>' +
9 S' r L( J7 D8 T# d* C4 ^9 _ - 'expression: ' + s(binding.expression) + '<br>' +/ H6 {9 B$ [) R0 i; V+ _
- 'argument: ' + s(binding.arg) + '<br>' +
: j3 m9 S5 i! t' `* c9 n& u - 'modifiers: ' + s(binding.modifiers) + '<br>' +
5 \. x" m2 C* n# @ - 'vnode keys: ' + Object.keys(vnode).join(', ')
4 G. d. ^- w" {+ T5 |0 G+ l - }" d. L* \* `) b' { K* P6 _
- })
: z. ?* U: N' U- r' b @+ K - new Vue({
; f6 H* k2 S6 v# a* r - el: '#app',$ b; K$ M0 y, _# W, b( c1 ~
- data: {
k7 ~5 ]# s8 u2 }3 K1 n# r' _5 @4 Z- ? - message: '菜鸟教程!'3 O! K' N/ [( @, }
- }6 G1 i* A$ V% v! J8 ]
- })
9 L5 S8 V! l/ @ - </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:! }' \. |. ]! @2 @# g
- Vue.directive('runoob', function (el, binding) {
& {( T& L- E( i! P - // 设置指令的背景颜色" `+ f, E+ M: e+ x" c& o
- el.style.backgroundColor = binding.value.color3 l2 m: b. l9 m
- })
复制代码 ( u$ L6 A$ T% p
) M. d& r$ k; u ]- r8 C$ ?
指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例# N# V( {2 a; q# S7 ~
, K, N2 T3 B' a6 K0 Q0 i
- <div id="app">; U- r0 j* U; p" [8 S6 h2 p
- <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
# |4 B2 B+ K# s {5 z: Y - </div>
{ q. x- M( \! v8 D' X - + U) \. s5 j/ h' E
- <script>" ~1 q# q. L u/ M
- Vue.directive('runoob', function (el, binding) {* T. j# F, h6 D# J$ T
- // 简写方式设置文本及背景颜色
2 B& V6 f: P: C1 e* e - el.innerHTML = binding.value.text
4 b6 n# g/ T5 V9 C - el.style.backgroundColor = binding.value.color& A5 c) W# S; [! \$ `* D$ j: P
- })+ d' y1 k: M1 u9 y. P. V4 p. F- K
- new Vue({
1 v' ]# S4 c/ |$ @ - el: '#app'# L) `" G: ]) w( l
- })
6 I4 N" X2 w A0 P* e$ K' q - </script>
复制代码 0 m8 [. d; \9 J6 x" C s
) U5 d: S) z ]& ^- |. A U& r
5 w j, J+ c, Q |