您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 11963|回复: 0
打印 上一主题 下一主题

[Vue.js] Vue.js 自定义指令

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-4 11:36:23 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
( v3 N  }8 }7 Q9 z% K( T% G
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。
下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点:
实例
2 o3 ~! O% C( \% o' |5 v0 ^8 [7 b8 ~: o% H1 y: q/ a
  1. <div id="app">
    $ W6 B) K$ k1 P/ G0 [( ]' a) X1 ~
  2.     <p>页面载入时,input 元素自动获取焦点:</p>
    3 k2 D' m' ?5 T# ]# X8 Q
  3.     <input v-focus>$ j( X9 Z  c  j" g
  4. </div>! V9 y* u/ m* u" `/ `
  5. 8 v) }  E. P& Q- q$ P+ E( b2 d
  6. <script>8 {( l6 `$ X1 b+ x  x
  7. // 注册一个全局自定义指令 v-focus' c+ C, A0 G+ p0 u0 u5 A+ Y
  8. Vue.directive('focus', {
    . Q/ j( R) n. o& Y
  9.   // 当绑定元素插入到 DOM 中。; h( f4 h3 f) o2 v+ u
  10.   inserted: function (el) {/ Q+ C- T  C+ N
  11.     // 聚焦元素0 N# I0 _% O3 I' H
  12.     el.focus()
    0 |1 m+ ~- e' n# ?  {" ?2 r
  13.   }
    / k- s: @  w! |3 q
  14. })/ z: [9 x( M$ I. o
  15. // 创建根实例
    $ w; x; c2 m5 k
  16. new Vue({/ u% M- w2 g/ t' N# ~
  17.   el: '#app'
    & P; S- ?4 H* S, F# Q; q' i
  18. })3 ^7 o, I. f+ `" w( R
  19. </script>
复制代码
我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用:
实例
, M! S0 Q" p" n6 I) t5 ~! v$ G% o& h  |
  1. <div id="app">) H/ V$ E9 c, P2 g: |% a$ ^
  2.   <p>页面载入时,input 元素自动获取焦点:</p>9 K& T" X& v. C
  3.   <input v-focus>3 ?$ e" _+ |7 V
  4. </div>8 z+ ~8 T8 V; f9 M- ~

  5. & l. `" k0 [' m1 Q, V
  6. <script>
    , U$ D1 i, {4 X+ I! r6 ]" z- n" K
  7. // 创建根实例' R2 L# y! N" C7 r  b
  8. new Vue({
    7 w8 K7 M6 J( K5 j" \: p
  9.   el: '#app',
    # @" n2 F# c  S- Z7 Z* h% ~7 s4 S
  10.   directives: {
    9 y/ D/ s6 W: @7 i* ~* Q9 k
  11.     // 注册一个局部的自定义指令 v-focus) b+ B9 ^1 P3 n0 U" R/ M* o9 W
  12.     focus: {* P. d% b- P3 h5 B! e7 p7 J
  13.       // 指令的定义
    3 F& e. e4 u6 I5 M/ p' Q
  14.       inserted: function (el) {
    ; W2 t% e) |. x- ?: `, l
  15.         // 聚焦元素
    ; s4 o* I1 s  i
  16.         el.focus()  s6 k! w& @9 q2 C2 g
  17.       }
    , x: S. ^) q( p  I
  18.     }
    : S0 D2 k3 _$ l$ n! F
  19.   }
    2 M2 t( Z& C3 p. S# `4 y. L8 X
  20. })- }% p* l: c7 W
  21. </script>
复制代码
钩子钩子函数
指令定义函数提供了几个钩子函数(可选):
  • bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
  • inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
  • update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
  • componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
  • unbind: 只调用一次, 指令与元素解绑时调用。

    & T( e* U: t; A
钩子函数参数
钩子函数的参数有:
  • 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 }。2 P% v( P! y( }  n) i
  • vnode: Vue 编译生成的虚拟节点。
  • oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
    ) [$ I: P3 m! \) d) A- u
以下实例演示了这些参数的使用:
实例, \8 Z; g8 Z; f: M" z2 j6 ~  U1 _

) ^& Z& t# Z+ u+ [: {0 q1 y& C" w
  1. <div id="app"  v-runoob:hello.a.b="message">8 f) ^0 x6 y6 b* w- b
  2. </div>
    2 a2 K1 J" C& U! w; i- ~

  3. - H0 P- X6 N' F$ p
  4. <script>0 |3 d, z' s5 Y9 g1 o- `9 H
  5. Vue.directive('runoob', {2 x& H. N4 x0 o' d# p7 \% N
  6.   bind: function (el, binding, vnode) {0 q7 O# L0 {7 _' ^' m" \3 t
  7.     var s = JSON.stringify$ g: |0 ^/ ^% k5 x
  8.     el.innerHTML =5 @. g' F& H1 k1 {0 r
  9.       'name: '       + s(binding.name) + '<br>' +
    & e+ b4 ~; V- |! H
  10.       'value: '      + s(binding.value) + '<br>' +
    ( e1 g& M! E$ ^
  11.       'expression: ' + s(binding.expression) + '<br>' +
    " D" D, K& N/ K3 ]' B- M
  12.       'argument: '   + s(binding.arg) + '<br>' +0 `6 ?& A& U9 |' ]8 N
  13.       'modifiers: '  + s(binding.modifiers) + '<br>' +8 j6 B) _' k4 `/ w
  14.       'vnode keys: ' + Object.keys(vnode).join(', ')
    8 O+ h# x. F# @6 x1 E
  15.   }2 e7 C0 W4 a/ K  c  b3 U
  16. })5 p' G) _" \! O2 D7 T1 N
  17. new Vue({
    : }; }8 n3 S) k  ]! b3 S
  18.   el: '#app',
    . u9 j3 y7 I; r! {/ ?: V$ J
  19.   data: {2 W* j7 T+ f* v) [+ T. L
  20.     message: '菜鸟教程!') B0 N! }* M0 m+ g  A3 u7 |6 n
  21.   }
    " M& y( o+ ?) i) R# l4 h9 }5 `
  22. })$ F7 m- Z9 ~# {: v2 T) g
  23. </script>
复制代码
有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:
+ a+ {$ p6 j5 U3 R0 \4 A
  1. Vue.directive('runoob', function (el, binding) {, H- k( x$ B( H' O9 Q3 \, ?
  2.   // 设置指令的背景颜色0 D- o0 v/ k% T' V) _) i+ V. _
  3.   el.style.backgroundColor = binding.value.color
    0 T% r% L( Z6 e$ @' [% T
  4. })
复制代码

8 n5 J9 l4 [$ p# Y! ]; N+ m4 g* T2 }, l( f: X
指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象:
实例1 l  y& M3 l1 U: W( {5 j
+ W' t7 @+ [& D2 ~
  1. <div id="app">
    - n! V' [7 N& X& o2 y
  2.     <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
    + ?3 B8 h: G2 s4 Q7 E7 @* n1 G
  3. </div>
    ! R' y( n/ [, ]% V: H% o4 d
  4. 4 Q5 |$ w  b* [' U+ m- _
  5. <script>" \+ x2 J7 x1 A& \3 l# ?$ ]9 a
  6. Vue.directive('runoob', function (el, binding) {
      n3 L9 m/ K" x: w' {# @
  7.     // 简写方式设置文本及背景颜色. n# n8 k/ S( U, `  \$ T* t
  8.     el.innerHTML = binding.value.text+ {  e/ F6 V: E, l. V2 H
  9.     el.style.backgroundColor = binding.value.color
    / U3 E7 ]- b  t
  10. }), Z5 D4 V" Z4 j  P' C
  11. new Vue({
    & c2 T$ L6 C% C: B' T6 ?  r( W. n
  12.   el: '#app'
    0 v$ [' k3 Q, H8 `* m' o* z; n
  13. })
    + l, x4 B$ k& r  C* {3 \# y" l
  14. </script>
复制代码
2 c. i' B/ s3 S5 u4 H8 Z3 A4 G

/ t2 {) n# R! a9 F- w! H+ D9 J" T) c' Y/ \! I
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2024-12-23 02:13 , Processed in 0.124504 second(s), 21 queries .

Copyright © 2001-2024 Powered by cncml! X3.2. Theme By cncml!