前言

这是我在掘金坚持日更的第 39 天

这个月开始重新开始学习Vue3，从理解基本使用到模拟实现！

本系列相关文章如下：

基础类

1. 理解应用实例和组件实例 | 重学Vue3
2. 理解模板语法 | 重学Vue3
3. 深入理解配置选项之data和methods| 重学Vue3
4. 理解计算属性和监听器 | 重学Vue3
5. 绑定class和内联样式style | 重学Vue3
6. 理解条件渲染 | 重学Vue3
7. 理解列表渲染 | 重学vue3

手写实现类

1. 模拟实现Vue3初始化流程
2. 模拟实现所有Vue3响应式API（上）

本文是第9篇，关于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对象

处理函数可传递参数

1. 可以像正常函数调用一样，给事件处理函数传递参数

2. 如果需要访问原始的DOM事件，需手动传递$event，表示原生event

多个处理函数

1. vue支持一个事件多个处理函数

2. 多个函数通过逗号分隔即可

事件修饰符

此处分一下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的好处

1. 扫一眼模板便能轻松定位在js中对应的方法

2. 因为你无须在 JS 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试

3. 无须担心如何清理它们；
   当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除

总结

为了方便以后查看，我将所有内容总结为一图

END~

以上就是事件相关的所有内容

如有问题，欢迎留言告知，感谢~