$ ]/ Q9 R) y' _4 f7 u
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例# `9 c# ?) Q( h$ x, `9 N
# Y+ p1 N1 v" @) d( @+ a- <div id="app">
7 H" _$ x4 t% i6 @* |0 k - <p>页面载入时,input 元素自动获取焦点:</p>
8 y5 g1 s5 w) L - <input v-focus>
; s w! i( o3 ]$ c& c9 P; Q - </div>5 t7 O" t" S/ y, {5 }1 f
-
- e: ^+ @7 }' l) q0 Y$ s" Z - <script>4 P. N6 ?4 D6 a" _8 ]. y( {
- // 注册一个全局自定义指令 v-focus
8 e3 b' p* L4 m2 h/ N f& `- d - Vue.directive('focus', {
0 [" O0 x+ U& @, C - // 当绑定元素插入到 DOM 中。
K( G+ G; {. }0 s9 @ - inserted: function (el) {* _, t7 T# x. M) `; f& t0 O) Y
- // 聚焦元素1 \- I1 i$ C3 ]7 @% _" u
- el.focus()4 L M+ k) ^+ i i* R ?- b* K2 b
- }
1 Q: f+ a+ Y u& ?$ S. r3 i* Q6 ?# b9 g - })! y7 _/ z. }- c5 w
- // 创建根实例
- _/ `2 ]8 u1 y! r. J- n5 V B - new Vue({
/ d" M& k8 _+ C - el: '#app'
) s4 k% _0 f, g( u' d - })/ x6 k( O. w: s, F
- </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例7 [8 e! ~" G- d3 t7 ^
$ P/ j6 u" b3 E7 Y+ g" n! q7 z- <div id="app">
$ g9 w6 S) ~# D4 i+ H; R8 Y - <p>页面载入时,input 元素自动获取焦点:</p>$ W% f: h7 z* d6 ^. k
- <input v-focus>
! k8 X5 _" ]+ P1 Y% J - </div>" n [' q! S4 o I
-
$ G5 ^/ V0 O( e! U0 p$ D - <script>/ E4 E( ~) {1 Y9 h$ Z
- // 创建根实例
h* }+ g/ n7 f) I! q8 ?: ?4 a - new Vue({
( A$ V" U* W' v - el: '#app',
) [5 Z- j# [ s! [' Z4 r5 w3 m! b - directives: {; t8 K; a& ~+ e& r/ [
- // 注册一个局部的自定义指令 v-focus j, p4 v5 o8 z$ M) f
- focus: {
4 }' p) u& a3 C - // 指令的定义
- d" z: u8 F% Q2 C5 m - inserted: function (el) {! V+ d) ^" K/ I8 j8 L3 t
- // 聚焦元素+ ?. H! K6 O( `. x0 \/ y
- el.focus()5 C9 c0 ]# B; e( p3 |: ?* H; l
- }
( F8 {! z, m2 _: s- L - }/ E8 ?! U9 B* E
- }
0 L( g& i# x$ R3 [+ v - })9 Q& s- N; \) ]
- </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。 / D9 U9 B' ^5 ?
钩子函数参数钩子函数的参数有: - 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 }。
5 a+ c. i' ^, P
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
+ }. v2 f, [8 @' z# @3 a
以下实例演示了这些参数的使用: 实例
& n2 y, D- [; J( D. U' y* [, F$ o" s0 n4 {% p
- <div id="app" v-runoob:hello.a.b="message">3 u0 p! |: ?$ l4 P+ ?/ n
- </div>
) w. C) R2 j/ q- S+ h) m -
4 c4 a8 J" _! x# a - <script>
5 l. C# b8 o. c ` b. m3 p - Vue.directive('runoob', {
4 A/ d6 {3 c5 @: ]4 x g2 K - bind: function (el, binding, vnode) {: Z5 M5 E0 ?6 f8 g$ ~ R! Q
- var s = JSON.stringify( O5 t" R+ q+ u$ r" L7 X9 e
- el.innerHTML =
2 A* P8 T# F5 V! h$ n; h' A8 m - 'name: ' + s(binding.name) + '<br>' +2 C( ]% i8 G/ ~. U, E
- 'value: ' + s(binding.value) + '<br>' +, N" {/ Y6 P, i, l+ O
- 'expression: ' + s(binding.expression) + '<br>' +, r- K+ H2 U1 {8 m
- 'argument: ' + s(binding.arg) + '<br>' +
& r9 X( b" w# r$ L1 s# i! _4 ? - 'modifiers: ' + s(binding.modifiers) + '<br>' +
) f9 C+ l7 A- v* O# W- R' ~ - 'vnode keys: ' + Object.keys(vnode).join(', ')
/ w7 D1 ]. L' P6 v7 I9 B$ M - }
3 S& l7 x) f9 N" O - })* ~7 Y: E9 }& L' N) P/ e4 _
- new Vue({
1 D' {# m o6 K/ F9 w# J$ S - el: '#app',6 _; G* [; b" C, T9 a3 ~
- data: {% x. k; m2 H* Z4 L- F( I
- message: '菜鸟教程!'" ]4 A/ _3 s% ~3 w! F3 c( c/ S
- }
* N" Z( Z% m4 ^. L& x+ H - })% M! Z, d/ Q2 v% e+ A4 S
- </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:
' v3 G5 _, U/ S- H% T/ Q- Vue.directive('runoob', function (el, binding) {4 B2 p" { k8 @1 W
- // 设置指令的背景颜色
) b5 F6 }& R8 J+ q% y; A* j - el.style.backgroundColor = binding.value.color# c. w6 h+ J( f1 \# S1 {: ?5 }
- })
复制代码 5 Z( B* V. ?- D/ j2 ~' [0 ?
. i+ ]4 f4 G! Z3 N
指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例
5 H# w3 i' _8 H! J# W; S4 N( ^( A$ U" |& W9 G% X$ E# X
- <div id="app">3 z- Q, ]3 K- M2 y6 o
- <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
1 `' H4 E; Z& _& h( b1 v- |$ U+ e0 H - </div>' G2 C7 f6 t9 t0 E
- 7 l t5 g% K+ u1 l3 R! B
- <script>
$ u( `; M: `( N T- @8 ^% I - Vue.directive('runoob', function (el, binding) {# k2 P5 [3 |# }$ K+ ?- n. o
- // 简写方式设置文本及背景颜色
F% L8 N' |8 G3 B9 n6 b7 y) F - el.innerHTML = binding.value.text
& c1 O. U, \5 C ~ - el.style.backgroundColor = binding.value.color
0 q3 y. m( N- O; j - })
- I2 ~4 U3 }/ C4 e7 J/ h2 ~# e - new Vue({( ~$ R5 d4 d- }# L- l
- el: '#app'
" e9 x/ {+ e, ^) d1 e3 d - })
& z' K/ I; N& g) S - </script>
复制代码
. k' \, L4 { W# |# G
- u3 r5 d r+ {2 X5 \
8 a D. l! \3 w! f1 S* U' H |