持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情juejin.cn/post/714765…
监听事件
我们可以使用v-on指令（简写为@）来监听DOM事件，并在事件触发时执行对应的js。用法：v-on:click="methodName"或@click="handler"。
事件处理器的值可以是：
- 内联事件处理器：事件被触发时执行的内联js语句（与onclick类似）
- 方法事件处理器：一个指向组件上定义的方法的属性名或是路径
内联事件处理器
内联事件处理器通常用于简单场景。如下：
方法事件处理器
随着事件处理器的逻辑变得复杂，内联代码方式变得不够灵活，因此v-on也可以接收一个方法名或对某个方法的调用。
tagName 属性返回元素的标签名。在 HTML 中，tagName 属性的返回值始终是大写的。
在内联处理器中调用方法
除了直接绑定方法名，还可以在内联事件处理器中调用方法，允许我们向方法 传入自定义参数以替代原生事件。
在内联事件处理器中访问事件参数
有时我们需要在内联事件处理器中访问原生DOM事件，可以向该处理器方法传入一个特殊的$event变量，或者使用内联箭头函数。
修饰符
事件修饰符
注意：使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用@click.prevent.self会阻止元素及其子元素的所有点击事件的默认行为而@click.self.prevent则只会阻止对元素本身的点击事件的默认行为。
.capture、.once 和 .passive 修饰符与[原生 addEventListener 事件]相对应：
按键修饰符
你可以直接使用 [KeyboardEvent.key]暴露的按键名称作为修饰符，但需要转为 kebab-case 形式。
按键别名
系统按键修饰符
.exact修饰符
exact修饰符允许控制触发一个事件所需的确定组合的系统按钮修饰符（精确）
鼠标按键修饰符
middle通常指的是滚轮：
相对于vue2来说，vue3删除了v-on.native修饰符
同时新的emits选项允许自己定义它确实发出那些事件，因此，vue现在会将所有未定义为子级中组件发出的事件侦听器作为本季事件侦听器添加到子元素的根元素中（除非已在自相选项中设置）
