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

【vue.js】文档解读【day 5】| ref模板引用

在这里插入图片描述

如果阅读有疑问的话,欢迎评论或私信!!
本人会很热心的阐述自己的想法!谢谢!!!

文章目录

  • 模板引用
    • 前言
    • 访问模板引用
    • 模板引用与v-if、v-show的结合
    • v-for中的模板引用
    • 函数模板引用

模板引用

前言

在前面学过的 v-on v-if v-show 等指令都是对DOM操作的抽象指令,而有时我们需要直接访问底层DOM元素。例如在我们刚挂载完组件实例时,想要将一个input输入框聚焦。参照之前的知识好像无法完成,在该章节我们可以使用vue提供的ref属性。我们称为模板引用

语法:

<input ref="input">

访问模板引用

挂载结束后,ref属性都会被暴露在this.$refs之上,例如我们之前的场景:

<template><p>Ask a yes/no question:<input v-model="some.nested.question" :disabled="loading"  ref="myInput"/><button @click="some.nested.question = 'b?'">点我</button></p><p>{{ answer }}</p>
</template>
<script>export default {mounted() {this.$refs.myInput.focus()}
}
</script>

注意,这里ref属性值只有在挂载之后才可以被访问,在挂载之间一直是undefined状态。因为我们的DOM在挂载前还没有被渲染,也就是ref还没有通知给引擎。例如

<script>export default {created(){this.$refs.myInput.focus();}
}
//Uncaught TypeError: Cannot read properties of undefined (reading 'focus')
</script>

模板引用与v-if、v-show的结合

我们通过上面可以知道ref属性只有在被渲染之后才可以访问到其中的值,那么我们可以联想到前面所讲的v-ifv-show的知识。如果我们ref所在的DOM元素包含v-if或者v-show会产生什么样的结果呢?结合我们学习到的知识,我觉得应该v-if会抛出错误,v-show不会抛出错误,因为两个的渲染机制不一样。例如:

<template><p><input v-model="some.nested.question" :disabled="loading"  ref="myInput" v-if="flag"/> <!--  Uncaught TypeError: Cannot read properties of undefined (reading 'focus') --><input v-model="some.nested.question" :disabled="loading"  ref="myInput2" v-show="flag"/><button @click="flag = !flag">更改input显示/隐藏</button></p>
</template>
<script>export default {data(){return{flag:false}},mounted() {this.$refs.myInput.focus();this.$refs.myInput2.focus();}
}
</script>

可以看出结果和我们预料的一样,只有v-if才会报错。

v-for中的模板引用

官方文档中解释了在对v-for中使用模板引用时,$refs中该属性是一个数组,也就是我们可以对其使用数组的方法。例如:

<template><ul><li v-for="currentValue in myArr" ref="items">{{ currentValue.myNumber }}</li></ul></p>
</template><script>
export default {data() {var myArr = [{myNumber: 1},{myNumber: 2},{myNumber: 3},{myNumber: 4},];return {myArr};},mounted() {console.log(this.$refs.items); //(4) [li, li, li, li]},
};
</script>

在上方代码中我们可以看出this.$refs.items会输出一个数组,那么我们可以使用this.$refs.items[0]访问得到第一个元素。

但是官方文档说不保证this.$refs.items与源数组相同的顺序。也就是我们在使用这个方法时需要查看一下是不是该元素,也可以使用数组中的indexOf来查找位置之后再使用该方法。

函数模板引用

对于ref中的值,我们可以是任意字符串,在mounted中使用this.$refs来引用。如果我们想要将这个DOM元素传入一个属性或者一个方法,我们可以使用函数模板引用。例如:

<button  :ref="(el)=>{console.log(el)}">按钮</button> //<!-- <button>按钮</button> -->

在使用函数模板引用时,ref是一个动态属性,需要使用v-bind来绑定。当绑定的元素被卸载时,函数也会被调用一次,此时的 el 参数会是 null。你当然也可以绑定一个组件方法而不是内联函数。

相关文章:

【vue.js】文档解读【day 5】| ref模板引用

如果阅读有疑问的话&#xff0c;欢迎评论或私信&#xff01;&#xff01; 本人会很热心的阐述自己的想法&#xff01;谢谢&#xff01;&#xff01;&#xff01; 文章目录 模板引用前言访问模板引用模板引用与v-if、v-show的结合v-for中的模板引用函数模板引用 模板引用 前言 …...

算法简单小技巧

主页&#xff1a;xiaocr_blog 1.最小公倍数和最大公约数 #include<iostream> using namespace std; int main(){int a,b;cin>>a>>b;int r a%b;while (r!0){a b;b r;r a%b;}cout<<b<<endl;return 0 ; } #include<iostream> using nam…...

前端入职配置新电脑!!!

前端岗位入职第一天到底应该做些什么呢&#xff1f;又该怎样高效的认识、融入团队&#xff1f;并快速进入工作状态呢&#xff1f;这篇文章就来分享一下&#xff0c;希望对即将走向或初入前端职场的你&#xff0c;能够有所帮助。内含大量链接&#xff0c;欢迎点赞收藏&#xff0…...

Java面试题总结15之简述你对RPC,RMI的理解

RPC&#xff1a;在本地调用远程的函数&#xff0c;远程过程调用&#xff0c;可以跨语言实现&#xff0c;httpClient RMI&#xff1a;远程方法调用&#xff0c;Java中用于实现RPC的一种机制&#xff0c;RPC的Java版本是J2EE的网络调用机制&#xff0c;跨JVM调用对象的方法&…...

内网穿透利器 n2n 搭建指南

1. n2n 简介 上文实验分析了 FRP 和 Zerotier 的利弊&#xff0c;本文再介绍另一种内网穿透方案&#xff0c;n2n。 n2n 是 C/S 架构的内网穿透服务&#xff0c;不同于 FRP 的 反向代理&#xff0c;它的原理是类似 Zerotier 的先打孔&#xff0c;打孔失败再尝试转发。关于打孔本…...

phpcms头像上传漏洞引发的故事

目录 关键代码 第一次防御 第一次绕过 第二次防御 第二次绕过 第三次防御 第三次绕过 如何构造一个出错的压缩包 第四次防御 第四次绕过 本篇文章是参考某位大佬与开发人员对于文件包含漏洞的较量记录下的故事&#xff0c;因为要学习文件包含漏洞&#xff0c;就将大佬…...

二叉树|二叉树理论基础、二叉树的递归遍历

代码随想录 (programmercarl.com) 树和二叉树 1.树的基本概念 1.1树的定义 1.2树的逻辑表示方法 1.3树的基本术语 1.4树的性质 1.5树的基本运算 1.6树的存储结构 2.二叉树的概念和性质 2.1二叉树的定义 2.2二叉树的性质 2.3二叉树与树、森林之间的转换 3.二叉树的…...

JavaScript 语法-对象

对象 JavaScript 中的对象是一组键值对的集合&#xff0c;其中每个键都是字符串&#xff0c;每个值可以是任意类型。 对象是由一些属性和方法组成的集合&#xff0c;属性可以用来存储数据&#xff0c;方法可以用来操作数据。 属性和方法使用“.”来访问 // 创建一个对象 let …...

代码随想录阅读笔记-哈希表【四数之和】

题目 给定一个包含 n 个整数的数组 nums 和一个目标值 target&#xff0c;判断 nums 中是否存在四个元素 a&#xff0c;b&#xff0c;c 和 d &#xff0c;使得 a b c d 的值与 target 相等&#xff1f;找出所有满足条件且不重复的四元组。 注意&#xff1a;答案中不可以包…...

JVM学习——双亲委派机制

简而言之就是为了防止与Java固有全类名重复&#xff0c;而导致系统崩坏所设立的机制。 当类加载器接收到加载类的任务时&#xff0c;首先会向上请求&#xff0c;一直请求到引导类加载器&#xff0c;如果引导类加载器无法加载&#xff0c;就会逐层返回让类加载器自己执行&#…...

【Paper Reading】6.RLHF-V 提出用RLHF的1.4k的数据微调显著降低MLLM的虚幻问题

分类 内容 论文题目 RLHF-V: Towards Trustworthy MLLMs via Behavior Alignment from Fine-grained Correctional Human Feedback 作者 作者团队&#xff1a;由来自清华大学和新加坡国立大学的研究者组成&#xff0c;包括Tianyu Yu, Yuan Yao, Haoye Zhang, Taiwen He, Y…...

Aloudata 倾力打造,《Data Fabric 白皮书 2.0》正式发布

数字经济时代&#xff0c;越来越多企业开始寻求全新的数据管理范式&#xff0c;以更有效地管理、利用不断增长的数据资产。在此背景下&#xff0c;Data Fabric 的概念应运而生&#xff0c;被视为面向未来的数据管理解决方案。 距离第一版白皮书问世已经过去一年多时间&#xff…...

docker内部无法使用ping等网络工具解决方案

通常docker内部没有网络&#xff0c;所以我们先离线安装需要的依赖包&#xff0c;然后再使用sh脚本容器内部访问宿主机同网络端其他服务器ip,实现监测远程ip telnet包依赖于netbase包&#xff0c;但是netbase包没有安装。你需要先安装netbase包&#xff0c;然后再尝试安装teln…...

后端工程师快速使用vue和Element

文章目录 Vue1 Vue概述2 快速入门3 Vue指令3.1 v-bind和v-model3.2 v-on3.3 v-if和v-show3.4 v-for3.5 案例 4 生命周期 Element快速使用1 Element介绍2 快速入门3 当前页面中嵌套另一个页面案例代码案例截图 Vue 1 Vue概述 通过我们学习的htmlcssjs已经能够开发美观的页面了…...

自学rabbitmq入门到精通

交换机的fault &#xff08;发布与订阅模式&#xff09; 因为消息是由生产者发送给excahnge&#xff0c;exchange发送给队列&#xff0c; 然后由队列发送给消费者的。 展示使用图形化界面使用fanout模式。 创建交换机 然后创建三个队列&#xff0c;绑定对应的交换机&#xff…...

由浅到深认识C语言(13):共用体

该文章Github地址&#xff1a;https://github.com/AntonyCheng/c-notes 在此介绍一下作者开源的SpringBoot项目初始化模板&#xff08;Github仓库地址&#xff1a;https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址&#xff1a;https://blog.csdn…...

python爬虫(9)之requests模块

1、获取动态加载的数据 1、在开发者工具中查看动态数据 找到csdn的门户的开发者工具后到这一页面。 2、加载代码 import requests headers {User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36…...

phpstudy自定义安装mysql8.3并启动

phpstudy自定义安装mysql8.3并启动 先去官网:https://dev.mysql.com/downloads/下载压缩包文件 然后按下面的图片一步一步操作 选择版本&#xff0c;选择第一个压缩包文件&#xff0c;下载 下载完成后&#xff0c;解压到phpstudy环境目录下&#xff0c;如下图 然后进入mysq…...

Netty 学习资料

Netty 学习资料 搜集了一下Java网络库Netty的学习资料&#xff0c;整理如下&#xff0c;有空花时间研究一下。 1、Netty学习手册 《尚硅谷 Netty 核心技术及源码剖析》课程学习手册 本课程不适合零基础的学员&#xff0c;需要掌握常用的设计模式和数据结构 掌握 Java 的面向对…...

【概率论中的两种重要公式:全概率和贝叶斯】

贝叶斯公式&#xff08;Bayes’ Theorem&#xff09;是概率论中的一条重要定理&#xff0c;用于计算条件概率。它描述了在已知某一事件发生的条件下&#xff0c;另一事件发生的概率。贝叶斯公式如下所示&#xff1a; P ( A ∣ B ) P ( B ∣ A ) ⋅ P ( A ) P ( B ) P(A|B) \…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

flow_controllers

关键点&#xff1a; 流控制器类型&#xff1a; 同步&#xff08;Sync&#xff09;&#xff1a;发布操作会阻塞&#xff0c;直到数据被确认发送。异步&#xff08;Async&#xff09;&#xff1a;发布操作非阻塞&#xff0c;数据发送由后台线程处理。纯同步&#xff08;PureSync…...

ArcGIS Pro+ArcGIS给你的地图加上北回归线!

今天来看ArcGIS Pro和ArcGIS中如何给制作的中国地图或者其他大范围地图加上北回归线。 我们将在ArcGIS Pro和ArcGIS中一同介绍。 1 ArcGIS Pro中设置北回归线 1、在ArcGIS Pro中初步设置好经纬格网等&#xff0c;设置经线、纬线都以10间隔显示。 2、需要插入背会归线&#xf…...