Vue3基础+代码语法+例子大全（五）——事件处理

参考官网：​​​​​​Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

七、事件处理

1、监听事件

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="methodName" 或 @click="handler"。

事件处理器的值可以是：

内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。

方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

2、内联事件处理器

内联事件处理器通常用于简单场景，例如：

data(){
    return{
        counter:0
    }
}

<!-- 点击‘counter’内容，点一次，数字就+1 -->
<h2 @click="counter++">{
  {counter}}</h2>

3、方法事件处理器

随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用。例如：

data(){
    return{
        counter:0
    }
},
methods:{
    addCounter(){   //用number进行接收
    this.counter ++
}

<!-- 绑定事件:没有传递参数 -->
<h2 @click="addCounter">{
  {counter}}</h2>

4、在内联处理器中调用方法

除了直接绑定方法名，还可以在内联事件处理器中调用方法。例如：

data(){
    return{
        counter:0