3 j1 ^7 _# G8 L- Y0 R除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例 p) R* V D/ {6 `) Q3 f/ T
4 n% I/ c* P) X/ e& s r
- <div id="app">
0 ]$ @7 A$ d( h+ x/ \ - <p>页面载入时,input 元素自动获取焦点:</p>
. g' O( ]# T! _! A' l, ?8 Y - <input v-focus>4 Y9 I8 X x$ ^& M" q+ t( t
- </div>
' O3 @( ? }6 w$ C% \ -
a Y3 S! S& y - <script>
, |8 p8 m! B C& l9 N - // 注册一个全局自定义指令 v-focus0 L0 d6 U# ^" U( E. ]
- Vue.directive('focus', {& j* k2 G$ B$ M. F) L, U
- // 当绑定元素插入到 DOM 中。" ?9 a; o3 N' z/ a
- inserted: function (el) {
+ J# ^/ Q9 g+ p. G - // 聚焦元素. _0 P6 p; v* Z4 P5 R
- el.focus()
! n) E2 b k6 M# j0 V- s6 l - }
. L, m7 t _/ ]$ J% B% E - })/ q4 n2 [# P3 n- L4 m% k" z
- // 创建根实例- \7 Q) p, b7 {# y
- new Vue({( L2 q3 @0 _4 ^8 Q2 q/ w" n" f0 A
- el: '#app'
p* H2 v/ }; W$ p$ H - })
9 A2 w6 }& g! O1 Q2 w( G9 Z* l - </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例
7 B% K4 {: i# Q8 L- G
* J1 ^0 D. g6 h- <div id="app">
! Z6 o- O C, r) ` - <p>页面载入时,input 元素自动获取焦点:</p>/ w& U5 m$ C! d5 K' q% V: _
- <input v-focus>7 [' V6 q: U5 a: \
- </div>" U3 D1 m% l: N2 @5 h
-
" q% c& M6 c+ n8 l* T4 g - <script># \) F& k$ U \8 L0 ?
- // 创建根实例& B( o9 P, g4 t
- new Vue({( B. t6 G0 ?1 f5 x S: Z0 z- b
- el: '#app',5 n: {' J5 u3 u# C3 N/ `( `
- directives: {
E- P) s) v/ x! l8 h# H9 E - // 注册一个局部的自定义指令 v-focus* ^ R% _6 G+ q
- focus: {8 a3 |. Y( S$ w9 g
- // 指令的定义
6 C( L# a, o+ x% U; ?& r" l - inserted: function (el) {
! D( ~; e) `0 M2 h8 |' L1 S, K9 b - // 聚焦元素
) @6 o( F+ h' B D6 d5 ] - el.focus()
, T: f, c+ ~; Z: H - }! Z% q y- @$ ^' |; F7 S- v7 d5 o; E
- }* W. h8 Q4 S1 q0 R0 ?! Q' D Z& `- }
- }5 X3 t- r5 Z% e8 p* |
- }). N0 }! @% K: |# L; V9 ~& Q
- </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。
/ e$ d# W0 ?8 N7 S9 K) E9 d; L 钩子函数参数钩子函数的参数有: - 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 }。/ G& y0 O4 x5 R, v L) N
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。2 ]" a5 y/ o% J- @- c& T
以下实例演示了这些参数的使用: 实例5 a- `4 ^* c3 Z% [3 o. i
( j, Y( K1 p( |4 o4 b- B- <div id="app" v-runoob:hello.a.b="message">
1 M, _, p/ O4 c/ M b - </div>/ K# U# r/ q% D$ J6 C
- 1 L2 Z. h2 ]+ @! d' M$ R+ {' u6 S
- <script>
2 b# g' `. [9 q6 d3 [" J) u& ^ - Vue.directive('runoob', {
& c7 `' D: { Y( } - bind: function (el, binding, vnode) {
9 F5 W: t9 q' A8 I, P( ~ - var s = JSON.stringify
/ c# R' [! v% r2 c7 w - el.innerHTML =
( d8 ^+ i. n4 R9 k - 'name: ' + s(binding.name) + '<br>' +! a2 Y9 c: H" `- v4 P1 h v
- 'value: ' + s(binding.value) + '<br>' +
5 k7 Q7 F# y7 s0 W4 } - 'expression: ' + s(binding.expression) + '<br>' +) m2 Q: O# O+ _8 m3 U, E, `
- 'argument: ' + s(binding.arg) + '<br>' +
2 B/ V9 |/ K1 ~9 ]4 X' g& C M* L - 'modifiers: ' + s(binding.modifiers) + '<br>' +
2 [8 g$ S. c& m% P, H9 a1 [2 U& N - 'vnode keys: ' + Object.keys(vnode).join(', ')$ N$ V( k7 M6 S) V% Y- o. Y
- }
' |; g ~: o* k' o' ~7 w* h - })
" t8 I6 X7 K# c2 ?9 O - new Vue({( c+ H3 X& Z# W" y6 p9 q; W) }
- el: '#app',4 f- T# r/ U6 T) A
- data: {
5 X P$ M! W! f4 V+ c9 t - message: '菜鸟教程!'
( Z1 ^- a' D8 O$ Z - }2 { U5 s. d+ y) E. _# K% \0 J- C4 K
- })
7 D1 r* R i# r. V - </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:: c* k& m- |/ B5 o0 a# j7 L5 U8 s
- Vue.directive('runoob', function (el, binding) {
" f* c* |$ V. b( m7 d2 R9 K* A5 [ - // 设置指令的背景颜色6 n, o9 E6 w8 D% K
- el.style.backgroundColor = binding.value.color
! C' i& T5 v( T& Y3 B. r$ b: _ - })
复制代码
/ Q* Q* l# J+ q7 U
2 ?2 u4 R3 t# k3 L指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象: 实例
$ `' B/ l" o/ e6 M# b( ^% W O1 x; D5 Z Q# ], {. D
- <div id="app">) m" ]1 ~, I( J, }' Z+ ?& ^4 Z
- <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>2 _5 C8 b- ?4 n, D8 w! s3 R
- </div>) J0 N% z6 u L8 i
-
0 h, v& V7 Z! M6 \1 p% O - <script>; @( D2 G; X& u% c. h0 w3 V
- Vue.directive('runoob', function (el, binding) {3 v9 [8 W) \8 u4 r/ J
- // 简写方式设置文本及背景颜色) R' x! _4 B( ^) f7 A: q% Q
- el.innerHTML = binding.value.text- E( U# t( }% @2 `
- el.style.backgroundColor = binding.value.color
. M: t# K) |5 p - })
! ?; Q' E( H* s P - new Vue({4 g3 m& o4 `6 }3 }' E# h+ S
- el: '#app'
, y" a/ a N1 C' Q - })
5 H: T A* ~( |* {, z# D - </script>
复制代码 ) [8 b& w& k: J& @: R
% h8 x7 ?5 F) G4 Q+ g7 ^. b
. M1 D' M% u. i$ b5 P
|