当前位置: 首页 > news >正文

详解Vue3中的鼠标事件mousemove、mouseover和mouseout

在这里插入图片描述

本文主要介绍Vue3中的常见鼠标事件mousemove、mouseover和mouseout。

目录

  • 一、mousemove——鼠标移动事件
  • 二、mouseover——鼠标移入事件
  • 三、mouseout——鼠标移出事件

下面是Vue 3中常用的鼠标事件mousemove、mouseover和mouseout的详解。

一、mousemove——鼠标移动事件

鼠标移动事件会在鼠标指针在元素内部移动时触发。通过在模板中绑定@mousemove来监听鼠标移动事件。

具体使用方法如下:

  1. 在模板中绑定@mousemove事件,并指定一个方法作为事件处理函数:
<template><div @mousemove="handleMouseMove"></div>
</template>
  1. 在Vue实例中定义handleMouseMove方法来处理鼠标移动事件:
<script>
export default {methods: {handleMouseMove(event) {// 处理鼠标移动事件的逻辑console.log("鼠标移动了");},},
};
</script>

handleMouseMove方法中,可以通过event参数来获取关于鼠标移动事件的信息,例如鼠标的坐标等。

另外,Vue3还提供了@mousemove.stop修饰符,用于阻止事件继续传播。

<template><div @mousemove.stop="handleMouseMove"></div>
</template>

这样,当鼠标在元素内部移动时,只会触发handleMouseMove方法,不会触发父元素的鼠标移动事件。

二、mouseover——鼠标移入事件

mouseover事件是指鼠标指针进入元素时触发的事件。通过在HTML模板中使用v-on指令来绑定mouseover事件。

示例代码如下:

<template><div><div @mouseover="handleMouseOver">鼠标悬停在这里</div></div>
</template><script>
export default {methods: {handleMouseOver() {console.log('鼠标悬停在元素上');}}
}
</script>

在上面的示例中,在div元素上使用了@mouseover指令,将其绑定到一个名为handleMouseOver的方法上。当鼠标悬停在该元素上时,handleMouseOver方法会被调用,并输出一条信息。

需要注意的是,由于Vue 3使用了Composition API,可以将mouse事件与其他响应式数据和方法结合使用。例如,可以在handleMouseOver方法中修改data中的某个值来实现一些交互效果。

<template><div><div @mouseover="handleMouseOver">鼠标悬停在这里</div><p v-if="isHovered">鼠标已经悬停在元素上</p></div>
</template><script>
import { reactive } from 'vue';export default {setup() {const data = reactive({isHovered: false});const handleMouseOver = () => {data.isHovered = true;};return {data,handleMouseOver}}
}
</script>

在上面的示例中,使用了reactive函数将data对象包装成响应式对象,并通过调用handleMouseOver方法来修改isHovered的值。根据isHovered的值,我们可以条件地渲染一个p元素。

这就是Vue 3中使用mouseover事件的基本介绍。

三、mouseout——鼠标移出事件

mouseout事件是鼠标指针从一个元素移出时触发的事件。它通常用于捕捉鼠标移出元素的操作,并执行相应的操作或逻辑。

使用v-on指令来监听mouseout事件。

下面是一个示例:

<template><div @mouseout="handleMouseOut">鼠标移出我时触发事件</div>
</template><script>
export default {methods: {handleMouseOut() {console.log('鼠标移出了元素');// 执行其他操作或逻辑}}
}
</script>

在上面的示例中,当鼠标移出<div>元素时,handleMouseOut方法会被调用,并打印出一条消息。

需要注意的是,mouseout事件是冒泡事件,即其会从触发元素开始向上冒泡到最外层的父元素。如果需要阻止冒泡,可以使用event.stopPropagation()方法。

<template><div @mouseout="handleMouseOutParent"><div @mouseout="handleMouseOutChild">子元素</div></div>
</template><script>
export default {methods: {handleMouseOutChild() {console.log('鼠标移出了子元素');},handleMouseOutParent() {console.log('鼠标移出了父元素');}}
}
</script>

在上面的示例中,当鼠标从子元素移出时,会先触发子元素的mouseout事件,然后再触发父元素的mouseout事件。

Vue 3中的mouseout事件可以通过v-on指令来监听,并且可以在方法中执行相应的逻辑。它是一个冒泡事件,可以通过event.stopPropagation()方法阻止冒泡。

相关文章:

详解Vue3中的鼠标事件mousemove、mouseover和mouseout

本文主要介绍Vue3中的常见鼠标事件mousemove、mouseover和mouseout。 目录 一、mousemove——鼠标移动事件二、mouseover——鼠标移入事件三、mouseout——鼠标移出事件 下面是Vue 3中常用的鼠标事件mousemove、mouseover和mouseout的详解。 一、mousemove——鼠标移动事件 鼠…...

Java:socket编程

目录 1、主程序 2、socket任务类 3、jdbc任务类 4、tomcat-jdbc连接池 5、jar包依赖 1、主程序 创建2个线程池&#xff0c;一个用于管理socket连接&#xff0c;一个用来管理jdbc连接。 package socket;import java.io.IOException; import java.net.ServerSocket; import…...

哨兵1号回波数据(L0级)FDBAQ压缩算法详解

本专栏目录: 全球SAR卫星大盘点与回波数据处理专栏目录-CSDN博客 1. 全球SAR卫星回波数据压缩算法统计 各国的SAR卫星的压缩算法按照时间轴排列如下: 可以看出传统的分块BAQ压缩算法(上图粉色)仍然是主流,哨兵1号其实也有传统的BAQ压缩模式。 本文介绍哨兵1号用的FDBAQ算…...

盾构机数据可视化监控平台 | 图扑数字孪生

2002 年,中国 863 计划把盾构机列为国家关键技术&#xff0c;以国家力量为主导&#xff0c;集中力量进行盾构机专项研究。在 2008 年&#xff0c;中国成功研制出属于自己的国产盾构机——中国中铁一号&#xff0c;同时还打通了天津地铁 1500m 的隧道。此举更彻底地打破了国内盾…...

计算机网络课程设计-企业网三层架构

&#xff08;单人版&#xff09; 摘 要 本篇报告主要解决了为一家名为西宫的公司网络搭建问题&#xff0c;该网络采用企业网三层架构对完了过进行设计。首先使用以太网中继&#xff0c;主要使用VLAN划分的技术来划定不同部门。使用MSTP对每个组配置生成树&#xff0c;防止交换机…...

Docker上传镜像到Harbor

上传镜像到Harbor 给镜像打上标签 语法 docker tag [OPTIONS] IMAGE[:TAG] [REGISTRYHOST/][USERNAME/] docker tag eureka:v1 127.0.0.1:85/tensquare/eureka:v1推送镜像 docker push 127.0.0.12:85/tensquare/eureka:v1如果出现以下错误&#xff0c;是因为Docker没有把Har…...

mfc100u.dll文件丢失了要怎么解决?修复mfc100u.dll详细指南

mfc100u.dll文件丢失了要怎么解决?首先让我们扒一扒什么是 mfc100u.dll。这玩意儿是 Microsoft Visual Studio 2010 的一部分&#xff0c;它就像一款程序生活中不可或缺的零件&#xff0c;没了它&#xff0c;程序肯定跑不起来。想想看&#xff0c;没有一个重要的零件&#xff…...

【ArcGIS微课1000例】0084:甘肃积石山地震震中100km范围内历史灾害点分布图(2005-2020)

甘肃积石山地震震中100km范围内历史灾害点分布图(2005-2020)。 文章目录 一、成果预览二、实验数据三、符号化四、地图整饰一、成果预览 本实验最终效果图如下所示: 二、实验数据 以下数据可以从本专栏配套的实验数据包中0084.rar中获取。 1. 历史灾害数据。为2005-2020时…...

java SSM拖拉机售后管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM拖拉机售后管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源 代码和数据库&#xff0c;系统主要…...

侯捷C++ 2.0 新特性

关键字 nullptr and std::nullptr_t auto 一致性初始化&#xff1a;Uniform Initialization 11之前&#xff0c;初始化方法包括&#xff1a;小括号、大括号、赋值号&#xff0c;这让人困惑。基于这个原因&#xff0c;给他来个统一&#xff0c;即&#xff0c;任何初始化都能够…...

计算机网络——基础知识汇总(八)

个人名片&#xff1a; &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的在校大学生 &#x1f42f;个人主页&#xff1a;妄北y &#x1f427;个人QQ&#xff1a;2061314755 &#x1f43b;个人邮箱&#xff1a;2061314755qq.com &#x1f989;个人WeChat&#xff1a;V…...

DIA数皆智能客户体验管理CEM获伊利“健康+AI”生态创新大奖

DIA数皆智能客户体验管理CEM获伊利“健康AI”生态创新大奖 数皆智能再获殊荣&#xff01; 北京&#xff0c;2023年12月26日 — 在全球瞩目的伊利集团“健康AI”生态创新大赛中&#xff0c;上海数皆智能技术有限公司大放异彩&#xff0c;其创新领先的“智能化客户体验管理CEM&a…...

linux 休眠唤醒中设备、总线、用户进程、内核线程调试分析流程

一、suspending consoles打印 代码位置&#xff1a;Kernel/power/suspend.c 函数调用流程&#xff1a;devices_and_enter(suspend_state_t state) --> suspend_console(); void suspend_console(void) { if (!console_suspend_enabled) 注释这一行&#xff0c;可以看到…...

k8s陈述式资源管理(命令行)

1、资源管理 &#xff08;1&#xff09;陈述式资源管理&#xff08;常用——查、增&#xff09; 使用kubectl工具进行命令行管理 ①特点&#xff1a;对资源的增删查比较方便&#xff0c;对改不友好 ②优点&#xff1a;90%以上的场景都可以满足 ③缺点&#xff1a;命令冗长…...

五、HTML 标题

在 HTML 文档中&#xff0c;标题很重要。 一、HTML 标题 标题&#xff08;Heading&#xff09;是通过 <h1> - <h6> 标签进行定义的。<h1> 定义最大的标题。 <h6> 定义最小的标题。 <h1>这是一个标题。</h1> <h2>这是一个标题。&l…...

三菱MR-JE伺服脉冲轴应用参数设置

三菱MR-JE伺服在脉冲轴控制上的应用&#xff0c;常用参数设置如下&#xff1a; 1、常用参数 未完......

通信原理课设(gec6818) 006:网络编程

目录 1、概念 2、通信 3、通信基本流程 TCP: UDP: 4、函数 I 创建套接字 II 绑定地址 III 字节序转换 IV 地址转换 V 监听 VI accept VII connect VIII 从套接字接收信息 IX 从套接字发送消息 X 关闭套接字 5、网络配置 1、确保你的网卡里面有两个虚拟网卡&a…...

一体化、一站式!智能视频客服加码全媒体云呼叫中心能力

凭借对电话、短信、邮件、社交媒体、视频等数种沟通渠道强大的统一集成能力&#xff0c;全媒体云呼叫中心已跃升成为现代企业客户服务的核心工具&#xff0c;高效便捷地为企业提供客户服务。而随着消费者需求愈加多元化和个性化&#xff0c;传统的语音通话方式已无法满足部分消…...

Vue的watch功能:实现响应式数据更新

watch是vue内部提供的一个用于侦听功能的更通用的方法&#xff0c;其用来响应数据的变化&#xff0c;通过特定的数据变化驱动一些操作。简言之&#xff1a;当需要被watch监听的数据发生变化时就会被执行watch中的逻辑。实现数据的实时更新&#xff01; 普通监听 <template…...

兔单抗制备方法的发展-杂交瘤技术|卡梅德生物

兔单克隆抗体技术是近年来在抗体研究领域中取得的重要进展之一。研究人员通过改进抗原设计、免疫策略和单克隆B细胞培养条件&#xff0c;提高了单克隆抗体的产量和特异性。相比于传统的小鼠单克隆抗体技术&#xff0c;兔单克隆抗体技术具有更大的抗原特异性和更高的亲和力&…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...