Vue.js中如何使用事件？如何监听事件？

在 Vue.js 中,使用 v-on 指令来监听事件和触发方法。基本语法如下:

html
<button v-on:click="doSomething">...</button>

v-on 缩写为 @:

html 
<button @click="doSomething">...</button>

使用事件的示例:

html
<button @click="counter += 1">Add 1</button>

<button @click="doSomething()">...</button>

<button @click="doSomething('some arg')">...</button>

监听事件的语法:

1. 不传递参数:

html
<button @click="doSomething">...</button>

js
methods: {
  doSomething() {
    // ...
  }  
} 

2. 传递事件对象(event)作为参数:

html  
<button @click="doSomething(event)">...</button> 

js
methods: {
  doSomething(event) { 
    // event 是原生 DOM 事件
  }  
}  

3. 使用 $event 变量:

html
<button @click="doSomething($event)">...</button>

4. 传入其他参数:

html
<button @click="doSomething(otherArgs)">...</button>

js
methods: {
  doSomething(otherArgs) {
    // ...
  }  
}

5. 阻止事件冒泡使用 .stop 修饰符:

html
<button @click.stop="doSomething">...</button>

6. 其他修饰符:
   .prevent、.self、.once 等。
   Vue.js 通过 v-on 或 @ 监听 DOM 事件,并在触发时执行相应的 JavaScript 方法。