# [; e5 w8 e; G5 r' {8 A除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例4 Q- Q1 J4 ?9 p; d; h- ]0 }6 j$ }
7 @8 i2 P7 G- Z5 b D+ I- <div id="app">
+ _& C+ d, t+ `, i m! N$ x - <p>页面载入时,input 元素自动获取焦点:</p>+ p- ~" a0 M6 H% n, G% u% ?# J
- <input v-focus>- |# @, H; q/ V0 y6 j6 i6 K
- </div>. i4 \5 p/ s( i) a* H
- 6 F6 ]. E1 `( D! A/ Z% `* G' s" n. {
- <script>
# ]' q* B" J3 H; M: U7 q - // 注册一个全局自定义指令 v-focus
& \, B4 R, H& u - Vue.directive('focus', {
: N6 S- j, N9 P3 M6 w - // 当绑定元素插入到 DOM 中。
* d+ ?* I, X8 M7 J5 z' {" J& v( m* y - inserted: function (el) {2 i& D' w1 s r" y" S t# [8 ^! b
- // 聚焦元素 O9 }- k. t' ?3 z4 N* u. H
- el.focus()
( s! x& f5 X4 w' P% d* e - }9 h- u$ L: y8 k k- ^9 m7 x J' e
- })
, q# s" |# e7 o3 z Z - // 创建根实例7 O* @1 S0 t' b- [0 H
- new Vue({
, M7 ^" i( O5 ^7 ^' \% C9 q! p - el: '#app'
$ ?2 W, g3 M+ ^3 r! V/ _ - })) C* v7 s6 x6 ~3 e. [
- </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例
/ ^! x0 F' G- O+ _# D8 {) `- X* }2 @* `6 Q3 u& _
- <div id="app">7 t$ q$ A. \) J; [1 k- N; x
- <p>页面载入时,input 元素自动获取焦点:</p>
% M L4 |' C' |1 U - <input v-focus>
% N4 ?7 Y2 ~) h! Z. F( d - </div>4 H" A6 t) [9 \3 F9 R# K" F, l1 @
- + B0 ^ T( X2 @0 o" e7 t2 d. z7 W
- <script>
6 o+ N/ [( |% E, V - // 创建根实例 _& h Y% V6 u
- new Vue({
% V5 v' G: ?" L" ~6 n+ t - el: '#app',* `- ^6 O& ^ K) b. X4 T
- directives: {
& H3 R! f" n3 }/ ]4 S( d) r( e3 `4 S - // 注册一个局部的自定义指令 v-focus
! V" V b$ L: N X8 b9 W - focus: {
' p9 _7 Y2 g. A( C: C3 _& L - // 指令的定义6 a( I3 U m9 o2 v Q& h
- inserted: function (el) {
! Y% A+ c8 P& j+ A( X5 ` f - // 聚焦元素
8 h& @$ A7 x* l! f3 e, D - el.focus()
5 t9 `5 B9 E/ E$ _. H# R. u - }
9 R: A; f3 }. `0 o# h/ A. o9 m - }* J1 k* i+ W1 L
- }/ [9 L6 k" e5 P
- })
( O% v- l' j0 @) k' ] - </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。 . F3 z) d7 T6 F4 T1 t% H
钩子函数参数钩子函数的参数有: - 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 }。
1 Y+ E+ @! Y8 a- M+ k4 N, i/ E' J
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。* u0 Z5 f; ^7 Z
以下实例演示了这些参数的使用: 实例
6 y0 w) ~. A( ]0 O1 E$ N7 M3 ~9 T
) W: j# ]$ t; A- a- <div id="app" v-runoob:hello.a.b="message">' S2 J# A! u2 T$ u7 ]' S: W
- </div>$ L X: z1 P# }6 V. s$ Q+ A, I. {. ~
- $ m, D0 m* w9 e- Y& V: f8 V7 ^
- <script>* Y8 B8 I* O) D# P% v) t* ?
- Vue.directive('runoob', {' b, }4 N8 x* E- }- q
- bind: function (el, binding, vnode) {
( Q2 u7 a( I1 ^* J9 i% y# k2 J - var s = JSON.stringify
% h! Z6 a' u$ m! l* { - el.innerHTML =
/ Q0 x s4 K; C- d - 'name: ' + s(binding.name) + '<br>' +' r! h A( ]# v" b/ `
- 'value: ' + s(binding.value) + '<br>' +1 ~1 v0 f0 w+ i
- 'expression: ' + s(binding.expression) + '<br>' +8 j @1 c9 s3 I; J
- 'argument: ' + s(binding.arg) + '<br>' +
\- ]9 X2 r: j7 B: c% J - 'modifiers: ' + s(binding.modifiers) + '<br>' +
0 @; F* j0 N* S - 'vnode keys: ' + Object.keys(vnode).join(', ')
- z% Q1 y0 E+ W. G6 I - }" [3 B$ M% D+ k0 O5 r# \% l3 _$ q0 D
- })1 t# @0 h5 r* Y+ o- H" _
- new Vue({
# x& i' Y0 p9 S7 G: B: z - el: '#app',
6 ~! Z ?. Y0 R- s: z5 m - data: {7 v% C: A; W7 M! B$ u( ^
- message: '菜鸟教程!'. G; K, N/ x0 O' O2 H2 v
- }
" G# q9 u! m& F2 N8 l0 q% C& J - })
' u+ y2 I+ B9 \5 N$ N) P' Q - </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:0 [9 ]3 E5 W. t/ E/ D: `- v
- Vue.directive('runoob', function (el, binding) {
3 P7 J$ B( i0 w m n- w- U1 Y* @ - // 设置指令的背景颜色3 h X- g+ b Y% B
- el.style.backgroundColor = binding.value.color, Y/ o. H1 G2 {: ]. ]
- })
复制代码 3 w; Y- W* N, f0 U
! @5 Q5 r/ l' E5 e* v) T2 d指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例) {1 r" S$ h/ D# x; l% y, Z W2 D
7 w- e6 `4 A: O! l* ?, A5 t$ c
- <div id="app">. M7 |; [5 S4 r$ k8 l
- <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
2 N# m6 W' \# I n: R; e! I - </div>' m( M" E7 S* \0 p
-
& e, u! r% B4 Q' ?2 q4 B - <script>% T1 q- c: X& W
- Vue.directive('runoob', function (el, binding) {
3 ?+ {8 B" B1 G$ w7 l7 {$ K6 v$ m - // 简写方式设置文本及背景颜色
% ~9 u2 J7 K4 h4 K# l5 _% D - el.innerHTML = binding.value.text
5 a6 z2 O8 V2 l9 q2 X - el.style.backgroundColor = binding.value.color6 P3 {& X. @1 i! F
- })$ `0 N) o/ E6 [( \( \0 {
- new Vue({
# c9 Y# c& y+ Y6 y - el: '#app'
0 ~0 ?& j9 \. _ - }) L* g0 p2 [. T7 A, k! }0 d, s4 R& o
- </script>
复制代码 - w1 A* b- w, D4 ^
0 t$ n; D; {* e1 o8 ^
. F3 l( f% D% D' m, ]! w5 W |