VUE语法-$refs和ref属性的使用

1、$refs和ref属性的使用

1、$refs:一个包含 DOM 元素和组件实例的对象,通过模板引用注册。

2、ref实际上获取元素的DOM节点

3、如果需要在Vue中操作DOM我们可以通过ref和$refs这两个来实现

总结:$refs可以获取被ref属性修饰的元素的相关信息。

1.1、$refs和ref使用-非组件环境

$refs f的使用至少需要写在mounted中,等待组件渲染结束,否则获取不到信息。

在下面的案例中,我们将template中的div加入属性ref=”comp2”,并打算在mounted中获取相关的DOM信息。

注意点:这是是没有使用组件的用法,后面有组件的用法。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3"></script>
</head>
<body><div id="app"></div><script type="module">//实例化vue实例const { createApp } = Vueconst app=createApp({mounted(){},template:`<div><div ref="comp2" name="div111">hello vue</div></div>`}); //vue实例只作用于app这个DOM节点中app.mount('#app');//viewModel是组件帮助我们完成的</script> 
</body>
</html>

1.1.1、获取名称为comp2的ref节点

核心代码:this.$refs.comp2

mounted(){console.log(this.$refs.comp2)
},

53a08a2d5b0b495bb01fb917b5174f46.png

1.1.2、获取名称为comp2节点中的值

核心代码:this.$refs.comp2.innerHTML

mounted(){console.log(this.$refs.comp2)console.log(this.$refs.comp2.innerHTML)
},

af761531d8c34d23a8e6aaf642ee36cf.png

1.1.3、获取名称为comp2节点中属性的值

核心代码:this.$refs.comp2.attributes.name

mounted(){console.log(this.$refs)console.log(this.$refs.comp2.innerHTML)//获取属性name的值console.log(this.$refs.comp2.attributes.name)},

3fa9336a49514f639b606707b3db7592.png

1.2、$refs和ref使用-组件环境

在vue中定义了一个全局组件component2

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3"></script>
</head>
<body><div id="app"></div><script type="module">//实例化vue实例const { createApp } = Vueconst app=createApp({mounted(){console.log(this.$refs)console.log(this.$refs.comp2.innerHTML)console.log(this.$refs.comp2.attributes.name)},template:`<div>< component2 ref="comp" > </component2></div>`}); //定义一个全局组件app.component("component2",{methods:{event1(){console.log("======1======");}},data(){return {name:"晓春111"}},template:`<div name="div111">hello vue111111111</div> `});//vue实例只作用于app这个DOM节点中app.mount('#app');//viewModel是组件帮助我们完成的</script> 
</body>
</html>

1.2.1、获取到子组件comp的节点

核心代码:this.$refs.comp

mounted(){console.log(this.$refs.comp)
},

1ba784aa56ef49e58d1c6dc6be0b9e7b.png

1.2.2、获取到子组件comp的节点中定义的函数

核心代码:this.$refs.comp.event1

mounted(){console.log(this.$refs.comp)console.log(this.$refs.comp.event1)
},

68cc2bb6db824d3b9e3e0867136f694a.png

1.2.3、获取到子组件comp的节点data中定义的属性值

核心代码:this.$refs.comp.name

mounted(){console.log(this.$refs.comp)console.log(this.$refs.comp.event1)console.log(this.$refs.comp.name)},

6d4145be1e854da5b79b6d925fe903f6.png

1.2.4、获取到子组件comp的节点中template的值

核心代码:this.$refs.comp.$el

      mounted(){console.log(this.$refs.comp)console.log(this.$refs.comp.event1)console.log(this.$refs.comp.name)console.log(this.$refs.comp.$el)},

8a06f624a0c1450fad876b5ab91d7325.png

1.2.5、获取到子组件comp的节点中template中元素属性的值

核心代码:this.$refs.comp.$el.attributes.name

      mounted(){console.log(this.$refs.comp)console.log(this.$refs.comp.event1)console.log(this.$refs.comp.name)console.log(this.$refs.comp.$el)console.log(this.$refs.comp.$el.attributes.name)},

7d70c29552104c6685f17b5d31ae6b20.png

1.2.6、获取到子组件comp的节点中template中元素的值

核心代码:this.$refs.comp.$el.innerHTML

mounted(){console.log(this.$refs.comp)console.log(this.$refs.comp.event1)console.log(this.$refs.comp.name)console.log(this.$refs.comp.$el)console.log(this.$refs.comp.$el.attributes.name)console.log(this.$refs.comp.$el.innerHTML)},

e864ef817a1742c4aceb6a85ec716c1a.png

1.2.7、获取到子组件comp的节点中template中元素的值

核心代码:this.$refs.comp.$data

$data能够获取我们定义在data中的参数。也就是

data(){

        return {

          name:"晓春111"

        } }

的值

 mounted(){console.log(this.$refs.comp)console.log(this.$refs.comp.event1)console.log(this.$refs.comp.name)console.log(this.$refs.comp.$el)console.log(this.$refs.comp.$el.attributes.name)console.log(this.$refs.comp.$el.innerHTML)console.log(this.$refs.comp.$data)},

e563ba4e657541a4b81d2e22e9f32924.png

1.2.8、获取子组件comp中template自定义属性

核心代码:this.$refs.comp.$options

  mounted(){console.log(this.$refs.comp)console.log(this.$refs.comp.event1)console.log(this.$refs.comp.name)console.log(this.$refs.comp.$el)console.log(this.$refs.comp.$el.attributes.name)console.log(this.$refs.comp.$el.innerHTML)console.log(this.$refs.comp.$data)console.log(this.$refs.comp.$options)},

e3f29476f6974e3790f8d189b825966a.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/204121.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue3-pnpm包管理器创建项目

一些优势&#xff1a;比同类工具快2倍左右、节省磁盘空间 官网&#xff1a;pnpm - 速度快、节省磁盘空间的软件包管理器 | pnpm中文文档 | pnpm中文网 npm升级到yarn再升级到pnpm&#xff08;速度更快&#xff09; 安装方式&#xff1a;npm install -g pnpm 创建项目&#…

计算虚拟化之CPU——qemu解析

解析 qemu 的命令行&#xff0c;qemu 的命令行解析&#xff0c;就是下面这样一长串。 qemu_add_opts(&qemu_drive_opts);qemu_add_opts(&qemu_chardev_opts);qemu_add_opts(&qemu_device_opts);qemu_add_opts(&qemu_netdev_opts);qemu_add_opts(&qemu_nic_…

数据结构(超详细讲解!!)第二十五节 树与森林

1.树的存储结构 和线性表一样&#xff0c;树可以用顺序和链式两种存储结构。 树的顺序存储结构适合树中结点比较“满”的情况。根据树的非线性结构特点&#xff0c;常用链式存储方式来表示树。树常用的存储方法有&#xff1a;双亲表示法、孩子表示法和孩子兄弟表…

【Dockerfile】将自己的项目构建成镜像部署运行

目录 1.Dockerfile 2.镜像结构 3.Dockerfile语法 4.构建Java项目 5.基于Java8构建项目 1.Dockerfile 常见的镜像在DockerHub就能找到&#xff0c;但是我们自己写的项目就必须自己构建镜像了。 而要自定义镜像&#xff0c;就必须先了解镜像的结构才行。 2.镜像结构 镜…

蓝桥杯算法双周赛心得——迷宫逃脱(记忆化搜索)

大家好&#xff0c;我是晴天学长&#xff0c;非常经典实用的记忆化搜索题&#xff0c;当然也可以用dp做&#xff0c;我也会发dp的题解&#xff0c;需要的小伙伴可以关注支持一下哦&#xff01;后续会继续更新的。&#x1f4aa;&#x1f4aa;&#x1f4aa; 1) .迷宫逃脱 迷官逃脱…

Mac | Vmware Fusion | 分辨率自动还原问题解决

1. 问题 Mac的Vmware Fusion在使用Windows10虚拟机时&#xff0c;默认显示器配置如下&#xff1a; 开机进入系统并变更默认分辨率后&#xff0c;只要被 ⌘Tab 切换分辨率就会还原到默认&#xff0c;非常影响体验。 2. 解决方式 调整 设置 -> 显示器 -> 虚拟机分辨率…

Authing CEO 谢扬来信 |我的原则

从忙碌的工作中短暂抽身&#xff0c;有很多感想&#xff0c;不吐不快&#xff0c;借此机会&#xff0c;倾我所有&#xff0c;诉我原则。 原则一&#xff1a;坚强信念&#xff0c;坚定意志 商人大多「无利不起早」&#xff0c;而创业者的反馈周期比商人长非常非常多。 相比「商品…

【Linux进阶之路】进程间通信

文章目录 一、原理二、方式1.管道1.1匿名管道1.1.1通信原理1.1.2接口使用 1.2命名管道 2.共享内存2.1原理2.2接口使用 3.消息队列原理 4.信号量引入原理 总结 一、原理 进程间的通信是什么&#xff1f;解释&#xff1a; 简单理解就是&#xff0c;不同进程之间进行数据的输入输出…

2023 hnust 湖南科技大学 信息安全管理课程 期中考试 复习资料

前言 ※老师没画重点的补充内容★往年试卷中多次出现或老师提过的&#xff0c;很可能考该笔记是奔着及格线去的&#xff0c;不是奔着90由于没有听过课&#xff0c;部分知识点不一定全&#xff0c;答案不一定完全正确最新版请转至Github 题型 试卷有很多题是原题&#xff0c;分…

二十一、数组(6)

本章概要 数组排序Arrays.sort的使用并行排序binarySearch二分查找parallelPrefix并行前缀 数组排序 根据对象的实际类型执行比较排序。一种方法是为不同的类型编写对应的排序方法&#xff0c;但是这样的代码不能复用。 编程设计的一个主要目标是“将易变的元素与稳定的元素…

一文读懂现代化数据中心DCIM系统容量管理的几个维度

数据中心是现代科技领域不可或缺的基础设施&#xff0c;其承载着大量的计算、存储和网络资源&#xff0c;是众多行业业务数字化的起点&#xff0c;更是衡量企业数字化能力的关键因素。数据中心DCIM&#xff08;Data Center Infrastructure management&#xff09;&#xff0c;即…

linaro交叉编译工具链下载与使用笔记

笔记 文章目录 笔记确定目标 &#xff08;aarch64&#xff09;选择版本&#xff08;7.5&#xff09;选择目标&#xff08;aarch64-linux-gnu&#xff09;下载地址工具链&#xff08;gcc-linaro-7.5.0-2019.12-x86_64_aarch64-linux-gnu.tar.xz&#xff09;编译测试 &#xff08…

nginx国密ssl测试

文章目录 文件准备编译部署nginx申请国密数字证书配置证书并测试 文件准备 下载文件并上传到服务器&#xff0c;这里使用centos 7.8 本文涉及的程序文件已打包可以直接下载。 点击下载 下载国密版openssl https://www.gmssl.cn/gmssl/index.jsp 下载稳定版nginx http://n…

hutool工具连接数据库实现数据处理重新入库

1 引入依赖 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.7.18</version></dependency><!--mysql驱动包--><dependency><groupId>mysql</groupId><ar…

【Unity】EventSystem.current.IsPointerOverGameObject()对碰撞体起作用

本来我是用 EventSystem.current.IsPointerOverGameObject()来检测是否点击在UI上的&#xff0c;但是发现&#xff0c;他对我的碰撞体也是返回ture,研究半天。。。。找不出问题&#xff0c;然后发现我的相机上挂载了PhysicsRaycaster&#xff0c;去掉之后就好了&#xff0c;至于…

无代码未来:智能、可视化、自动化的融合

无代码是一个相对较新的概念&#xff0c;不同的人群对其界定可能存在一定的差异。 对于IT专业人士和开发人员而言&#xff0c;无代码通常是指使用可视化界面和拖拽操作来构建应用程序的工具和平台。 无代码平台通过提供预先构建的组件和模块&#xff0c;使得开发人员可以通过简…

王者荣耀java版

主要功能 键盘W,A,S,D键&#xff1a;控制玩家上下左右移动。按钮一&#xff1a;控制英雄发射一个矩形攻击红方小兵。按钮二&#xff1a;控制英雄发射魅惑技能&#xff0c;伤害小兵并让小兵停止移动。技能三&#xff1a;攻击多个敌人并让小兵停止移动。普攻&#xff1a;对小兵造…

初识JVM(简单易懂),解开JVM神秘的面纱

目录 一、什么是JVM&#xff08;Java虚拟机&#xff09;&#xff1f; 二、JVM的功能 三、JVM的功能-即时编译 四、常见的JVM 五、JVM的组成 五、JVM的工作流程 参考资料 一、什么是JVM&#xff08;Java虚拟机&#xff09;&#xff1f; 在Java的世界里&#xff0c;Java虚…

MySQL中自增id用完怎么办?

MySQL中自增id用完怎么办&#xff1f; MySQL里有很多自增的id&#xff0c;每个自增id都是定义了初始值&#xff0c;然后不停地往上加步长。虽然自然数是没有上限的&#xff0c;但是在计算机里&#xff0c;只要定义了表示这个数的字节长度&#xff0c;那它就有上限。比如&#…

如何进行MySQL的主从复制(MySQL5.7)

背景&#xff1a;在一些Web服务器开发中&#xff0c;系统用户在进行数据访问时&#xff0c;基本都是直接操作数据库MySQL进行访问&#xff0c;而这种情况下&#xff0c;若只有一台MySQL服务器&#xff0c;可能会存在如下问题 数据的读和写的所有压力都会由一台数据库独…