Vue.js 事件处理器

admin

事件监听可以使用 v-on 指令：

v-on
7 ~% |. x# c+ u8 f- |

1. <div id="app">
   , \% M/ @' j2 q& M( v6 ^' {: |4 T( u) _
2.   <button v-on:click="counter += 1">增加 1</button>
   
3.   <p>这个按钮被点击了 {{ counter }} 次。</p>
   
4. </div>
   
5. 
   , \/ @; o. @/ V) L: Z
6. <script>
   
7. new Vue({
   
8.   el: '#app',
   
9.   data: {
   3 T5 A3 A% o- a* n9 ?" q
10.     counter: 0
    - n: ]: }9 b9 U* @) A
11.   }
    
12. })
    6 L0 g% V. t( p2 T& m; v( p! \. ]
13. </script>

复制代码

通常情况下，我们需要使用一个方法来调用 JavaScript 方法。

v-on 可以接收一个定义的方法来调用。

v-on
2 ^1 T  Y' l8 H3 l; \

1. <div id="app">
   
2.    <!-- `greet` 是在下面定义的方法名 -->
   + R6 M" x* [% ~3 D  S, l* R
3.   <button v-on:click="greet">Greet</button>
   9 c" C+ t5 V# `
4. </div>
   * R) a- U  O2 X9 w% }4 z
5. 
   4 b( ~. g, E1 O/ m) T
6. <script>
   ! i7 S' d/ i( {* p& a  d
7. var app = new Vue({
   - L4 w' w. R6 g2 e( w0 A+ k
8.   el: '#app',
   
9.   data: {
   3 ]! O0 K+ D0 {
10.     name: 'Vue.js'
    ( b/ V+ w+ m. z0 P
11.   },
    
12.   // 在 `methods` 对象中定义方法
    2 L- c1 I4 [( c4 ?' _: O2 G
13.   methods: {
    $ j1 Y7 }2 ~7 l$ U* T% u2 z8 {
14.     greet: function (event) {
    - `4 S* c9 V- p' n  k% \
15.       // `this` 在方法里指当前 Vue 实例
    
16.       alert('Hello ' + this.name + '!')
    4 q# S) E+ o) ^' k7 x8 A3 x, j0 s% g
17.       // `event` 是原生 DOM 事件
    / J5 u: X4 r, ?" I
18.       if (event) {
    5 C5 X5 K% ^5 R$ q. Y
19.           alert(event.target.tagName)
    : \, d$ W3 K: C1 s/ D
20.       }
    9 c$ w1 J6 ?1 @+ p" j! l4 s
21.     }
    
22.   }
    & h" U' w+ N7 x
23. })
    
24. // 也可以用 JavaScript 直接调用方法
    $ [& p% C4 l& n2 t, Y/ I
25. app.greet() // -> 'Hello Vue.js!'
    : _( q# i% y" F6 G4 s
26. </script>

复制代码

除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

v-on
1 l0 p& C" Q: ]5 D7 q4 D

1. <div id="app">
   
2.   <button v-on:click="say('hi')">Say hi</button>
   ( q* |1 o" ^1 [& K/ x1 Z3 K
3.   <button v-on:click="say('what')">Say what</button>
   # J0 k; H" A& r4 G6 S7 c4 e6 o- C
4. </div>
   
5. 
   + B# G: R0 [" [; Y, l# l9 z9 @5 f
6. <script>
   
7. new Vue({
   & i5 Q" W. d/ o  Q8 v. l
8.   el: '#app',
   4 x! p; X/ T; E4 U7 `
9.   methods: {
   5 s5 g0 m3 I% y6 J
10.     say: function (message) {
    
11.       alert(message)
    
12.     }
    ( {5 ~: b" H9 p+ }6 M% j
13.   }
    ( m0 h0 i. ^1 T' g$ x/ A
14. })
    " c' ^8 U; D6 V8 q9 w
15. </script>

复制代码

事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js通过由点(.)表示的指令后缀来调用修饰符。

• .stop
• .prevent
• .capture
• .self
• .once
  ) V' E8 b+ r+ x! p+ J$ B$ Y" n

1. <!-- 阻止单击事件冒泡 -->
   , h4 [; a6 ]% {. }# e% y; E' C
2. <a v-on:click.stop="doThis"></a>
   
3. <!-- 提交事件不再重载页面 -->
     j0 g+ D1 J) r& u
4. <form v-on:submit.prevent="onSubmit"></form>
   ; y' z7 v; H0 O6 A$ T) ^: c
5. <!-- 修饰符可以串联  -->
   
6. <a v-on:click.stop.prevent="doThat"></a>
   4 E! ^$ t# S  ~1 e
7. <!-- 只有修饰符 -->
   
8. <form v-on:submit.prevent></form>
   
9. <!-- 添加事件侦听器时使用事件捕获模式 -->
   & K) |! \& o2 T- `; g7 P5 f9 q
10. <div v-on:click.capture="doThis">...</div>
    ' u* A1 Y* I) G+ x7 o9 B
11. <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
    
12. <div v-on:click.self="doThat">...</div>
    
13. 
    " \1 w" p# Q; U+ ]. y( C
14. <!-- click 事件只能点击一次，2.1.4版本新增 -->
    
15. <a v-on:click.once="doThis"></a>

复制代码

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

1. <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
   ' L$ B2 B, G7 ~/ p( ?" c  d. [
2. <input v-on:keyup.13="submit">

复制代码

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

1. <!-- 同上 -->
   % b+ T. r6 B# a: S( _& x! @
2. <input v-on:keyup.enter="submit">
   2 R. ]- C6 Z9 a
3. <!-- 缩写语法 -->
   ( B9 |$ I7 p  V/ l0 b7 `
4. <input @keyup.enter="submit">

复制代码

全部的按键别名：

• .enter
• .tab
• .delete (捕获 "删除" 和 "退格" 键)
• .esc
• .space
• .up
• .down
• .left
• .right
• .ctrl
• .alt
• .shift
• .meta
  4 Q, Q7 M% O" }$ ^* s2 m3 G1 f, ^

实例

" R9 u( z9 h* b! ]! Z5 ?

1. <p><!-- Alt + C -->
   & M6 ^* y$ v' x) J. m- l
2. <input @keyup.alt.67="clear">
   
3. <!-- Ctrl + Click -->
   
4. <div @click.ctrl="doSomething">Do something</div>

复制代码

computed 对象内的方法如果在初始化时绑定到元素上的事件会先执行一次这个方法 ，而 methods 内的方法则不会；例如以下实例初始化时会自动执行一遍 name1 和 greet 这两个方法：
$ y' q, r: [. e: D6 ^( ]" W7 M

1. var app = new Vue({
   
2.     el: '#app',
   
3.     data: {
   1 U& e( I+ ]/ a+ t4 d
4.         name: 'Vue.js'
   
5.     },
   
6.     // 在 `methods` 对象中定义方法
   3 Z7 h$ x+ [; l+ D# v
7.     computed: {
   
8.         name1: function(){  alert('222') },
   
9.         greet: function (event) {
   - k% J) Q# A7 E- P1 E
10.             // `this` 在方法里指当前 Vue 实例
    - r3 G- d! S  I5 v9 F( s
11.             alert('Hello ' + this.name + '!')
    
12.             // `event` 是原生 DOM 事件
    6 n  x1 N6 Q9 ]4 [
13.             if (event) {
    + Q7 `& @6 p5 y7 _7 {' _0 P+ U, X8 p
14.                 alert(event.target.tagName)
    
15.             }
    1 p7 N! Y- \8 o! G
16.         }
    
17.     }
    
18. })
    . S. b) C6 ]. S; }. R. `" q
19. // 也可以用 JavaScript 直接调用方法

复制代码

4 {, G* I; M: x. Q4 [. w
, S7 B: r% k% E+ o: q* I. P
# [, K" `3 {- J" K, \7 Y
. X8 o9 t9 q+ ]. ?9 @4 }
; p! y# e/ X0 g6 ?: L