Vue.js 事件处理器

devtools/2024/10/4 17:29:10/

1. 基本用法

在 Vue.js 中，事件处理器可以通过 v-on 指令来绑定。你可以使用简写形式 @ 来简化代码。

javascript"><template><button @click="handleClick">点击我</button>
</template><script>
export default {methods: {handleClick() {alert('按钮被点击了!');}}
}
</script>

当用户点击按钮时，handleClick 方法会被调用。

2. 传递参数

有时候需要将参数传递给事件处理器，你可以直接在事件处理器中传递参数。

javascript"><template><button @click="handleClick('Hello')">点击我</button>
</template><script>
export default {methods: {handleClick(message) {alert(message);}}
}
</script>

这里，当按钮被点击时，会弹出传递的字符串 ‘Hello’。

3. 事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或event.stopPropagation()。

Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

修饰符功能
.stop调用 event.stopPropagation()，阻止事件冒泡。
.prevent调用 event.preventDefault()，阻止默认行为。
.self只当事件是从该元素自身触发时才执行回调。
.once确保事件只被触发一次。
.capture阻止捕获
.left左键事件
.right右键事件
.middle中间滚轮事件

3.1 .stop

.stop 是 Vue.js 中的事件修饰符，用于调用 JavaScript 的 event.stopPropagation()
方法。这意味着当你在一个元素上使用 .stop 修饰符时，点击或触发事件不会继续向上传播到其父元素或祖先元素。

使用场景

  1. 防止父元素事件处理：

在某些情况下，你可能希望子元素的点击事件不影响父元素的事件。例如，当你有一个按钮在一个可点击的区域内时，你可能只想处理按钮的点击，而不想触发父元素的点击事件。

  1. 避免重复处理：

如果你有多个嵌套的元素，并且每个元素都有自己的事件处理方法，使用 .stop 可以确保只有最内层的事件被触发，避免意外的多次触发。

javascript"><template><div @click="parentMethod"><button @click.stop="childMethod">点击我</button></div>
</template><script>
export default {methods: {parentMethod() {alert('父元素被点击');},childMethod() {alert('子元素被点击');}}
}
</script>

行为分析：

  • 如果用户点击按钮，会弹出“子元素被点击”，而不会弹出“父元素被点击”。这是因为 .stop 阻止了事件的冒泡。
  • 如果用户点击 <div> 的其他部分（不点击按钮），则只会触发 parentMethod，弹出“父元素被点击”。

3.2 prevent

在 Vue.js 中，.prevent 是一个事件修饰符，用于调用 JavaScript 的 event.preventDefault()
方法。这个修饰符主要用于防止默认事件的发生，比如表单提交、链接跳转等。

使用场景

  1. 防止表单提交：

当你想要拦截表单的提交行为时，可以使用 .prevent 修饰符。

  1. 控制链接行为：

如果你有一个链接（<a> 标签），并且希望在点击时不导航到链接地址，可以使用 .prevent。

3.3 capture

在 Vue.js 中，.capture 是一个事件修饰符，用于指定事件处理程序的捕获阶段。事件在 DOM
中传播时，会经历两个阶段：捕获阶段和冒泡阶段。使用 .capture 修饰符可以让你在捕获阶段处理事件。

捕获阶段与冒泡阶段
捕获阶段：事件从根节点向目标元素传播。
冒泡阶段：事件从目标元素向根节点传播。

javascript"><template><div @click.capture="handleCapture" class="outer">外层容器<div @click="handleClick" class="inner">内层容器</div></div>
</template><script>
export default {methods: {handleCapture() {alert('捕获阶段：外层容器被点击');},handleClick() {alert('冒泡阶段：内层容器被点击');}}
}
</script><style>
.outer {padding: 20px;background-color: lightblue;
}.inner {padding: 20px;background-color: lightcoral;
}
</style>

行为分析：

  • 当用户点击内层 <div> 时，首先会触发 handleCapture，显示“捕获阶段：外层容器被点击”，然后再触发 handleClick，显示“冒泡阶段：内层容器被点击”。
  • 如果没有使用 .capture 修饰符，点击内层 <div> 时只会触发 handleClick。

3.4 self

在 Vue.js 中，.self事件修饰符的确是用于确保事件处理器仅在事件发生在当前元素上时才被调用，而不会响应子元素的事件。这对于避免意外触发父元素的事件处理器非常有用。

javascript"><template><div @click.self="handleDivClick">Click here (only this div)<button @click="handleButtonClick">Click me (inside button)</button></div>
</template><script>
export default {methods: {handleDivClick() {console.log('Div clicked!'); // 只有点击 div 本身时才会执行},handleButtonClick() {console.log('Button clicked!'); // 点击按钮时会执行}}
}
</script>

行为说明

  • 当你点击空白区域的 div：handleDivClick 方法会被调用，控制台输出 “Div clicked!”。
  • 当你点击按钮：handleDivClick 方法不会被调用，只有 handleButtonClick 被调用，控制台输出 “Button clicked!”。

4 按键修饰符

在 Vue.js 中，按键修饰符是用于处理键盘事件的一种便利方式。你可以通过特定的修饰符来指定响应的键。例如，常用的按键修饰符包括 .enter、.esc、.space 等。以下是一些示例和用法说明。

javascript"><template><div><inputtype="text"@keyup.enter="submit"@keyup.esc="clearInput"@keyup.space.prevent="addSpace"v-model="inputValue"/><p>Input Value: {{ inputValue }}</p></div>
</template><script>
export default {data() {return {inputValue: ''};},methods: {submit() {alert(`Submitted: ${this.inputValue}`);},clearInput() {this.inputValue = '';},addSpace() {this.inputValue += ' ';}}
}
</script><style>
/* 样式可以根据需要添加 */
</style>

代码说明

  • @keyup.enter：当按下 Enter 键时，调用 submit 方法。
  • @keyup.esc：当按下 Esc 键时，调用 clearInput 方法以清空输入框。
  • @keyup.space.prevent：当按下 Space 键时，调用 addSpace 方法，并阻止默认行为（例如，防止页面滚动）。

常用按键修饰符

  1. .enter：Enter 键
  2. .esc：Esc 键
  3. .tab：Tab 键
  4. .backspace：Backspace 键
  5. .delete：Delete 键
  6. .space：Space 键
  7. .up：向上箭头键
  8. .down：向下箭头键
  9. .left：向左箭头键
  10. .right：向右箭头键

组合键
可以结合使用多个修饰符，例如：

javascript"><input @keydown.ctrl.enter="save" />

这表示在按下 Ctrl + Enter 时会调用 save 方法。

5. 使用 $event 对象

在事件处理器中，你可以访问原生事件对象 $event，这样可以获取事件的更多信息。

javascript"><template><button @click="handleClick($event)">点击我</button>
</template><script>
export default {methods: {handleClick(event) {console.log(event); // 输出原生事件对象alert('按钮被点击了!');}}
}
</script>

6. 自定义事件

在 Vue.js 中，子组件可以使用 $emit() 方法向父组件发出自定义事件。父组件可以通过监听这些事件来进行响应。

子组件

javascript"><template><button @click="notifyParent">通知父组件</button>
</template><script>
export default {methods: {notifyParent() {this.$emit('custom-event', '数据');}}
}
</script>

父组件

javascript"><template><ChildComponent @custom-event="handleCustomEvent" />
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {handleCustomEvent(data) {console.log(data); // 输出 '数据'}}
}
</script>

在这个示例中，子组件发出了一个名为 custom-event 的事件，父组件则通过 @custom-event 监听这个事件，并在 handleCustomEvent 方法中处理。

7 鼠标事件

常用鼠标事件

  1. click：单击事件
  2. dblclick：双击事件
  3. mouseenter：鼠标进入事件
  4. mouseleave：鼠标离开事件
  5. mousemove：鼠标移动事件
  6. mousedown：鼠标按下事件
  7. mouseup：鼠标释放事件
  8. contextmenu：右键点击事件
javascript"><template><div><button @click="handleClick">Click Me</button><div class="box" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave"@mousemove="handleMouseMove"@mousedown="handleMouseDown"@mouseup="handleMouseUp">Hover over me or click!</div><p>{{ message }}</p></div>
</template><script>
export default {data() {return {message: 'Hover or click the box!'};},methods: {handleClick() {alert('Button clicked!');},handleMouseEnter() {this.message = 'Mouse entered the box!';},handleMouseLeave() {this.message = 'Mouse left the box!';},handleMouseMove(event) {this.message = `Mouse is at (${event.clientX}, ${event.clientY})`;},handleMouseDown() {this.message = 'Mouse button down!';},handleMouseUp() {this.message = 'Mouse button released!';},}
}
</script><style>
.box {width: 200px;height: 200px;background-color: lightblue;border: 1px solid #000;margin-top: 10px;display: flex;align-items: center;justify-content: center;
}
</style>

说明

  1. 点击事件：

@click 用于处理按钮的单击事件。

  1. 鼠标进入和离开事件：

@mouseenter 在鼠标进入元素时触发。
@mouseleave 在鼠标离开元素时触发。

  1. 鼠标移动事件：

@mousemove 用于获取鼠标在元素上的位置，可以通过 event.clientX 和 event.clientY 获取鼠标坐标。

  1. 鼠标按下和释放事件：

@mousedown 和 @mouseup 分别在鼠标按下和释放时触发。

8 总结

通过以上内容，你可以看到 Vue.js 的事件处理器非常灵活，能够满足各种用户交互的需求。无论是基本的点击事件，还是复杂的自定义事件，都可以通过 Vue 的事件系统轻松实现


http://www.ppmy.cn/devtools/121364.html

相关文章

主从蓝牙配对_笔记（HC-05）

主从蓝牙配对_笔记（HC-05）

1.提前准备2个蓝牙模块和串口模块&#xff0c;2个不同的串口助手 2.先按住按键不放&#xff0c;再给模块上电。此时LED 2S闪一次&#xff0c;进入AT模式。波特率固定为38400 &#xff08;设置波特率 38400&#xff0c;数据位 8 位&#xff0c;停止位 1 位&#xff0c;无校验位…
阅读更多...
Linux篇之IO多路复用

Linux篇之IO多路复用

文章目录 前言流IO操作IO阻塞多路IO多个流的IO请求处理水平触发边缘触发最后 前言 你好&#xff0c;我是醉墨居士&#xff0c;今天介绍一下Linux中的IO多路复用机制 流 流是一种用于在程序与外部数据源&#xff08;如文件、网络连接、内存等&#xff09;之间传输数据的机制&…
阅读更多...
UbuntuServer22.04.4安装Docker Compose

UbuntuServer22.04.4安装Docker Compose

文章目录 一、选择Docker Compose版本二、赋予执行权限三、创建软链接以便于在任何位置调用docker-compose:四、验证安装五、docker-compose运行命令六、docker-compose.yml 说明 一、选择Docker Compose版本 此链接速度比较快 sudo curl -L "https://mirror.ghproxy.co…
阅读更多...
SpringBoot整合redis

SpringBoot整合redis

redis是一个高性能的NoSql数据库&#xff0c;因为它将数据存储在内存中&#xff0c;所以它的读写速度非常快...... 本文章将演示springboot整合redis读写数据。 如果没下载redis的可以去官网下载&#xff1a;https://redis.io/docs/latest/get-started/ 导入依赖 在p…
阅读更多...
Prompt：在AI时代，提问比答案更有价值

Prompt：在AI时代，提问比答案更有价值

你好&#xff0c;我是三桥君 随着AI技术的飞速发展&#xff0c;我们进入了一个信息爆炸的时代。在这个时代&#xff0c;只要你会提问&#xff0c;AI就能为你提供满意的答案。这种现象让很多人开始思考&#xff1a;在这个答案触手可及的时代&#xff0c;答案的价值是否还像以前…
阅读更多...
【分布式微服务云原生】gRPC与Dubbo：分布式服务通信框架的双雄对决

【分布式微服务云原生】gRPC与Dubbo：分布式服务通信框架的双雄对决

摘要 在构建分布式系统时&#xff0c;选择合适的服务间通信框架至关重要。gRPC和Dubbo作为两个领先的框架&#xff0c;各自拥有独特的优势和应用场景。本文将深入比较这两个框架&#xff0c;探讨它们的定义、语言支持、接口定义、通信协议、服务治理以及应用场景。通过本文&…
阅读更多...
IDEA使用技巧

IDEA使用技巧

在使用IntelliJ IDEA&#xff08;简称IDEA&#xff09;这类集成开发环境&#xff08;IDE&#xff09;时&#xff0c;掌握一些高效的使用技巧和安装合适的插件可以显著提升开发效率。以下将从IDEA的使用技巧和插件推荐两个方面进行详细阐述。 一、IDEA使用技巧 1. 快捷键操作 …
阅读更多...
PPT 快捷键使用、技巧

PPT 快捷键使用、技巧

前言&#xff1a; 本文操作是以office 2021为基础的&#xff0c;仅供参考&#xff1b;不同版本office 的 ppt 快捷键 以及对应功能会有差异&#xff0c;需要实践出真知。 shift 移动 水平/垂直 移动 &#xff1b; shift 放大/缩小 等比例放大 缩小 &#xff1b; 正圆 正…
阅读更多...
最新文章

Copyright @ 2022~2023