Vue的事件处理与BOM+DOM+js下的事件处理没有明显的差异，差别主要体现在规范化上。在模板或者DOM结构上绑定事件的指令是v-on或者@符号。事件的处理函数除了直接指定处理函数之外，还增加了对事件简易处理函数的内联处理方式。在事件上，Vue增加了事件修饰符，这些事件修饰符极大的丰富了事件处理的效果。Vue又是一种组件式的架构方式，事件和事件处理都是在组件内部进行的，这对事件的管理有很大的改善。

常用的通用事件修饰符：

.stop ：事件将停止传递

.prevent  ：阻止事件的默认行为

.self   ：仅当event.target是元素自身时才会触发事件

.capture   ：添加事件监听器时，使用capture捕获模式

.once  ：事件仅会触发一次

.passive  ：事件的默认行为将会立即发生而不是等待，一般用于触摸事件的监听器，常用于改善移动设备的滚屏性能

常用的按键事件修饰符：

.enter  ：捕获按键的输入操作

.tab

.delete  ：捕获“Delete”和“Backspace”两个按键的操作

.esc

.space

.up

.down

.left

.right

系统按键修饰符：

.ctrl

.alt

.shift

.meta  ：在window系统中代表window按键

.exact  ：允许控制触发一个事件所需的确定组合的系统按键修饰符。“.ctrl.exact”表示事件需要按下ctrl键且不按下其他按键时触发。

鼠标按键修饰符：

.left

.right

.middle

事件案例如下：

<script setup lang="ts">
import {computed, ref} from "vue"const count=ref(0);
const sum=ref(0);
const list=ref(["a","b","c"]);
list.value[1]="e";function increment(){count.value++;if(count.value>=3){list.value[count.value]="add";}
}//computed attribute
const size=computed(()=>{return list.value.length;
});
</script><template>
<button @click="increment">{{ count }}</button>
<button @click="sum++">{{ sum }}</button>
<div v-for="item in list" :key="item"><span>{{ item }}</span>
</div>
</template><style></style>