首页
技术小册
AIGC
面试刷题
技术文章
MAGENTO
云计算
视频课程
源码下载
PDF书籍
「涨薪秘籍」
登录
注册
4.1 v-if指令
4.1.1 基本用法
4.1.2 判断一组元素
4.2 v-else指令
4.3 v-else-if指令
4.4 v-show指令
4.5 如何选择v-if和v-show
5.1 遍历数组
5.1.1 基本用法
5.1.2 循环一组元素
5.1.3 更新数组
5.2 遍历对象
5.2.1 基本用法
5.2.2 向对象中添加响应式属性
5.3 遍历整数
5.4 key属性
6.1 计算属性
6.1.1 计算属性简介
6.1.2 计算属性的应用
6.1.3 计算属性的getter和setter
6.1.4 计算属性的缓存
6.2 监听属性
6.2.1 监听属性简介
6.2.2 监听属性的应用
6.2.3 监听对象
6.3 计算属性和监听属性的比较
7.1 class绑定
7.1.1 对象语法
7.1.2 数组语法
7.2 style绑定
7.2.1 对象语法
7.2.2 数组语法
8.1 监听事件
8.2 事件处理方法
8.2.1 绑定方法
8.2.2 使用事件对象
8.2.3 使用内联语句
8.3 修饰符的使用
8.3.1 事件修饰符
8.3.2 按键修饰符
9.1 文本框绑定
9.1.1 单行文本框
9.1.2 多行文本框
9.2 复选框绑定
9.2.1 单个复选框
9.2.2 多个复选框
9.3 单选按钮绑定
9.4 下拉列表框绑定
9.4.1 单选列表框
9.4.2 多选列表框
9.5 值绑定
9.5.1 单选按钮
9.5.2 复选框
9.5.3 下拉列表框
9.6 修饰符的使用
9.6.1 lazy
9.6.2 number
9.6.3 trim
当前位置:
首页>>
技术小册>>
Vue.js从入门到精通(二)
小册名称:Vue.js从入门到精通(二)
### 8.1 监听事件 在Vue.js中,监听事件是组件与用户交互不可或缺的一部分。事件监听允许我们在用户执行特定操作(如点击、输入、滚动等)时执行相应的代码逻辑,从而增强应用的交互性和动态性。本章将深入探讨Vue.js中的事件监听机制,包括基础事件监听、修饰符的使用、事件对象处理、自定义事件以及组件间的事件通信等。 #### 8.1.1 基础事件监听 Vue.js通过`v-on`指令(或其简写形式`@`)来监听DOM事件。当在模板中绑定事件时,可以指定一个处理函数或表达式,该函数将在事件发生时被调用。 **示例代码**: ```html <template> <div> <!-- 使用v-on监听点击事件 --> <button v-on:click="handleClick">点击我</button> <!-- 使用@简写形式 --> <button @click="handleClick">或点击我</button> </div> </template> <script> export default { methods: { handleClick() { console.log('按钮被点击了!'); } } } </script> ``` 在这个例子中,当用户点击任一按钮时,都会调用`handleClick`方法,从而在控制台输出消息。 #### 8.1.2 事件修饰符 Vue.js提供了一系列事件修饰符,用于处理DOM事件的细节,如阻止默认行为、阻止事件冒泡等,无需在方法中编写额外的JavaScript代码。 - **.stop**:阻止事件冒泡。 - **.prevent**:阻止事件的默认行为。 - **.capture**:使用事件捕获模式。 - **.self**:只当事件在该元素本身(而不是子元素)触发时触发处理函数。 - **.once**:事件只触发一次。 - **.passive**:表示监听器永远不会调用`preventDefault()`。 **示例代码**: ```html <template> <div @click="divClicked"> <button @click.stop.prevent="buttonClicked">点击我,但事件不会冒泡也不会执行默认行为</button> </div> </template> <script> export default { methods: { buttonClicked() { console.log('按钮被点击了,但事件不会冒泡'); }, divClicked() { console.log('外层div被点击了'); // 这行不会被执行 } } } </script> ``` #### 8.1.3 事件对象 Vue.js的事件处理方法默认接收一个事件对象作为参数,你可以通过这个对象访问到事件的详细信息,如事件类型、触发事件的元素等。 **示例代码**: ```html <template> <button @click="handleClickWithEvent">点击我,并查看事件对象</button> </template> <script> export default { methods: { handleClickWithEvent(event) { console.log(event.type); // 输出 'click' console.log(event.target); // 输出触发事件的DOM元素 } } } </script> ``` #### 8.1.4 自定义事件 在Vue.js中,除了监听原生DOM事件外,还可以自定义事件,用于组件间的通信。子组件可以通过`$emit`方法触发事件,父组件监听这些事件来响应子组件的状态变化。 **子组件**: ```html <!-- ChildComponent.vue --> <template> <button @click="notifyParent">通知父组件</button> </template> <script> export default { methods: { notifyParent() { this.$emit('custom-event', '来自子组件的消息'); } } } </script> ``` **父组件**: ```html <template> <div> <child-component @custom-event="handleCustomEvent"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleCustomEvent(message) { console.log(message); // 输出:来自子组件的消息 } } } </script> ``` #### 8.1.5 组件间的事件通信进阶 随着Vue应用复杂度的增加,组件间的通信变得更加重要和复杂。除了简单的父子组件通信外,Vue.js还支持通过全局事件总线(Event Bus)、Vuex状态管理库、provide/inject API等多种方式实现跨组件通信。 - **全局事件总线**:创建一个空的Vue实例作为事件总线,通过`$on`、`$emit`和`$off`方法实现跨组件通信。 - **Vuex**:专为Vue.js应用程序开发的状态管理模式库,集中存储所有组件的共享状态,并以相应的规则保证状态以一种可预测的方式发生变化。 - **provide/inject**:主要用于高阶插件/组件库的开发,允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起始组件和注入组件之间建立起响应式联系。 #### 8.1.6 小结 事件监听是Vue.js中处理用户交互的重要机制。通过`v-on`指令或`@`简写形式,我们可以轻松地为DOM元素绑定事件监听器,并通过事件修饰符简化事件处理逻辑。同时,Vue.js还支持自定义事件,使得组件间的通信变得更加灵活和强大。掌握事件监听和组件间通信,是开发高效、可维护Vue.js应用的基石。 在未来的开发中,你可能还会遇到更复杂的场景,如需要跨多层级的组件通信、管理全局状态等。此时,可以考虑使用Vuex状态管理库、全局事件总线或Vue的provide/inject API等高级特性来解决问题。通过这些工具,你可以构建出更加灵活、可扩展的Vue.js应用。
上一篇:
7.2.2 数组语法
下一篇:
8.2 事件处理方法
该分类下的相关小册推荐:
Vue原理与源码解析
TypeScript和Vue从入门到精通(五)
TypeScript和Vue从入门到精通(二)
TypeScript和Vue从入门到精通(四)
VUE组件基础与实战
Vue.js从入门到精通(四)
vue项目构建基础入门与实战
TypeScript和Vue从入门到精通(三)
vuejs组件实例与底层原理精讲
Vue3技术解密
Vue.js从入门到精通(一)
TypeScript和Vue从入门到精通(一)