这个月开始重新开始学习Vue3，从理解基本使用到模拟实现！
本文是关于Vue的事件处理及相关修饰符
看文本篇，你将会对Vue的事件处理有个清晰的认识
本文目录结构如下：
监听事件
此处分3点来讲：
1. 可以使用 v-on 指令来监听事件
2. 触发事件时执行一些JS代码
3. 用法
用法如下：
v-on:click="xxx"
也可以使用简写模式@
@click="xxx"
注意：
xxx可以是一个js表达式，也可以是一个事件处理函数
一般使用第二种方式@
事件处理函数
此处分3点来讲：
1. 简介
通常事件处理逻辑比较复杂，所以我们会写成一个函数，这个函数就被称为事件处理函数，也叫事件处理器
2. 形式
如下代码
@click="methodName"
上面代码中，methodName就是事件处理函数，它会自动去组件实例身上找对应的函数
3. 注意
事件处理函数默认会传递原生event对象
处理函数可传递参数
可以像正常函数调用一样，给事件处理函数传递参数
如果需要访问原始的DOM事件，需手动传递$event，表示原生event
多个处理函数
vue支持一个事件多个处理函数
多个函数通过逗号分隔即可
事件修饰符
此处分一下8点来讲：
1. 简介
Vue为 v-on 提供了事件修饰符
2. 形式
以点开头
3. 几个常见修饰符
.stop
表示停止冒泡
.prevent
表示阻止默认事件
.capture
表示使用事件捕获模式
.self
表示当在event.target 是当前元素自身时触发处理函数
.once
表示事件只会触发一次
.passive
表示处理事件函数中不会调用preventDefault函数
4. 修饰符可以连续出现多个
形式，如：
v-on:click.prevent.self
注意：多个修饰符顺序不同，效果会不一样
5. 按键修饰符
.enter
表示当按下键盘的Enter键时触发
.tab
表示按下Tab键时
.delete
表示按下删除或退格键时
.esc
表示按下Esc时
.space
表示按下空格时
.up
表示按向上箭头时
.down
表示按向下箭头时
.left
表示按向左箭头时
.right
表示按向右箭头时
除此以外，还可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符，比如：
<input @keyup.page-down="onPageDown" />
6. 系统修饰键
系统修饰符其实就是按下ctrl或alt或shift或meta，同时按下某个键时，才触发
例如:
<!-- Alt + Enter -->
<input @keyup.alt.enter="xxx" />
需要注意修饰符的顺序
7. .exact 修饰符
用于更精准的控制修饰符
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
8. 鼠标按钮修饰符
.left
左键
.right
右键
.middle
中间滚轮
使用v-on的好处
扫一眼模板便能轻松定位在
js中对应的方法因为你无须在
JS里手动绑定事件，你的ViewModel代码可以是非常纯粹的逻辑，和DOM完全解耦，更易于测试无须担心如何清理它们；
当一个ViewModel被销毁时，所有的事件处理器都会自动被删除
END~
以上就是事件相关的所有内容
如有问题，欢迎留言告知，感谢~
为了方便下载，我将相关的高清思维导图及源文件上传至GitHub，可移步下载：https://github.com/jCodeLife/mind-map
