可以使用v-on指令来监听事件，并在事件触发时执行对应的逻辑

一、基础使用

使用下述代码替换 app.vue中的代码：

<script setup>
import {ref} from "vue";

// 必须要用ref对声明的变量进行包裹才能改变count的值,
// script 中调用被ref包裹的值的时候, 需要使用.value
// template 中调用被ref包裹的值的时候, 直接调用即可
const count =ref(0)
</script>

<template>
    <!--常规写法：v-on-->
    <button v-on:click="count++">递增</button>
    <!--简写：@-->
    <button @click="count--">递减</button>

    <h3>{{count}}</h3>
</template>

二、 绑定函数

使用下述代码替换 app.vue中的代码：

<script setup>
import {ref} from "vue";

// 必须要用ref对声明的变量进行包裹才能改变count的值,
// script 中调用被ref包裹的值的时候, 需要使用.value
// template 中调用被ref包裹的值的时候, 直接调用即可
const count =ref(0)

// 没有参数传递的方法
function add() {
    count.value++
}

// 带参数传递的方法
function reduce(parm) {
    count.value = count.value - parm
}
</script>

<template>
    <!--绑定方法-->
    <button @click="add">递增</button>
    <!--绑定带参数传递的方法-->
    <button @click="reduce(2)">递减</button>

    <h3>{{count}}</h3>
</template>

三、事件修饰符

事件修饰符，简单来讲就是事件的细分操作。如上述的用到的click事件来说，可以用click.left和click.right来定义是左键点击生效还是右键点击生效

前往前往官网

1、常用事件修饰符

修饰符	说明
.stop	点击事件将停止传递
.prevent	提交事件不重新加载页面元素
.self	事件处理器不来自于子元素
.capture	添加事件监听器时，使用capture捕获模式
.once	事件只触发一次
.passive	滚动事件的默认行为将立即发生而非等待

2、按键修饰符

修饰符	说明
下述修饰符	一般用在click事件后
.left	鼠标左键
.right	鼠标右键
.middle	鼠标中键
下述修饰符	一般用在keuup后
.enter	键盘的回车键
.esc	键盘的esc键
.space	键盘的空格键
.delete	键盘的delete和backspace
.tab	键盘的制表符键
.alt	键盘的Alt
.meta	mac上是```Command（⌘）`键
.ctrl	键盘的ctrl
.shift	键盘的shift
下述修饰符	一般用在click事件后
.up	按下，可以是鼠标，也可以是按键
.down	弹起，可以是鼠标，也可以是按键

一些按键修饰符的使用示例

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>

上述的的按键修饰符只要被触发就会执行对应绑定的函数。比方说我只使用了一个click.left绑定了一个函数。此时下述两种情况都会触发绑定函数

• 鼠标左键点击绑定了该事件的按钮
• 按住其他按键的情况下使用鼠标左键点击绑定了该事件的按钮

如果只想要第一种情况的时候才可以触发按键事件，需要使用.exact修饰符

<!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>