携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第二十五天，点击查看活动详情
前言
当我们需要监听页面的DOM事件的时候，我们可以使用vue提供的v-on指令来进行监听，当然也可以使用简写形式@，然后出入相应的JavaScript代码。
事件处理
事件处理器的值分为两类：
-
内联事件处理器：事件被触发时执行的内联 JavaScript 语句。
-
方法事件处理器：一个指向组件上定义的方法的属性名或是路径。
内联事件处理器
内联事件处理器常用于一些业务场景逻辑简单的地方。例如：
const num = ref(0)
<button @click="num++">Add 1</button>
<p>数值： {{ num }}</p>
方法事件处理器
当业务场景复杂的时候，内联的方式无法清晰简明的解决问题的时候。就可以通过使用方法事件处理器的形式，只需要传递一个 方法名，就会完成对该方法的调用。
const num = ref('0')
function add(event) {
// `event` 是 DOM 原生事件
if (event) {
console.log(event.target.tagName)
}
}
<button @click="add">数值：{{num}}</button>
方法事件处理器接受的第一个参数为DOM的原生事件。通过event.target.tagName可以访问到该元素
vue会通过检查v-on的值来判断是何种事件处理器。而像直接传递方法的，例如：add就是方法事件处理器。像add（）和num++这种形式的就会判为内联事件处理器。
在内联事件处理器中访问事件参数
当我们使用内联处理器的时候也想访问原生DOM事件的时候，可以通过$event变量的形式，或者箭头函数的形式来实现。
<!-- 使用 $event 变量 -->
<button @click="add('0', $event)">
Submit
</button>
<!-- 使用箭头函数 -->
<button @click="(event) => add('0', event)">
Submit
</button>
function add(value, event) {
if (event) {
event.preventDefault()
}
console.log(value)
}
