前言
当我们需要监听页面的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) }
