首页
技术小册
AIGC
面试刷题
技术文章
MAGENTO
云计算
视频课程
源码下载
PDF书籍
「涨薪秘籍」
登录
注册
第 7 章 处理用户交互
7.1 事件的监听与处理
7.1.1 事件监听示例
7.1.2 多事件处理
7.1.3 事件修饰符
7.2 Vue中的事件类型
7.2.1 常用的事件类型
7.2.2 按键修饰符
7.3 实战一：随鼠标移动的小球
7.4 实战二：弹球游戏
第 8 章 组件基础
8.1 关于Vue应用与组件
8.1.1 Vue应用的数据配置选项
8.1.2 定义组件
8.2 组件中数据与事件的传递
8.2.1 为组件添加外部属性
8.2.2 处理组件事件
8.2.3 在组件上使用v-model指令
8.3 自定义组件的插槽
8.3.1 组件插槽的基本用法
8.3.2 多具名插槽的用法
8.4 动态组件的简单应用
8.5 实战：开发一款小巧的开关按钮组件
第 9 章 组件进阶
9.1 组件的生命周期与高级配置
9.1.1 生命周期方法
9.1.2 应用的全局配置选项
9.1.3 组件的注册方式
9.2 组件props属性的高级用法
9.2.1 对props属性进行验证
9.2.2 props的只读性质
9.2.3 组件数据注入
9.3 组件Mixin技术
9.3.1 使用Mixin来定义组件
9.3.2 Mixin选项的合并
9.3.3 进行全局Mixin
9.4 使用自定义指令
9.4.1 认识自定义指令
9.4.2 自定义指令的参数
9.5 组件的Teleport功能
第 10 章 Vue响应性编程
10.1 响应性编程原理与在Vue中的应用
10.1.1 手动追踪变量的变化
10.1.2 Vue中的响应性对象
10.1.3 独立的响应性值Ref的应用
10.2 响应式的计算与监听
10.2.1 关于计算变量
10.2.2 监听响应式变量
10.3 组合式API的应用
10.3.1 关于setup方法
10.3.2 在setup方法中定义生命周期行为
10.4 实战：支持搜索和筛选的用户列表示例
10.4.1 常规风格的示例工程开发
10.4.2 使用组合式API重构用户列表页面
当前位置:
首页>>
技术小册>>
TypeScript和Vue从入门到精通(三)
小册名称：TypeScript和Vue从入门到精通(三)
### 7.2 Vue中的事件类型 在Vue.js框架中，事件处理是组件间通信和用户交互的重要组成部分。Vue通过其声明式的模板语法，使得在组件上监听和触发事件变得既直观又高效。本章将深入探讨Vue中的事件类型，包括原生DOM事件、组件自定义事件、事件修饰符以及如何在Vue中优雅地处理这些事件。 #### 7.2.1 原生DOM事件 Vue组件最终会渲染成DOM元素，因此，我们可以直接在Vue模板中监听这些DOM元素上的原生事件。Vue通过`v-on`指令（或其简写形式`@`）来监听DOM事件。这些事件遵循Web标准事件模型，包括但不限于点击（click）、鼠标移入（mouseover）、键盘按下（keydown）等。 **示例：监听点击事件** ```html <template> <button @click="handleClick">点击我</button> </template> <script> export default { methods: { handleClick() { alert('按钮被点击了！'); } } } </script> ``` 在这个例子中，当按钮被点击时，`handleClick`方法会被调用，弹出一个警告框。 **事件对象** Vue还允许你访问原生DOM事件对象。在方法内部，你可以通过`$event`这个特殊变量来访问它。 ```html <template> <button @click="handleKeyPress($event)">点击并查看事件对象</button> </template> <script> export default { methods: { handleKeyPress(event) { console.log(event); // 打印出事件对象 } } } </script> ``` #### 7.2.2 组件自定义事件 除了监听DOM原生事件外，Vue还允许我们定义和触发自定义事件，这在父子组件通信中尤其有用。自定义事件允许我们构建解耦的、可复用的组件。 **子组件触发自定义事件** 子组件可以通过`this.$emit`方法来触发自定义事件，并传递任意数量的数据给父组件。 ```vue <!-- ChildComponent.vue --> <template> <button @click="notifyParent">通知父组件</button> </template> <script> export default { methods: { notifyParent() { this.$emit('custom-event', '来自子组件的消息'); } } } </script> ``` **父组件监听自定义事件** 父组件在模板中通过`v-on`指令监听来自子组件的自定义事件。 ```vue <!-- ParentComponent.vue --> <template> <ChildComponent @custom-event="handleCustomEvent" /> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleCustomEvent(message) { console.log(message); // 输出：来自子组件的消息 } } } </script> ``` #### 7.2.3 事件修饰符 Vue提供了一系列事件修饰符，用于处理DOM事件时的常见需求，如阻止默认行为、阻止事件冒泡等。这些修饰符可以直接跟在`v-on`指令后使用。 - **.stop**：阻止事件冒泡 - **.prevent**：阻止默认行为 - **.capture**：使用事件捕获模式 - **.self**：只当事件在该元素本身（比如不是子元素）触发时触发处理函数 - **.once**：事件只触发一次 - **.passive**：表示监听器永远不会调用`preventDefault()` **示例：阻止表单提交** ```html <form @submit.prevent="onSubmit"> <!-- 表单内容 --> </form> <script> export default { methods: { onSubmit() { // 表单提交逻辑，但默认行为已被阻止 } } } </script> ``` **阻止事件冒泡** ```html <div @click="divClicked"> <button @click.stop="buttonClicked">点击我，但不要触发div的点击事件</button> </div> <script> export default { methods: { divClicked() { console.log('Div被点击了'); }, buttonClicked() { console.log('按钮被点击了，但div的点击事件不会触发'); } } } </script> ``` #### 7.2.4 按键修饰符 在监听键盘事件时，Vue允许我们通过按键修饰符来指定哪些按键会触发事件处理函数。Vue提供了一系列预设的按键修饰符，如`.enter`、`.esc`、`.tab`等，也支持自定义按键别名。 **示例：监听回车键** ```html <input @keyup.enter="submitForm" placeholder="按回车提交"> <script> export default { methods: { submitForm() { // 提交表单的逻辑 } } } </script> ``` #### 7.2.5 深入理解事件处理 在Vue中，事件处理不仅仅是简单的监听和响应。了解事件的生命周期、如何优雅地处理异步事件、以及如何在组件间通过事件进行有效通信，都是构建高效、可维护Vue应用的关键。 - **事件的生命周期**：理解事件的捕获阶段、目标阶段和冒泡阶段，有助于我们更精准地控制事件行为。 - **异步事件处理**：在事件处理函数中执行异步操作（如网络请求）时，需要注意处理可能的错误和更新UI的时机。 - **事件通信策略**：在大型应用中，合理使用事件进行组件间通信，可以避免不必要的状态管理复杂度，但也需要避免滥用导致的维护困难。 #### 总结 Vue中的事件类型丰富多样，从原生DOM事件到自定义组件事件，再到事件修饰符和按键修饰符，为开发者提供了强大的事件处理能力。通过合理利用这些事件类型，我们可以构建出响应迅速、交互流畅的Vue应用。然而，事件处理只是Vue框架中的一部分，要真正精通Vue，还需要深入理解其响应式系统、组件系统、路由管理、状态管理等核心特性。希望本章内容能为你的Vue学习之旅增添一份力量。
上一篇：
7.1.3 事件修饰符
下一篇：
7.2.1 常用的事件类型
该分类下的相关小册推荐：
TypeScript和Vue从入门到精通(一)
vuejs组件实例与底层原理精讲
TypeScript和Vue从入门到精通(四)
移动端开发指南
Vue.js从入门到精通(三)
Vue.js从入门到精通(四)
Vue3技术解密
Vue原理与源码解析
VUE组件基础与实战
Vue面试指南
TypeScript和Vue从入门到精通(五)
Vue.js从入门到精通(二)
