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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-4 11:36:23 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

3 W/ i% @7 Y5 E! y3 K; k& x
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。
下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点:
实例7 T3 r: h0 O6 ~. Q# j; R

1 C% d+ M+ \6 i5 P: p
  1. <div id="app">% [6 Y' Y& u* `+ y7 O
  2.     <p>页面载入时,input 元素自动获取焦点:</p>
    4 c  j+ {# G, f8 i
  3.     <input v-focus>
    % u* j. M; ^. i% |
  4. </div>
      D6 Z. L6 J1 w

  5. ) ?) {" {3 K% Q2 G; S
  6. <script>! N  D7 [7 `, H
  7. // 注册一个全局自定义指令 v-focus3 J5 ]' r" W, `# O" m: A
  8. Vue.directive('focus', {) d& l8 w5 D4 o4 u  K& V2 j& S
  9.   // 当绑定元素插入到 DOM 中。
    2 N- @. l: s* }. O- t) I% z! t
  10.   inserted: function (el) {0 \9 s8 [4 K0 p. O' A; {- {# I
  11.     // 聚焦元素
    0 |# m5 B2 e- ]
  12.     el.focus()
    4 i% p* T2 z' Y, K) a$ G- @
  13.   }* b2 F3 V! B8 H8 h
  14. })
    7 K% H6 {' C4 ^
  15. // 创建根实例# S# j6 g* a9 x* c
  16. new Vue({1 E+ G/ l5 z& ~, f# t' a
  17.   el: '#app'
    5 H" u& g- b+ S( m2 r% L( `1 K
  18. })* e+ ^6 f0 a! {! t* G- u: G
  19. </script>
复制代码
我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用:
实例
7 k8 z& ~1 N8 b; m: }/ I- h0 b; `% H. b$ g* M0 _* i
  1. <div id="app">3 w, O9 W1 o% E! {
  2.   <p>页面载入时,input 元素自动获取焦点:</p>. {6 I- f3 o5 o5 E. G9 v
  3.   <input v-focus>! w  v' `# K0 w' y; h
  4. </div>
    . g: m+ y0 {& B( Z& |
  5. 1 L8 L  N4 h$ b' N+ g1 q$ l4 y% s
  6. <script>* X2 E+ M- e: V4 r
  7. // 创建根实例4 c; g. E- x- G0 ^; v* I
  8. new Vue({6 \* u5 u  q3 n
  9.   el: '#app',
      D* ^+ Y# a  ?# d- X; l
  10.   directives: {. J: Z3 N9 K4 ]5 r4 i. o) ?8 m
  11.     // 注册一个局部的自定义指令 v-focus
    . S3 n; d8 |6 \
  12.     focus: {8 ~- U9 c8 X: U# n
  13.       // 指令的定义
    : W$ i' N( L0 K9 k5 j
  14.       inserted: function (el) {: O0 d7 D: C' P' }3 T9 u% p4 a
  15.         // 聚焦元素
    # Y- ^# X& U  R2 c3 E
  16.         el.focus()
    $ l4 ]- k1 g& q6 ^5 K8 i
  17.       }
    ; X8 J7 X% ~% b+ w$ h
  18.     }
    8 a& R. I4 M+ g# y3 O( @7 X: X$ F
  19.   }6 s. p7 K" d; `
  20. })/ F" E* V& ?8 m. V! r
  21. </script>
复制代码
钩子钩子函数
指令定义函数提供了几个钩子函数(可选):
  • bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
  • inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
  • update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
  • componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
  • unbind: 只调用一次, 指令与元素解绑时调用。
    2 |* l5 r& ]' G8 P9 h( `( 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 }。' Q  Q! {) v2 ?
  • vnode: Vue 编译生成的虚拟节点。
  • oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。: u. j- [+ ?! {1 \; N
以下实例演示了这些参数的使用:
实例
, K9 k, X5 k6 L1 ]
5 {+ W# H+ A. Q
  1. <div id="app"  v-runoob:hello.a.b="message">
    ) C- y3 ?% V, F/ y7 R! g
  2. </div>
    + ?- v- O# K  P" t/ b1 Z# D
  3. 7 R8 p( ^3 ?4 C+ b. M, K: o
  4. <script>
    ; M6 [. f/ Q0 X! t0 M) g& r
  5. Vue.directive('runoob', {6 h6 I& P) S4 ]0 P9 V
  6.   bind: function (el, binding, vnode) {; M1 h9 o9 i9 ^5 R: I' A1 p
  7.     var s = JSON.stringify" i. q! O# [. g% r7 A7 S1 v2 c
  8.     el.innerHTML =3 W: o6 ?, U5 a3 H
  9.       'name: '       + s(binding.name) + '<br>' +
      V& p4 {& s" J% v* I( s) E
  10.       'value: '      + s(binding.value) + '<br>' +8 H9 n/ x, K9 m( ?+ `  _
  11.       'expression: ' + s(binding.expression) + '<br>' +
    & J- z9 d" k. |+ c
  12.       'argument: '   + s(binding.arg) + '<br>' +/ k+ C/ @% N& z3 e  ~9 ~% l
  13.       'modifiers: '  + s(binding.modifiers) + '<br>' +
      _+ i( {4 W; D, ?% h
  14.       'vnode keys: ' + Object.keys(vnode).join(', ')
    4 H5 I9 Q! i( D5 N# C
  15.   }
    ) `# B: S5 c$ c' D  P) `% H
  16. })
    * h5 m# N7 x/ r. b3 f' ?
  17. new Vue({9 t/ w; y! t3 v6 Q% Z5 }0 ^- D
  18.   el: '#app',- C* l0 m& M& J/ e; w
  19.   data: {
    8 X- ^- f) G) j/ E1 [" j
  20.     message: '菜鸟教程!'
    ! A5 }! h# L7 z" X. ]
  21.   }. r% e! l3 ~6 y, e
  22. })$ U) V; S. x3 Q! P* d# Q* q
  23. </script>
复制代码
有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:6 y1 k. {- M9 `9 J: i
  1. Vue.directive('runoob', function (el, binding) {) Q! d+ [0 S1 C$ j! ]3 J) A7 C1 r
  2.   // 设置指令的背景颜色
    * E8 ^4 y- y6 B4 M: k# @
  3.   el.style.backgroundColor = binding.value.color
      ~" o) n" R/ f2 A, @% n
  4. })
复制代码

5 m7 K  w3 l7 @8 B- I7 A* d! @$ y7 p. o, q7 J( ?+ r
指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象:
实例
( n$ \$ }* Y# W
! p: u1 L7 k3 r+ s+ l
  1. <div id="app">+ e2 [4 E1 u" M' q( A2 A
  2.     <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>1 @# h$ h$ X  [% U' v+ N6 t- s: @
  3. </div>
      _/ l/ ?- j, x) S2 q( l% _
  4. $ a0 u- i; J9 P( }. S1 w2 d( O& V
  5. <script>. t, J8 X1 F; m1 G( q8 F/ K/ s2 v
  6. Vue.directive('runoob', function (el, binding) {5 [& @8 K' O, h  O3 L% s
  7.     // 简写方式设置文本及背景颜色
      A8 I; e( o: s; Z! |( f: R
  8.     el.innerHTML = binding.value.text
    + W- p; Z& z& e, L
  9.     el.style.backgroundColor = binding.value.color; J3 h, d0 z& k1 s8 u; s2 [
  10. })
    . `% e2 X/ U- H! w1 ]
  11. new Vue({8 V1 f3 H" O  x
  12.   el: '#app'# M9 f9 `  V: s% Z# ^: T$ {, V
  13. }): U# r& B" u! ]
  14. </script>
复制代码
; f. J$ R2 q. `/ ~0 t/ m% E# Q: p; `
$ W6 K" |9 P, [- V  E

+ E* C) s3 o* O' l( @% H" L. C4 `
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-6-20 02:58 , Processed in 0.055715 second(s), 20 queries .

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