) R. q( x+ B, v7 u' Q6 q. |, l
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例, r& K+ x% V+ |2 h- L4 Z7 [
3 N0 ?2 ?+ I: s. B- _- _: [- <div id="app">3 S- \3 l. J- ?' i, \: s( s6 I
- <p>页面载入时,input 元素自动获取焦点:</p>
7 K2 c( o) `6 b7 p9 w - <input v-focus>
" I" m, H1 d2 F& H - </div>- Y/ w$ ` j" t8 N) d$ c
- * M0 l6 g" B3 G$ l U& r
- <script>/ R( h! S- B/ X6 y7 v
- // 注册一个全局自定义指令 v-focus
1 B. f$ z1 a6 S, a9 |1 n2 |* b - Vue.directive('focus', {$ n# [% \+ Q; L% x
- // 当绑定元素插入到 DOM 中。
0 {: A$ E2 B5 |- b+ t - inserted: function (el) {
4 h3 a$ i1 c' q; j. s: P( l - // 聚焦元素
! ]/ r* \9 w; w d2 f& T - el.focus()' x. Z/ L% n! Z3 \% U; `' M
- }( ~" R* _' I0 Z+ T& ^6 F$ _3 z Y
- })
Y. N; I! V# f6 V" W% H - // 创建根实例7 ?: r) L9 Z8 }5 g2 K
- new Vue({8 X) Y# e5 V2 {5 z
- el: '#app'4 Q# l; c8 D" t+ j2 ~, p
- })
( k5 @3 ~5 ^: t) z2 V - </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例
3 _( X9 L" w( w- t" A' w* ^9 i# @7 R1 P( u) r$ l3 x
- <div id="app">
) f& a% u: w8 Q9 P/ x- z' t - <p>页面载入时,input 元素自动获取焦点:</p>0 d3 x% o8 m# K
- <input v-focus>. ?- Y% H F+ G/ J) J
- </div>! p+ D/ E, ?3 g( c8 K2 X
- 3 M$ g" c6 t5 V( f" f' E
- <script>3 ^# w" ]/ O6 C; S! t4 X M
- // 创建根实例
+ M! l" q' q! E* R - new Vue({
" { U G( }$ x0 ^ - el: '#app',
9 w" W3 G8 n, a; I3 c) k2 u - directives: {$ m/ M* [! p4 d4 e
- // 注册一个局部的自定义指令 v-focus. B6 @" L1 i f9 a& z8 ]
- focus: {
`- G R1 C9 Y! I4 z - // 指令的定义
4 s# v& E4 ?5 C2 m. a& R# n. { - inserted: function (el) { R/ L! {9 K# k3 ~) y4 V6 G! c2 B
- // 聚焦元素& t- W9 W1 M8 N) q
- el.focus()
$ Z& y5 v9 W; T: r4 m - }
1 H5 V N/ n5 t+ f* ` - }+ F8 z+ J0 {8 C* r* `/ `
- }" X3 r& _! k: j7 ^+ {4 o
- })
* y- n7 s) g/ U. U: S/ [. k2 `2 { - </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。 7 J8 q" x" R8 }' k
钩子函数参数钩子函数的参数有: - 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 }。. P. J' ]$ A: L/ m4 i4 y
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。& m/ ^: T, j! p8 H" @$ `- D% B6 V
以下实例演示了这些参数的使用: 实例
( t( V, j9 |$ P/ J4 N0 o( U9 a
$ H2 ]1 m' w. R$ ~& D/ B" [! C4 J- <div id="app" v-runoob:hello.a.b="message">
_% q/ l* o6 Y - </div>9 |# R1 y; o- i1 V# r) \: G
-
! q9 s& f8 S9 f4 V9 M& Q - <script>
# f, X0 W. z& K: P - Vue.directive('runoob', {
: I' m/ b5 ?! t1 j+ w# F9 U( R - bind: function (el, binding, vnode) {
0 c3 z+ k0 A/ N! s - var s = JSON.stringify
% R9 W: A1 c" {1 F - el.innerHTML =
" O* Y" d) Y5 {: | - 'name: ' + s(binding.name) + '<br>' +
5 J1 O' P; q3 p% D - 'value: ' + s(binding.value) + '<br>' +
# t, W5 z `3 X - 'expression: ' + s(binding.expression) + '<br>' +
5 O" m- o: P; z& D - 'argument: ' + s(binding.arg) + '<br>' +
8 L1 o c2 B+ M0 W: F, | - 'modifiers: ' + s(binding.modifiers) + '<br>' +
6 Y4 a9 R# C" ~+ D! \- i - 'vnode keys: ' + Object.keys(vnode).join(', ')
9 y- T- {: P8 l& r; Y& D - }
5 y4 D' J: {7 [( w2 L - }) b+ j. A4 a& s1 ?6 w8 b6 i. f
- new Vue({
t1 T1 [9 ?/ a( x$ j - el: '#app',
+ o6 I2 X0 ]9 [3 }8 m - data: {
3 r# ?" l/ m* k4 z8 n - message: '菜鸟教程!'
' U2 {, F7 S# {' W" E - }) f$ Z. q! L. b8 M9 ]
- })
I) j! }. o, Q& |) N( } - </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:, u' {! t. u6 v1 V6 [; y
- Vue.directive('runoob', function (el, binding) {1 @7 P+ }1 q0 E) w
- // 设置指令的背景颜色
, A% k% Y) o* a5 }6 w/ ]5 V - el.style.backgroundColor = binding.value.color3 p( ?; `' }" \
- })
复制代码 * D) e& I* T% j, u- y# L/ V
8 a$ ^# }+ c. T) d; l4 ^& Y指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例
7 j! L; \% f6 h0 f+ h
c4 T) I4 l1 T1 S7 q- <div id="app">4 \* j- d+ }# l' d& X* \ H Y
- <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
$ I6 A- l* D: B9 Q4 w4 \1 L - </div>
* u* w; A. y" V% Q8 }: h -
m+ \4 p9 s/ U9 B" t3 l+ N* J - <script>
1 q: B) u( D/ }% n - Vue.directive('runoob', function (el, binding) {! G* ~: B( c4 B
- // 简写方式设置文本及背景颜色3 y; ^# k, ~" X3 V2 m
- el.innerHTML = binding.value.text
, ^4 i7 V$ y% J- V) I' j - el.style.backgroundColor = binding.value.color
7 x. q3 M* Q. ?" U8 C( B' L! V0 T/ \ - })
% s8 ~2 M- {( x: J# p1 E; J - new Vue({, ?& {5 H! { S7 i0 \# |
- el: '#app'6 f. n; j+ N$ H1 b* p! N
- })/ Z5 j9 z) o7 Z i6 ?
- </script>
复制代码
0 G5 k: v8 w+ X) b- j
- Z, m( V3 ]7 F; _% P
# T0 R( m/ j4 f) Y' H |