7 e6 v9 H: m* R' B% V" u$ r
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例
3 r! }1 u* {0 d2 @: T1 P9 z5 X* g" J3 i" M) N
- <div id="app">
( |$ o5 d! S' } - <p>页面载入时,input 元素自动获取焦点:</p>, P8 E9 T8 W; ]. q) n+ g0 M
- <input v-focus>$ |4 j0 g, j- U) c4 y
- </div>
6 T4 V( P# |& J -
6 M; R( ^8 N7 o2 g - <script>0 {9 l# }% Z/ D# d# ?4 c
- // 注册一个全局自定义指令 v-focus; e3 Z# s* V8 V* B' z T3 u
- Vue.directive('focus', {) E2 ^) v4 L/ m& p; J
- // 当绑定元素插入到 DOM 中。" P9 @! s* `6 M; t7 M" R# q
- inserted: function (el) {6 W, [' {6 y+ Y- z0 c+ f& z
- // 聚焦元素) V, q( u$ s. b- }4 l5 {
- el.focus()$ l, {4 n5 D4 O, G2 I
- }
: D. Z) y L' \+ B - })6 B5 u8 d% L% s- ^, w" @+ ]% ^
- // 创建根实例- v& D6 R1 T( S4 `7 `
- new Vue({
2 ^2 Y0 T# U, W# Z3 x9 k - el: '#app'
* N- O) N5 c. b/ K+ ]* B - })3 s) u/ f1 L+ T# q$ D2 d6 L
- </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例$ F+ |4 k0 T; }' m
0 x8 p: }& d6 s# H! _( Z8 T" c" K- <div id="app">; L7 r) H! K: J1 e' _
- <p>页面载入时,input 元素自动获取焦点:</p>
0 M8 i" Z( ? ^- B! q. d S8 } - <input v-focus>2 l& m c+ [7 e* [8 I2 j6 d$ m
- </div>& e4 J" z2 d, `; m, X
- 9 a" d$ K( P4 j0 ?
- <script>: I! q4 G2 ~8 F
- // 创建根实例2 m$ j7 Q4 s. a+ t) Q
- new Vue({
- w$ Q- `& [8 P$ H* s' {- L - el: '#app',9 T4 y# O' h* [' B, Y) `. E
- directives: {8 V+ q6 a. t& `" r3 N: J
- // 注册一个局部的自定义指令 v-focus% \4 g; A" F6 \5 L
- focus: {
/ Z: A- M7 k2 _4 G# c3 q. b8 H* b$ j* R' K - // 指令的定义% V E' ?+ \2 K# a1 m6 K& \
- inserted: function (el) {
; b8 E# Q! V. T' E4 @ - // 聚焦元素
l6 C. d" n; O ]' \, s - el.focus()
! M$ t8 X# j% `1 p" y! K* V: j - }, ]5 F9 L& q% k8 y7 b7 g
- }
% X0 L% d+ S. k' Y, J7 y6 [ - }
; i% [) W% U/ G! I, P( p - })
9 T! O% d/ ~# G; v - </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。 2 J0 n0 ~) @. o* a' f/ C1 o
钩子函数参数钩子函数的参数有: - 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 }。3 W* }' b/ k- {1 b# C6 `
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。1 r8 B7 J- g0 E5 V, T2 v
以下实例演示了这些参数的使用: 实例
" f$ W( q$ D: M* o( f+ D q
/ f9 o) c8 \3 l9 _- R8 u- <div id="app" v-runoob:hello.a.b="message">* Q# P. {' c I# Y
- </div>
/ i# F Y4 z1 q4 S -
5 g% I( E( V) K - <script>
* k' k) I* |9 N* s- V - Vue.directive('runoob', {3 B6 X, p3 H8 v$ x8 p8 r
- bind: function (el, binding, vnode) {
. b2 H/ k' K; f6 A - var s = JSON.stringify, U# B5 g8 I3 r+ x
- el.innerHTML =0 `3 j. d2 f0 h/ Z1 S
- 'name: ' + s(binding.name) + '<br>' +
4 {+ ^/ ` C* @4 P5 m: F4 M - 'value: ' + s(binding.value) + '<br>' +
7 ^( m# t9 M* h1 G) T2 l+ C7 L - 'expression: ' + s(binding.expression) + '<br>' +
* H" `! `- d% U% h E& W - 'argument: ' + s(binding.arg) + '<br>' +2 ^3 T; Z; A2 s
- 'modifiers: ' + s(binding.modifiers) + '<br>' +7 P6 C o6 n' H& M0 B
- 'vnode keys: ' + Object.keys(vnode).join(', ')" _$ e/ T+ L! M6 b, M
- }$ y" w f& c* g' Q8 x) b* O6 }
- })
( r. m5 m# h7 W2 m - new Vue({
, F) S& o. r3 I3 s7 d/ h - el: '#app',8 D2 X6 P! I8 A5 j
- data: {
6 ~& G, u5 g2 L - message: '菜鸟教程!'
; _ q* r2 x5 k* {% W1 d; v - }
2 c0 N$ B+ I- [" O7 P - })
% `/ q5 g7 Y; f% a, |9 s - </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:8 Z& m: e1 w2 J( Z
- Vue.directive('runoob', function (el, binding) {" Z* \% q p$ G, ~* c" L
- // 设置指令的背景颜色& y6 q8 w6 m0 k8 [1 F. _
- el.style.backgroundColor = binding.value.color5 W6 _) @+ T6 L) |$ z
- })
复制代码
7 A% \7 s& _& {5 q
" j0 Z5 x( i9 I+ N; g( I7 R指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例
: D/ D) R5 ^. \. S# s" Q W- A$ g+ Z( x# I. K. L q$ i/ L9 H" v
- <div id="app">- V7 k e- z0 q6 g4 q2 Y
- <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>. P$ N8 f# u8 Z/ ]! E
- </div>
E/ _3 k, J: _2 P -
$ r, V2 i+ X& V9 J" G# X& l - <script>1 X! B( N" S, E
- Vue.directive('runoob', function (el, binding) {$ D O# y0 x3 K
- // 简写方式设置文本及背景颜色. @8 Z" X4 Q* z9 ~' I! J% {. w, y
- el.innerHTML = binding.value.text
( Y, `% ^% ?! n. Y0 ` - el.style.backgroundColor = binding.value.color
% h+ e' c; p6 M$ E - })5 g/ N( @: Y* N- w! D( L& X
- new Vue({' B* F; {9 h: q, J$ @' e+ m
- el: '#app'/ O d/ X. N* `6 M. ^. q
- })7 d: ^. n% C1 S8 u* c
- </script>
复制代码
) \4 w1 w, X# Y6 H# M( g
* E& F8 b5 {0 E) X3 X5 h# ?) E+ I& E; w2 [
|