Vue- ref属性

news2025/3/15 1:05:09

ref属性

被用来给元素或者子组件注册引用信息(id的替代者)

通过案例来演示_ref属性

1 编写案例

如图:有一个按钮,点击按钮可以输出dom元素

备注:虽然vue不用我们亲自操作dom,但是有的特殊的情况下就要亲自操作dom

页面就是这个样子的

2 传统操作dom

如果使用传统的方式,给属性一个id,再使用document,getElementById是可以操作的,但是这些代码,本身就不应该出现在vue中,这里我应该给h1id属性的,但是给错了,问题不大

虽然可以实现,但是不推荐

3 vue的ref属性

原生的html喜欢给元素id标识,在vue中有类似的办法,不过不是使用id而是ref

这里面我给h1标签一个ref属性,然后单击的时候输出vc,可以看到里面有一个$refs属性,里面就死定义的ref属性

既然已经找到了refs,那么就可以使用$refs编写了

也是可以正常拿到dom元素的

4 细节问题

组件标签ref属性

上面我是给h1标签加了ref属性,h1属性html标签,但是如果想给school标签加ref呢?school可是组件标签

我们测试下

发现如果给组件标签加了ref,得到的就是这个组件的vc实例对象

组件标签id属性

但是如果给组件标签id标识,并且通过dom获取id,获取到的就不是vc实例对象了

观察发现得到的是实例的根容器

5 ref属性总结

1 被用来给元素或者子组件注册引用信息(id的替代者)

2 应用在html标签上获取的是真实的DOM元素,应用在组件标签上是组件实例对象(vc)

3 使用方式:

打标识:

获取:this.$refs.xxx

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【2023华中杯】B题 小学教学应用题 相似性度量及难度评估 29页论文及MATLAB代码

1 题目 B 题 小学数学应用题相似性度量及难度评估 某 MOOC 在线教育平台希望能够进行个性化教学,实现用户自主学习。在用户学习时,系统从题库中随机抽取若干道与例题同步的随堂测试题,记录、分析学生的学习和答题信息,并且课后会自…

【Pytest实战】解决ModuleNotFoundError: No module named ‘pytest’问题

😄作者简介: 小曾同学.com,一个致力于测试开发的博主⛽️,主要职责:测试开发、CI/CD 如果文章知识点有错误的地方,还请大家指正,让我们一起学习,一起进步。😊 座右铭:不想…

JAVA程序的性能优化实践总结

1、 衡量程序性能的指标 可以从常用的性能评估指标入手: 并发:同一时间有多少请求访问TPS:transaction per second(每秒的事物数)QPS:query per second(每秒请求数)耗时:端到端耗时,服务端耗时&#xff…

并行计算——MPI编程

目录 基础知识 进程与线程,并行与并发 奇偶排序 MPI实现 odd-even sort 思路 环境部署 编程实现(C) “若干”的问题 参考链接 一个偶然的机会,我接触到了国立清华大学的MPI编程作业,也就接触到了并行计算。这…

基于Python3接口自动化测试初探

自动化测试是什么? 自动化测试简单来说就是借助工具的方式来辅助手动测试的行为就可以看做是自动化测试。 自动化测试工具有哪些? 现在常用的自动化测试工具包括: QTP:主要用于回归测试和测试同一软件的新版本 Robot Framewor…

大数据ETL工具Kettle

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言最近公司在搞大数据数字化,有MES,CIM,WorkFlow等等N多的系统,不同的数据源DB,需要将这些不同的数据源DB里的数据进行整治统一…

【算法】模拟,高精度

高精度加法 P1601 AB Problem(高精) - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路就是模拟,值得注意的就是要用字符串类型输入。存进自己的int数组时要倒着存,因为如果是正着存的话,进位会有点trouble。 时间…

Spread.NET v16.0.20222.0 ASP.NET cRACK

关于 Spread.NET 提供类似 Excel 的电子表格体验。 Spread.NET 可帮助您创建电子表格、网格、仪表板和表单。它包括一个强大的计算引擎,具有450 函数以及导入和导出Excel电子表格的能力。利用广泛的 .NET 电子表格 API 和强大的计算引擎来创建分析、预算、仪表板、…

【C++ 基础篇:24】:【重要模板】C++ 输入输出运算符重载【以 Date 日期类为例】

系列文章说明 本系列 C 相关文章 仅为笔者学习笔记记录,用自己的理解记录学习!C 学习系列将分为三个阶段:基础篇、STL 篇、高阶数据结构与算法篇,相关重点内容如下: 基础篇:类与对象(涉及C的三大…

Mysql Access denied for user ‘root‘@ ‘*.*.*.*‘ (using password: YES)异常处理

目录 一、异常错误二、原因三、解决方法 一、异常错误 PS C:\Users\10568> mysql -u root -p Enter password: **** ERROR 1045 (28000): Access denied for user rootlocalhost (using password: YES)Access denied表示拒绝访问,using password:NO/…

计算机视觉 | 语义分割与Segmentation

前 言 「MMSegmentation」 是一个基于 PyTorch 的语义分割开源工具箱。它是 OpenMMLab 项目的一部分。 MMSegmentation v1.x 在 0.x 版本的基础上有了显著的提升,提供了更加灵活和功能丰富的体验。 主要特性 统一的基准平台 我们将各种各样的语义分割算法集成到了…

Linux权限维持

SSH后门&VIM后门 ssh后门: 创建一个软链接: ln -sf /usr/sbin/sshd /tmp/su 拓展:软链接相当于一个快捷键,硬链接相当于一个指针指向文件地址,也类似于复制 开启后门: /tmp/su -oport12345 开启后…

chatgpt赋能python:Python另存为:如何保存你的程序代码

Python另存为:如何保存你的程序代码 简介 Python是一种高级编程语言,最初由Guido van Rossum于1991年创建。自创建以来,Python已被广泛应用于Web开发、数据分析、人工智能等领域。作为一名有10年Python编程经验的工程师,我发现在…

万物的算法日记|第一天

笔者自述: 一直有一个声音也一直能听到身边的大佬经常说,要把算法学习搞好,一定要重视平时的算法学习,虽然每天也在学算法,但是感觉自己一直在假装努力表面功夫骗了自己,没有规划好自己的算法学习和总结&am…

内部服务器端口映射实验:打通内外网络,实现公网访问内部服务

内部服务器端口映射实验:打通内外网络,实现公网访问内部服务 【实验目的】 部署服务器地址转换。熟悉服务器地址转换的应用方法。验证配置。 【实验拓扑】 实验拓扑如图所示。 实验拓扑 设备参数如表所示。 设备参数表 设备 接口 IP地址 子网掩…

BOM,什么是BOM?

4.BOM 4.1 什么是BOM? BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。 ​ BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。 …

react---todoList案例

todoList案例效果图 1.组件拆分 2.操作state数据 state 放在哪个组件: 如果某个组件组件使用: 放在其自身的state中。如果某些组件使用:放在他们共同的父组件state中(官方称此操作为状态提升) 状态(state)在…

Cocos creator实现飞机大战空中大战《战击长空》小游戏资源及代码

Cocos creator实现飞机大战空中大战《战击长空》小游戏资源及代码 最近在学习Cocos Creator,作为新手,刚刚开始学习Cocos Creator,刚刚入门,这里记录一下飞机大战小游戏实现。 https://wxaurl.cn/VEgRy2eTMyi 一 安装CocosDashBo…

Netty实战(十四)

WebSocket协议(二) 一、初始化 ChannelPipeline二、引导三、加密 一、初始化 ChannelPipeline 我们之前说过为了将 ChannelHandler 安装到 ChannelPipeline 中,需要扩展了ChannelInitializer,并实现 initChannel()方法。 下面我…

Nacos架构与原理 - 注册中心的设计原理

文章目录 Pre服务的分级模型 (服务-集群-实例三层模型)数据⼀致性负载均衡服务端侧负载均衡客户端侧负载均衡 健康检查性能与容量易用性集群扩展性用户扩展性 Pre 目前的网络架构是每个主机都有⼀个独立的 IP 地址,那么服务发现基本上都是通…