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

vue2的$el.querySelector在vue3中怎么写

news 来源：原创 2025/5/23 21:45:41

这个也属于直接操作 dom 了，不建议在项目中这样操作，不过我是在vue2升级vue3的时候遇到的，是以前同事写的代码，也没办法

先来看一下对比

在vue2中获取实例是直接通过 this.$refs.xxx 获取绑定属性 ref=xxx 的实例，并且实例上面的$el存在 querySelector 方法，看一下 vue2 的组件代码：

<template><div><el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button><el-dialogref="dialogInstance"title="提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"@opened="handlerOpen"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog></div>
</template>
<script>
export default {data() {return {dialogVisible: false,}},methods: {handlerOpen() {console.log(this.$refs.dialogInstance.$el.querySelector, 'lll')},handleClose(done) {this.$confirm('确认关闭？').then((_) => {done()}).catch((_) => {})},},
}
</script>

此时当弹出那个出现时，是能看到这个方法的

在vue3中我们获取实例是通过 const xxxInstance = ref(xxx) 获取绑定属性 ref=xxx 的实例，但是在 xxxInstance.value.$el 上面却找不到 querySelector 方法，来看一下代码：

<template><el-button plain @click="dialogVisible = true">Click to open the Dialog</el-button><el-dialogv-model="dialogVisible"title="Tips"width="500":before-close="handleClose"class="sdf"@opened="handleOpen"ref="dialogInstance"><span>This is a message</span><template #footer><div class="dialog-footer"><el-button @click="dialogVisible = false">Cancel</el-button><el-button type="primary" @click="dialogVisible = false">Confirm</el-button></div></template></el-dialog>
</template><script lang="ts" setup>
import { ref } from 'vue'const dialogInstance: any = ref(null)
const dialogVisible = ref(false)const handleOpen = () => {console.log(dialogInstance.value.$el, '///')console.log(dialogInstance.value.$el.querySelector, 'qqqq')
}const handleClose = (done: () => void) => {done()
}
</script>

输出

具体原因我也不知道，不过我在 $el 的 nextElementSibling 属性中找到了 querySelector 方法，并且可以使用

const handleOpen = () => {console.log(dialogInstance.value.$el, '///')console.log(dialogInstance.value.$el.nextElementSibling.querySelector,'ertert')
}

总结：

在 vue3 中如果要像 vue2 一样使用 $el.querySelector 的时候，使用 $el.nextElementSibling 的 querySelector

vue2的$el.querySelector在vue3中怎么写

这个也属于直接操作 dom 了，不建议在项目中这样操作，不过我是在vue2升级vue3的时候遇到的，是以前同事写的代码，也没办法先来看一下对比在vue2中获取实例是直接通过 this.$refs.xxx 获取绑定属性 refxxx 的实例，并且…...

编程日记 2025/5/23 21:45:41

C++ list 容器用法

C list 容器用法 C 标准库提供了丰富的功能，其中 <list> 是一个非常重要的容器类，用于存储元素集合，支持双向迭代器。<list> 是 C 标准模板库（STL）中的一个序列容器，它允许在容器的任意位置快速…...

编程日记 2025/5/22 3:40:40

双目立体校正和Q矩阵

立体校正对两个摄像机的图像平面重投影，使二者位于同一平面，而且左右图像的行对准。 Bouguet 该算法需要用到双目标定后外参(R，T) 从上图中可以看出，该算法主要分为两步： 使成像平面共面这个办法很直观&#xff…...

编程日记 2025/5/22 23:55:57

又是一年啊

又是一年回顾2024一、2024的愿望二、愿望实现了吗？三、总结展望2025几个愿望~~（终于快写完了）~~ 华丽结尾回顾2024 一、2024的愿望 1.CSP-J上岸； 2.小升初上岸； 3.数学进入联赛班； 4.初一期末年级前五…...

编程日记 2025/5/21 22:31:18

Spring Boot 邂逅Netty：构建高性能网络应用的奇妙之旅

一、引言在当今数字化时代，构建高效、可靠的网络应用是开发者面临的重要挑战。Spring Boot 作为一款强大的 Java 开发框架，以其快速开发、简洁配置和丰富的生态支持，深受广大开发者喜爱。而 Netty 作为高性能、异步的网络通信框架&#xff…...

编程日记 2025/5/24 17:02:05

简识JVM私有内存区域栈、数据结构

前记：JVM稀有内存区域栈包含：虚拟机栈、本地方法栈、程序计数器； 在JVM（Java虚拟机）中，私有内存区域栈主要指的是虚拟机栈（VM Stack）和本地方法栈（Native Method Stack&…...

编程日记 2025/5/20 14:55:24

【C++基础】多线程并发场景下的同步方法

如果在多线程程序中对全局变量的访问没有进行适当的同步控制（例如使用互斥锁、原子变量等），会导致多个线程同时访问和修改全局变量时发生竞态条件（race condition）。这种竞态条件可能会导致一系列不确定和严重的后果。…...

编程日记 2025/5/6 12:36:33

【优选算法】10----无重复字符的最长子串

---------------------------------------begin--------------------------------------- 题目解析： 看到这一类题目，有没有那种一眼就感觉时要用到滑动窗口的感觉，铁子们？ 讲解算法原理： 方法一: 暴力解法&#xff…...

编程日记 2025/5/21 4:49:50

C语言程序设计十大排序—冒泡排序

文章目录 1.概念✅2.冒泡排序🎈3.代码实现✅3.1 直接写✨3.2 函数✨ 4.总结✅ 1.概念✅ 排序是数据处理的基本操作之一，每次算法竞赛都很多题目用到排序。排序算法是计算机科学中基础且常用的算法，排序后的数据更易于处理和查找。在计算机发展…...

编程日记 2025/5/21 8:04:11

26考研资料分享百度网盘

基础班： 通过网盘分享的文件：2026【考研数学】等3个文件链接:https://pan.baidu.com/s/1djzJiut1h0DH8WmrI05YHg?pwd1234 提取码:1234--来自百度网盘超级会员v3的分享通过网盘分享的文件：01、2026【考研政治】链接:https://pan.baidu.…...

编程日记 2025/5/21 0:03:53

C++ lambda表达式

目录 1.lambda表达式 1.1什么是Lambda表达式？ 1.2Lambda表达式的语法 1.3捕捉列表 1.4函数对象与lambda表达式 1.lambda表达式 1.1什么是Lambda表达式？ Lambda表达式是C11标准引入的一种匿名函数，它允许你在需要函数的地方直接编写代码…...

编程日记 2025/5/17 17:48:23

halo附件图片迁移到easyimage图床

前言在使用 markdown 编写文章之后，markdown 内容中引用的图片都是图床的地址部分文章是在 halo 没有使用图床前，就已经发布了的，这些图片都是直接存储在 halo 系统中的需要将这些文章的图片全部迁移到图床上，这些文章的图片…...

编程日记 2025/5/24 16:55:23

Grafana

Grafana 是一款广泛使用的开源数据可视化与监控平台，通过与 Prometheus、InfluxDB、Elasticsearch 等多种数据源集成，提供强大的监控、数据展示和告警功能。其告警体系在及时通知系统异常、保障业务稳定性方面起到关键作用。 Grafana 告警体系概述 Graf…...

编程日记 2025/5/22 2:31:12

前端性能优化：HMR热更新和预获取加载

最近发现项目开发，有点加载快，有点却是卡机式，甚至刷新导致白屏情况。于是，我找开发和性能优化的方法，找到下面几种。本文将深入探讨预获取（Prefetch）、动态导入（Dynamic Import&…...

编程日记 2025/5/23 3:15:05

OpenCV相机标定与3D重建(66)对立体匹配生成的视差图（disparity map）进行验证的函数validateDisparity()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述使用左右检查来验证视差。矩阵 “cost” 应该由立体对应算法计算。 cv::validateDisparity 函数是 OpenCV 库中用于对立体匹配生成的视差图&…...

编程日记 2025/5/21 16:39:06

git reset (取消暂存,保留工作区修改)

出现这种情况的背景：我不小心把node_modules文件添加到暂存区了，由于文件过大，导致不能提交，所以我想恢复之前的状态，但又不想把修改的代码恢复为之前的状态，所以使用这个命令可以只恢复暂存区的状态&#…...

编程日记 2025/5/22 18:19:02

【论文+源码】diffuseq使用扩散模型和diffuseq-v2的序列文本生成序列，并且桥接离散和连续的文本空间，用于加速SEQ2SEQ扩散模型。

这篇论文介绍了一种名为DIFFUSEQ的新型扩散模型，专门针对序列到序列（SEQ2SEQ）文本生成任务进行设计。尽管扩散模型在视觉和音频等连续信号领域取得了成功，但在自然语言处理特别是条件生成方面的适应仍然未被广泛探索。通过广泛的评…...

编程日记 2025/5/24 8:23:26

考研机试题：打印日期

描述给出年分m和一年中的第n天，算出第n天是几月几号。输入描述: 输入包括两个整数y(1<y<3000)，n(1<n<366)。输出描述: 可能有多组测试数据，对于每组数据， 按 yyyy-mm-dd的格式将输入中对应的日期打印出来。 …...

编程日记 2025/5/21 3:20:01

试验的ffmpeg版本 4.1.3 本文使用的config命令 ./configure --prefixhost --enable-shared --disable-static --disable-doc --enable-postproc --enable-gpl --enable-swscale --enable-nonfree --enable-libfdk-aac --enable-decoderh264 --enable-libx265 --enable-libx…...

编程日记 2025/5/17 21:27:51

springboot使用ssl连接elasticsearch

使用es时ssl证书报错 unable to find valid certification path to requested target 1.依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId></dependency>2…...

编程日记 2025/5/22 4:30:11

虚拟头节点和双指针解决链表问题（合并，与分解操作，力扣题目为例）

Problem: 21. 合并两个有序链表 Problem: 86. 分隔链表文章目录总览说明题目描述思路复杂度Code总结分析总览说明在解决链表相关的算法题目时较多使用到的技巧就是虚拟头节点、双指针，而题目往往都会涉及到对链表的分解、合并操作，本文选择两个题目将…...

编程日记 2025/5/24 17:08:04

JavaScript系列（38）-- WebRTC技术详解

JavaScript WebRTC技术详解 🎥 今天，让我们深入了解WebRTC（Web Real-Time Communication）技术，这是一种支持网页浏览器进行实时语音对话或视频对话的技术。 WebRTC基础概念 🌟 💡 小知识&…...

编程日记 2025/5/18 7:11:40

分布式理解

分布式如何理解分布式狭义的分布是指，指多台PC在地理位置上分布在不同的地方。分布式系统分布式系**统：**多个能独立运行的计算机（称为结点）组成。各个结点利用计算机网络进行信息传递，从而实现共同的“目标或者任…...

编程日记 2025/5/21 7:34:01

JVM学习指南(48)-JVM即时编译

文章目录即时编译（Just-In-Time Compilation, JIT）概述为什么JVM需要即时编译？即时编译与传统的静态编译的区别JVM中的即时编译器HotSpot VM中的C1和C2编译器编译器的作用和位置即时编译的工作流程代码的加载和解释执行热点代码检测编译优化编译优化技术公共子表达式消除循…...

编程日记 2025/5/15 11:00:11

python http调用视觉模型moondream

目录一、什么是moondream 二、资源地址三、封装了http进行接口请求四、代码解析解释可能的改进一、什么是moondream Moondream 是一个针对视觉生成任务的深度学习模型，专注于图像理解和生成，包括图像标注（captioning）、问题回答（Visual Question Answering，…...

编程日记 2025/5/20 1:34:59

【竞技宝】DOTA2:NAVI junior被ESL取消参赛资格

北京时间1月24日,DOTA2目前有多个赛事的预选赛正在如火如荼的进行之中,其中ESLOne罗利站的预选赛已经结束,参赛正赛的队伍也已经全部产生。除了因EPT积分而拿到直邀资格的PARI、BB、falcons、liquid之外,tundra、NAVI junior、spirit、nigma、XG、talon、SR、HEROIC也通过各赛区…...

编程日记 2025/5/21 10:31:49

Java 在包管理与模块化中的优势：与其他开发语言的比较

在开发复杂的、规模庞大的软件系统时，包管理和模块化设计起着至关重要的作用。它们不仅决定了代码的组织和可维护性，还直接影响到团队协作效率、扩展性和性能。在众多编程语言中，Java 凭借其成熟的生态系统、强类型系统和标准化的包管理机制&…...

编程日记 2025/5/19 21:10:23

如何用数据编织、数据虚拟化与SQL-on-Hadoop打造实时、可扩展兼容的数据仓库？

在大数据技术迅猛发展的背景下，许多人认为传统数据仓库已过时。然而，这种观点忽略了数据仓库的核心价值：统一的数据视图、强大的业务逻辑支撑以及丰富的数据分析能力。在企业数据架构转型中，数据仓库不仅未被淘汰，反而…...

编程日记 2025/5/23 4:38:47

MVCC底层原理实现

MVCC的实现原理了解实现原理之前，先理解下面几个组件的内容 1、当前读和快照读先普及一下什么是当前读和快照读。当前读：读取数据的最新版本，并对数据进行加锁。例如：insert、update、delete、select for update、 sele…...

编程日记 2025/5/22 7:19:29

【Nacos】负载均衡

目录前言一、服务下线二、权重配置三、同一个集群优先访问四、环境隔离前言我们的生产环境相对是比较恶劣的，我们需要对服务的流量进行更加精细的控制.Nacos支持多种负载均衡策略，包括配置权重，同机房，同地域，同环…...

编程日记 2025/5/24 0:39:41

Batch Normalization学习笔记

文章目录一、为何引入 Batch Normalization二、具体步骤1、训练阶段2、预测阶段三、关键代码实现四、补充五、参考文献一、为何引入 Batch Normalization 现在主流的卷积神经网络几乎都使用了批量归一化（Batch Normalization，BN）1&#xf…...

编程日记 2025/5/19 18:04:47

PIC单片机HEX文件格式分析

在调试PIC单片机在bootloader程序时，需要将hex文件转换为bin文件，在转换之前先了解一下hex文件中数据是如何定义的。直接打开一个LED灯闪烁的程序生成的hex文件，芯片型号为PIC18F46K80 可以看到每条数据都是由6部分组成的，下面分…...

编程日记 2025/5/24 16:26:11

【unity游戏开发之InputSystem——07】InputSystem+UGUI配合使用（基于unity6开发介绍）

文章目录一、InputSystem+UGUI配合使用1、官方文档参考2、切换到新的输入模块二、UGUI中的新输入系统输入模块参数相关1、Send Pointer Hover To Parent2、Move Repeat Delay3、Move Repeat Rate4、XR Tracking Origin5、Deselect On Background CLick6、Pointer Behavior7、S…...

编程日记 2025/5/24 17:05:42

RocketMQ 的 Topic 和消息队列MessageQueue信息，是怎么分布到Broker的？怎么负载均衡到Broker的？

目录 1. Topic 和 MessageQueue 的基本概念 1.1 Topic 1.2 MessageQueue 2. Topic 和 MessageQueue 的分布 2.1 Topic 的创建 2.2 MessageQueue 分配到 Broker 2.3 分布规则 3. 负载均衡机制 3.1 Producer 的负载均衡 3.2 Consumer 的负载均衡 3.3 Broker 的负载均衡…...

编程日记 2025/5/17 10:39:48

Qt简单迷宫游戏

目录你将学到你将准备你将改变你将设计你将编程开始界面游玩界面胜利界面其它bug修复你可扩展下一篇博客要说的东西你将学到 Qt中QKeySequence对象的基本创建Qt中QShortcut对象的基本应用Qt中QSoundEffect对象的基本应用你将准备在开始制作Qt简单迷宫游戏之前&#xff…...

编程日记 2025/5/23 0:57:33

Webrtc （1） - Windows 编译

最近项目上遇到webrtc wgc 的几个test case无法通过，与webrtc人员沟通后决定要自行修复一下(因为他们不想管…) 参考文档 https://webrtc.org/support/contributinghttps://chromium.googlesource.com/chromium/src//main/docs/#checking-out-and-building 以上两…...

编程日记 2025/5/20 14:55:23

深圳大学-智能网络与计算-实验一：RFID原理与读写操作

实验目的与要求掌握超高频RFID标签的寻卡操作。掌握超高频RFID标签的读写操作。掌握超高频RFID标签多张卡读取时的防冲突机制。方法，步骤软硬件的连接与设置超高频RFID寻卡操作超高频RFID防冲突机制超高频RFID读写卡操作实验过程及内容一．软硬…...

编程日记 2025/5/21 2:11:50

文献引用指南ChatGPT提示词分享

文献引用指南在学术写作中，准确引用是至关重要的环节。它不仅能够为您的研究提供坚实的学术基础，还能确保您尊重并认可他人的学术成果，从而有效避免抄袭的问题。而ChatGPT在这一方面同样能够为您提供有力的支持。借助ChatGPT，您…...

编程日记 2025/5/23 9:17:21

什么是计算机应用基础知识

计算机应用基础知识是指学习和掌握计算机的基本理论、硬件、软件、网络和应用技能的基础内容。它是为使用计算机进行日常工作、学习和解决实际问题打下的基础。计算机应用基础知识涉及多个领域，主要包括以下几个方面：一、计算机硬件基础计算机硬件组成：了解计算机的基本组…...

编程日记 2025/5/18 17:18:27

SpringBoot集成Flink-CDC，实现对数据库数据的监听

一、什么是 CDC ？ CDC 是Change Data Capture（变更数据获取）的简称。核心思想是，监测并捕获数据库的变动（包括数据或数据表的插入、更新以及删除等），将这些变更按发生的顺序完整记录下来&…...

编程日记 2025/5/23 0:15:15

微信小程序云开发服务端存储API 从云存储空间删除文件

deleteFile 从云存储空间删除文件 const cloud require(wx-server-sdk)exports.main async (event, context) > {const fileIDs [xxx, xxx]const result await cloud.deleteFile({fileList: fileIDs,})return result.fileList }写的资式如有不对，请各位大神多…...

编程日记 2025/5/23 21:33:33

[操作系统] 深入进程地址空间

程序地址空间回顾在C语言学习的时，对程序的函数、变量、代码等数据的存储有一个大致的轮廓。在语言层面上存储的地方叫做程序地址空间，不同类型的数据有着不同的存储地址。下图为程序地址空间的存储分布和和特性： 使用以下代码来验证一下…...

编程日记 2025/5/22 5:50:41

gitlab处理空文件夹的提交或空文件夹提交失败

问题描述厂家发给了我一个压缩包文件，压缩包解压之后本地编译没问题；推送到gitlab之后，再编译就报错了； 问题原因经过分析之后发现，压缩包解压之后存在很多空文件夹；但是gitlab推送的时候，…...

编程日记 2025/5/22 4:30:09

C++ —— 智能指针 unique_ptr （上）

C —— 智能指针 unique_ptr （上） 普通指针的不足普通指针的释放智能指针智能指针 unique_ptr智能指针初始化错误用法get()方法返回裸指针智能指针不支持指针的运算（、-、、- -） 普通指针的不足 new和new [] 的内存需要用delete和…...

编程日记 2025/5/24 15:00:52

ruoyi-vue-pro集成magic-api（图文代码）

目录前言1. 配置依赖2. 集成登录3. 成功展示前言 🤟 找工作，来万码优才：👉 #小程序://万码优才/r6rqmzDaXpYkJZF 原先写过简单的集成：了解 magic-api的基本用法附实战代码 magic-api相关文档推荐阅读：接口鉴权相关的Java代码推荐阅读： java框架零基础从入门到精…...

编程日记 2025/5/19 3:01:03

【线上问题定位处理】及【性能优化】系列文章

目录性能优化性能优化九大服务架构性能优化方式如何进行GC调优如何排查线上系统出现的Full GC MySQL - 性能优化 MySQL - 分库分表大数据查询的处理方案 MySQL优化手段有哪些服务CPU100%问题如何快速定位？服务内存OOM问题如何快速定位？ JVM调优6大步骤线…...

编程日记 2025/5/20 14:32:24

如何解压rar格式文件？8种方法（Win/Mac/手机/网页端）

RAR 文件是一种常见的压缩文件格式，由尤金・罗谢尔（Eugene Roshal）开发，因其扩展名 “rar” 而得名。它通过特定算法将一个或多个文件、文件夹进行压缩，大幅减小存储空间，方便数据传输与备份。然而&#xf…...

编程日记 2025/5/21 6:14:29

GORM 支持的数据库解析

GORM 是一个流行的 Go 语言 ORM（对象关系映射）库，它简化了 Go 与数据库之间的交互。作为一款功能强大的库，GORM 支持多种主流关系型数据库，满足不同开发场景下的需求。本文将探讨 GORM 支持的主要数据库及其特点&#…...

编程日记 2025/5/20 16:42:22

分布式光纤应变监测是一种高精度、分布式的监测技术

一、土木工程领域桥梁结构健康监测主跨应变监测：在大跨度桥梁的主跨部分，如悬索桥的主缆、斜拉桥的斜拉索和主梁，分布式光纤应变传感器可以沿着这些关键结构部件进行铺设。通过实时监测应变情况，能够精确捕捉到车辆荷载、风荷…...

编程日记 2025/5/21 22:33:13

如何在oracle关闭情况下如何修改spfile的参数

如何在oracle关闭情况下如何修改spfile的参数一、问题背景二、处理方案一、问题背景在ORACLE数据库启动状态下通过下列代码修改了最大连接数 alter system set processes2000 scopespfile sid*;关闭了数据库再重新启动提示如下报错： ORA-00838: Specified valu…...

编程日记 2025/5/24 8:23:29

总结：

相关文章：