首页
技术小册
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.3.1 事件修饰符 在Vue.js中，事件处理是组件交互的核心部分。Vue提供了事件监听和事件处理的机制，让开发者能够轻松地为元素绑定事件并定义相应的处理函数。然而，在实际开发中，我们经常会遇到一些需要特殊处理的事件场景，比如阻止默认行为、阻止事件冒泡、只允许一次点击等。为了简化这些场景的处理，Vue引入了事件修饰符（Event Modifiers），它们是一种特殊的后缀，可以添加到`v-on`指令（或其缩写`@`）的事件名后，用于指示Vue执行某些特定的行为。 #### 8.3.1.1 阻止默认行为 在Web开发中，许多元素（如链接`<a>`、表单`<form>`提交按钮等）自带默认行为。例如，点击链接会跳转到新的URL，表单提交会向服务器发送数据。然而，在某些情况下，我们可能希望阻止这些默认行为，转而执行自定义的JavaScript逻辑。Vue提供了`.prevent`修饰符来实现这一点。 ```html <template> <div> <!-- 使用.prevent修饰符阻止链接的默认跳转行为 --> <a href="https://example.com" @click.prevent="handleClick">点击我，但不会跳转</a> </div> </template> <script> export default { methods: { handleClick() { alert('链接被点击，但默认跳转行为被阻止了！'); } } } </script> ``` #### 8.3.1.2 阻止事件冒泡 事件冒泡是DOM事件处理中的一个重要概念，指的是事件从最内层的元素开始，然后向外层元素逐级传播的过程。在某些情况下，我们可能希望事件仅在当前元素上触发，不希望它冒泡到父元素上。Vue提供了`.stop`修饰符来阻止事件冒泡。 ```html <template> <div @click="parentClick"> <button @click.stop="buttonClick">点击我，不会触发父元素的点击事件</button> </div> </template> <script> export default { methods: { parentClick() { alert('父元素被点击了'); }, buttonClick() { alert('按钮被点击了，但事件没有冒泡到父元素'); } } } </script> ``` #### 8.3.1.3 阻止默认行为并阻止事件冒泡 有时，我们既需要阻止元素的默认行为，又需要阻止事件冒泡。Vue允许我们将`.prevent`和`.stop`修饰符组合使用，以达到这一目的。 ```html <template> <form @submit.prevent.stop="handleSubmit"> <button type="submit">提交表单，不会跳转且不会冒泡</button> </form> </template> <script> export default { methods: { handleSubmit() { // 处理表单提交逻辑，不会执行默认的表单提交行为，且不会冒泡到父元素 alert('表单已提交，但页面没有跳转，且事件没有冒泡'); } } } </script> ``` #### 8.3.1.4 捕获模式 在DOM事件流中，除了冒泡模式，还有捕获模式。在捕获模式下，事件首先从最外层的元素开始，然后向里层元素逐级传播。Vue的事件监听默认是冒泡模式，但`.capture`修饰符可以让我们以捕获模式监听事件。 ```html <template> <div @click.capture="parentClick"> <button @click="buttonClick">点击我，首先触发父元素的点击事件（捕获模式）</button> </div> </template> <script> export default { methods: { parentClick() { alert('父元素在捕获阶段被点击了'); }, buttonClick() { alert('按钮在冒泡阶段被点击了'); } } } </script> ``` #### 8.3.1.5 只触发一次 有时，我们可能希望某个事件处理函数只被调用一次，无论事件被触发了多少次。Vue的`.once`修饰符就是为此设计的。 ```html <template> <button @click.once="handleClick">点击我，但只会被响应一次</button> </template> <script> export default { methods: { handleClick() { alert('按钮被点击了，但只会有这一次响应'); } } } </script> ``` #### 8.3.1.6 按键修饰符 对于键盘事件（如`keydown`、`keyup`），Vue还提供了一系列按键修饰符，允许我们根据具体的按键来触发事件处理函数。这些修饰符包括`.enter`、`.tab`、`.delete`（捕获“Delete”和“Backspace”键）、`.esc`、`.space`、`.up`、`.down`、`.left`、`.right`等，以及用于组合键的`.ctrl`、`.alt`、`.shift`、`.meta`（在Mac上是`Command`键，在Windows上是`Windows`键）。 ```html <template> <div> <!-- 只有按下Enter键时才会触发 --> <input @keyup.enter="submitForm" placeholder="按下Enter提交"> <!-- 组合键示例：同时按下Ctrl和Enter --> <input @keyup.ctrl.enter="ctrlEnterPressed" placeholder="同时按下Ctrl+Enter"> </div> </template> <script> export default { methods: { submitForm() { alert('表单通过Enter键提交'); }, ctrlEnterPressed() { alert('Ctrl+Enter组合键被按下'); } } } </script> ``` #### 8.3.1.7 系统修饰符 除了上述修饰符外，Vue还提供了`.exact`修饰符，它用于控制带有系统修饰符（如`.ctrl`、`.shift`、`.alt`、`.meta`）的键盘事件监听器。默认情况下，带有系统修饰符的监听器会触发于匹配到任何系统修饰键的情况下。但是，如果你只想在事件完全匹配指定的系统修饰键时才触发监听器，可以使用`.exact`修饰符。 ```html <template> <div> <!-- 只有同时按下Ctrl和C时才会触发 --> <input @keyup.ctrl.exact.c="ctrlCPressed" placeholder="同时按下Ctrl+C"> </div> </template> <script> export default { methods: { ctrlCPressed() { alert('Ctrl+C被精确按下'); } } } </script> ``` 事件修饰符是Vue提供的一种强大而简洁的语法糖，它们极大地简化了事件处理的复杂性，提高了开发效率。通过合理使用事件修饰符，我们可以更灵活地控制事件的行为，实现更加丰富的交互体验。
上一篇：
8.3 修饰符的使用
下一篇：
8.3.2 按键修饰符
该分类下的相关小册推荐：
Vue.js从入门到精通(四)
Vue.js从入门到精通(一)
Vue3技术解密
Vue面试指南
Vue源码完全解析
TypeScript和Vue从入门到精通(三)
TypeScript和Vue从入门到精通(四)
Vue原理与源码解析
TypeScript和Vue从入门到精通(五)
Vue.js从入门到精通(三)
VUE组件基础与实战
vue项目构建基础入门与实战
