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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[Vue.js] Vue.js 事件处理器

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-4 11:15:27 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
事件监听可以使用 v-on 指令:
v-on% O9 Z, A9 \* u" W& T
  1. <div id="app">
    . w1 W2 m9 j0 K9 P0 B
  2.   <button v-on:click="counter += 1">增加 1</button>1 _9 d- W* r1 F5 Z
  3.   <p>这个按钮被点击了 {{ counter }} 次。</p>
    % F2 c. I$ d" W: |
  4. </div>+ e; T) x" Q7 X8 w1 T. X4 ]; m
  5. / w2 W% B/ Z7 O6 B
  6. <script>
    2 |% I4 R, v( A! {
  7. new Vue({
    0 n8 [; s5 Z5 S& P
  8.   el: '#app',. K0 o% J! Q$ [  _: |9 C5 J
  9.   data: {
    . \5 n" V9 P# l; g
  10.     counter: 0
    $ s* ~* {" T% @8 f
  11.   }
    , s) q3 @" u! S! e) _- C
  12. })5 ]1 m' q7 q3 l
  13. </script>
复制代码
通常情况下,我们需要使用一个方法来调用 JavaScript 方法。
v-on 可以接收一个定义的方法来调用。
v-on
# l& J' o3 `, e2 Q% d$ j' I: q
  1. <div id="app">
    - ]6 X# {1 d& Q) y8 R2 U+ [/ B  N
  2.    <!-- `greet` 是在下面定义的方法名 -->
    5 G4 a1 p7 J' r$ W2 j
  3.   <button v-on:click="greet">Greet</button>
    ) T! v/ v$ J: W5 n4 D& n
  4. </div>7 \5 g0 g" N8 `
  5. ( E! d3 V7 T7 `/ V
  6. <script>8 F& S  B$ }2 P) Y9 {
  7. var app = new Vue({# Y+ b4 c! n% [) G; y- H
  8.   el: '#app',; L  H! v. w$ H! v* i
  9.   data: {+ N% n/ p4 V) V. S3 _# n3 _) I& j9 b
  10.     name: 'Vue.js'" z/ o5 \3 e+ y, S
  11.   },
    ; h2 F3 e! h0 |
  12.   // 在 `methods` 对象中定义方法' h* Z6 w* v" a& o4 |; I# q
  13.   methods: {
    % z" d' O& y1 H
  14.     greet: function (event) {
    & B' z2 n1 c! ]6 ~+ r  a
  15.       // `this` 在方法里指当前 Vue 实例
    + M3 u4 P5 c" Y( O" s/ K
  16.       alert('Hello ' + this.name + '!')
    * I, q- T8 C& U. h+ i% h0 Q' O
  17.       // `event` 是原生 DOM 事件
    * I' V; J8 R9 `) R5 w9 {$ T
  18.       if (event) {
    4 F* T  h9 b% G6 J
  19.           alert(event.target.tagName)" Z% |" q; j; {7 m/ s
  20.       }% G8 l3 j: {- u9 i* d* d
  21.     }5 {! R+ b* \5 y' E. R' Z
  22.   }4 h( B' N  B! }/ T! O- \, J: m
  23. })
    6 ~5 y5 P/ a* S8 P% n3 V* D1 ^& {
  24. // 也可以用 JavaScript 直接调用方法$ N3 r7 s; p) j% ]1 N; Q* @, [
  25. app.greet() // -> 'Hello Vue.js!'
    ; c3 M) D) ?& s1 J) s. g
  26. </script>
复制代码
除了直接绑定到一个方法,也可以用内联 JavaScript 语句:
v-on
0 B1 q! \- Z1 |, Y+ A' k
  1. <div id="app">" u2 {3 o9 a. M* p0 z8 Q8 A& `
  2.   <button v-on:click="say('hi')">Say hi</button># E& U# _* z4 d, G, O" z% ^
  3.   <button v-on:click="say('what')">Say what</button>" c  b9 |5 c2 c. F  }3 m
  4. </div>- R/ w" J* k- Y# m/ j6 \. T- P
  5. 0 g1 D7 Z. x2 b' }" U: _
  6. <script>
    4 T! T: t+ C6 A. p
  7. new Vue({
    " H5 A/ ]" r: }. k
  8.   el: '#app',
    " L% K& C$ x* O9 a
  9.   methods: {8 }5 a5 z. H- @
  10.     say: function (message) {1 A: D# i7 ~, U1 ]7 ?5 ~  F8 Z
  11.       alert(message)3 d% O7 m" V8 L+ b+ E1 N7 ?
  12.     }
    6 d9 d5 k& Q$ Y7 ~- K
  13.   }+ ]6 T2 y( \+ q9 J" `3 T
  14. })
    , U5 O" e) |3 ~9 D  [2 {: _
  15. </script>
复制代码
事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
  • .stop
  • .prevent
  • .capture
  • .self
  • .once
    " s. t% |( u8 h! ^% ?" F
  1. <!-- 阻止单击事件冒泡 -->3 ^5 H& [$ J8 k4 X) |1 Y; ^& K
  2. <a v-on:click.stop="doThis"></a>
    4 u) u) W( x1 A: B7 g3 R
  3. <!-- 提交事件不再重载页面 -->- U0 {0 c5 a  I$ K9 S3 r5 z8 V
  4. <form v-on:submit.prevent="onSubmit"></form>
    : E" [; h6 o! J, G, C1 ]4 v
  5. <!-- 修饰符可以串联  -->% j5 T0 n- O$ H9 w. C! q
  6. <a v-on:click.stop.prevent="doThat"></a>
    # f, V3 Q5 @! R9 l
  7. <!-- 只有修饰符 -->
    # a  L6 e" j( |6 U, {! |
  8. <form v-on:submit.prevent></form>5 k7 }; Q4 j4 u4 C2 H$ l: H
  9. <!-- 添加事件侦听器时使用事件捕获模式 -->
    5 I6 `4 D; e$ t$ ]! R4 u) c' ?8 b
  10. <div v-on:click.capture="doThis">...</div>
    # y) C- X" o& s  B" R
  11. <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->6 ]6 t; k; X! V; J, D/ D& ]- S8 d
  12. <div v-on:click.self="doThat">...</div>+ v7 H- y6 `- O& ^9 [# }  ~

  13. % h  a5 y; |3 W: b8 z  `/ |) e
  14. <!-- click 事件只能点击一次,2.1.4版本新增 -->
    ! W8 x3 T- u* h* K
  15. <a v-on:click.once="doThis"></a>
复制代码
按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
  1. <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->( f8 X" c* A1 z: N
  2. <input v-on:keyup.13="submit">
复制代码
记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:" X. m8 k5 _( L' b
  1. <!-- 同上 -->
      r" e+ e" p3 I" z( B+ y0 r# j6 ]
  2. <input v-on:keyup.enter="submit">
    & z; i' A2 P) r) f, Q
  3. <!-- 缩写语法 -->
    % h. k: @; ]/ ]& Q; e
  4. <input @keyup.enter="submit">
复制代码
全部的按键别名:
  • .enter
  • .tab
  • .delete (捕获 "删除" 和 "退格" 键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
  • .ctrl
  • .alt
  • .shift
  • .meta+ f  `% {! G# P& V3 `" m8 H
实例
8 a) b+ Z" n: H% G* V
  1. <p><!-- Alt + C -->9 _# [- A' O/ j* I5 C: d4 U, q" K
  2. <input @keyup.alt.67="clear">. Y; S! B/ \( @' h
  3. <!-- Ctrl + Click -->
    $ _( I0 z! C2 Q% k, u( Z
  4. <div @click.ctrl="doSomething">Do something</div>
复制代码
computed 对象内的方法如果在初始化时绑定到元素上的事件会先执行一次这个方法 ,而 methods 内的方法则不会;例如以下实例初始化时会自动执行一遍 name1 和 greet 这两个方法:6 O9 n- O  \: u& T
  1. var app = new Vue({
    0 w7 Q9 \/ m1 W1 N. _+ u
  2.     el: '#app',2 p  W& z0 p# z9 _7 m6 G% _
  3.     data: {3 {; C. u. G6 m  w' I
  4.         name: 'Vue.js'6 L# ?! U1 x- O3 L
  5.     },
      o. J2 A# \' i- N
  6.     // 在 `methods` 对象中定义方法% C; }4 c+ d% c( b
  7.     computed: {
    7 v4 K1 l2 P4 c" O+ ^" o/ ]% r2 X
  8.         name1: function(){  alert('222') },# ~- h7 N% u' T; {/ ]) E0 h& X. u- y
  9.         greet: function (event) {) T; C* Q! r$ |8 P* \: a
  10.             // `this` 在方法里指当前 Vue 实例" D& ?, ]. N( G
  11.             alert('Hello ' + this.name + '!')
    % w4 e% Y" d+ u& Q0 G
  12.             // `event` 是原生 DOM 事件
    5 J( r6 o7 T9 [5 w0 E" }. _
  13.             if (event) {
      O0 O1 S: O9 H8 t! m- l
  14.                 alert(event.target.tagName)
    # r) ]+ [6 t% g+ ~, |# x
  15.             }; W0 @: b5 N) G* R
  16.         }7 |; @) a. U" f" N( W5 @
  17.     }7 M9 b) A% R; c4 f; ~2 _/ |# @' d
  18. })" k9 \1 Y6 F  n: s) F  a. r2 O
  19. // 也可以用 JavaScript 直接调用方法
复制代码
+ G2 ]# l0 |  q1 z

# T  A& b, H$ }; F8 P
' U/ K2 j8 G# t: I6 b) n0 X+ w' V) E! s6 P* v1 t

' C; {9 N; U" r. T& X: r& H
* b) L$ Y& D, L' J; w# r
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-8-4 10:47 , Processed in 0.055936 second(s), 19 queries .

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