cncml手绘网
标题: Vue.js 自定义指令 [打印本页]
作者: admin 时间: 2018-7-4 11:36
标题: Vue.js 自定义指令
% a4 `' o' `6 q$ \/ q1 H
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。
下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点:
实例
1 t9 x3 L P" y2 x; {' V
$ [# v' a( r1 h3 Y4 b1 h% ~! t- <div id="app">, D/ d, w( ^6 m' K8 a5 q( U @
- <p>页面载入时,input 元素自动获取焦点:</p> V, ]$ ?6 ]" Q: w2 _) @6 E6 Q
- <input v-focus>/ c a6 `; p$ a9 i e
- </div>
4 a- T4 F- j5 V& a+ w - . z9 s- s/ q0 ~. A( `$ k* M
- <script>. A; M" l Y( ?' J2 G
- // 注册一个全局自定义指令 v-focus
# {- m ~3 D% m9 T' n' c8 T - Vue.directive('focus', {3 K9 ~" c" U( h* }
- // 当绑定元素插入到 DOM 中。. B% Z# m( M- h1 A
- inserted: function (el) {
. O2 r, J% |' p5 v - // 聚焦元素
& v- Q( m D l" s. I9 |( P - el.focus()$ A* \3 c' d" a' i. s) ]% D
- }
l" p: I3 H% j2 h2 k L, |% b3 t - })& d& o( |+ d9 _( j( q# A
- // 创建根实例
6 t" Y& r* Z& y; {% L1 @8 s( e) M - new Vue({" a O( a' x. o2 W% y: v4 M
- el: '#app'
9 c; [. ?) S' g _, n1 w - })/ E) ?3 k& @# U! e8 e; L
- </script>
复制代码我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用:
实例
( n& k0 u, b/ ?. J1 y, x, {
/ F% f( s$ x v- <div id="app">7 B( a& @! F) [7 X
- <p>页面载入时,input 元素自动获取焦点:</p>
?3 y7 E7 M! P) v, H - <input v-focus>
& F* N& C1 {( x6 a - </div>" H K! T' E. {% ]. B- C
- : x7 V9 W- D4 u6 s6 R' w3 c& e4 _
- <script>
! @! G$ ? O. l - // 创建根实例2 S5 b; E& Y Y# o; l
- new Vue({
3 J" G+ u( L1 F+ V( U - el: '#app',
' k4 i5 A4 q4 ~& b. d( E1 k- } - directives: {
! L/ U" v. ?3 q$ [" f - // 注册一个局部的自定义指令 v-focus
8 u6 P) `% R" r) _& D - focus: {
( I2 L1 V \% c - // 指令的定义
) w6 i6 y" Q- A( H A ]$ c; P - inserted: function (el) {
, Z" Q, G. s- T ~: U% F' c# t2 m - // 聚焦元素
0 X) `4 G9 }/ b g$ U - el.focus()
" ]! ?" W; W5 H* H8 W w9 g - }7 b* j( H1 B( k/ Y7 J
- }7 C4 V+ s) s5 c' y
- }
- X: p% o& M8 ? P4 K6 R - })* ^; Q, T, a) P3 J8 d3 }
- </script>
复制代码 钩子钩子函数指令定义函数提供了几个钩子函数(可选):
bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次, 指令与元素解绑时调用。
5 L- v2 y: y/ X8 d3 c
钩子函数参数钩子函数的参数有:
- 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 }。. k/ _1 z; \9 E7 M# y4 I [7 F
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
. Q# Y3 i; ]' Q( l, C% p6 n
以下实例演示了这些参数的使用:
实例' e+ ^% T* {; s8 j* v- N
3 j! q% T/ P4 h7 z6 Y& s- <div id="app" v-runoob:hello.a.b="message">
5 ]9 D8 ]% _9 s$ P - </div>, i. }4 ~" K8 O b
- 3 f6 @' P1 @- B4 q4 W
- <script>! D% E* g! |5 C/ }- }/ q
- Vue.directive('runoob', {) c+ _ } w/ S, Z- d2 V$ y
- bind: function (el, binding, vnode) {$ R+ @7 q/ t$ _8 ^" | H
- var s = JSON.stringify. L) M j" e5 g( z2 Z8 z; u
- el.innerHTML =
: {; B! d& U* b - 'name: ' + s(binding.name) + '<br>' +6 X3 K( S3 K6 J- D1 G$ t$ d) B
- 'value: ' + s(binding.value) + '<br>' +% c- q" C: v: \2 g1 _! K
- 'expression: ' + s(binding.expression) + '<br>' +
5 _; a& Y7 T8 L - 'argument: ' + s(binding.arg) + '<br>' +0 E* v: K0 U2 v! e6 B
- 'modifiers: ' + s(binding.modifiers) + '<br>' +. [2 C' ?; m7 `: [1 c2 z
- 'vnode keys: ' + Object.keys(vnode).join(', ')5 u% n% h& I/ w6 Z3 F2 @$ M
- }1 b* W* [; R& R
- })
/ O! i, W3 b/ ?* n) \) R* g, } - new Vue({! a- i, { m9 L7 k* n9 t
- el: '#app',
3 l4 ^& [4 ]8 W - data: {
4 j/ Q+ X, d: d5 t) C9 P* r - message: '菜鸟教程!'5 i: D! ^& U' |5 t
- }1 E& H5 x( U0 }* u U( p* h
- })0 z0 |8 X9 y2 `* q( N
- </script>
复制代码 有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:
* `) k9 P. i% P$ X- Vue.directive('runoob', function (el, binding) {, G0 K4 L) W7 e% k( a8 ^5 v+ r
- // 设置指令的背景颜色& u& }. A6 ^" l% [3 R& _$ `
- el.style.backgroundColor = binding.value.color
[8 {( B# Z9 w) d* f: G - })
复制代码 ' ~9 o, P. @' t) q
& F3 O& E! J( k) n+ h+ W* M
指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象:
实例3 `8 s3 z) n1 o1 w3 }% K
+ n% |$ `: u0 q$ b0 b5 i% x
- <div id="app">
2 u0 d# P! u" j% }4 D( x( z - <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
) L7 b; ~5 n: e5 h( t - </div>7 Q9 |7 D5 ~ W" H" K' P: D C5 t
-
* U4 L$ x# o' d7 L - <script>; e k( {% i/ \! ` Q
- Vue.directive('runoob', function (el, binding) {
. w t T* T# ?* a6 R( ] - // 简写方式设置文本及背景颜色
* `& {5 z3 j: O2 D' T1 @( @ - el.innerHTML = binding.value.text! z6 ^# H t% H9 M+ b( w
- el.style.backgroundColor = binding.value.color
- j, \$ n+ u& t" N - })
7 r8 Y" _3 Y; y) C0 U p7 a& w - new Vue({6 H1 Q k7 m+ N& q7 {) ?
- el: '#app'4 c1 a) u A/ d6 I
- })
2 [: Y+ t6 p5 b0 W* X$ ` - </script>
复制代码
* O4 v Z4 p4 q f: p! V4 N9 T) I5 W
8 Q7 n: f! H& n3 k. d
欢迎光临 cncml手绘网 (http://bbs.cncml.com/) |
Powered by Discuz! X3.2 |