【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。你当然也可以绑定一个组件方法而不是内联函数。

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

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

相关文章

Vue.js+SpringBoot开发食品生产管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 加工厂管理模块2.2 客户管理模块2.3 食品管理模块2.4 生产销售订单管理模块2.5 系统管理模块2.6 其他管理模块 三、系统展示四、核心代码4.1 查询食品4.2 查询加工厂4.3 新增生产订单4.4 新增销售订单4.5 查询客户 五、…

二蛋赠书十八期:《一本书讲透Elasticsearch:原理、进阶与工程实践》

Elasticsearch 是一种强大的搜索和分析引擎&#xff0c;被广泛用于各种应用中&#xff0c;以其强大的全文搜索能力而著称。 不过&#xff0c;在日常管理 Elasticsearch 时&#xff0c;我们经常需要对索引进行保护&#xff0c;以防止数据被意外修改或删除&#xff0c;特别是在进…

PC-DARTS: PARTIAL CHANNEL CONNECTIONS FOR MEMORY-EFFICIENT ARCHITECTURE SEARCH

PC-DARTS&#xff1a;用于内存高效架构搜索的部分通道连接 论文链接&#xff1a;https://arxiv.org/abs/1907.05737 项目链接&#xff1a;https://github.com/yuhuixu1993/PC-DARTS ABSTRACT 可微分体系结构搜索(DARTS)在寻找有效的网络体系结构方面提供了一种快速的解决方案…

和解费用3362万美元,谁来守护跨境卖家的“钱包”

公司向原告支付3362万美元(包括原告方主张的损害赔偿金2500万美元及原告方支付的律师费用862万美元)&#xff1b; 公司不得通过任何方式访问或使用原告的产品或数据&#xff1b; 公司不得向最终用户提供维修帮助服务(属于公司汽车诊断产品中的辅助维 修功能&#xff0c;不影响…

MTLAB 批量下载 脑医学图像数据集BrainWeb: Simulated Brain Database

MTLAB 批量下载 脑医学图像数据集BrainWeb: Simulated Brain Database BrainWeb数据集的网址&#xff1a;https://brainweb.bic.mni.mcgill.ca/brainweb/ 1. 了解 BrainWeb: Simulated Brain Database 这是一个模拟大脑数据的数据库&#xff08;SBD&#xff0c;Simulated Br…

C#重新认识笔记_ 点乘,叉乘

C#重新认识笔记_ 点积&#xff0c;叉乘 一、Dot Product 点乘&#xff1a; &#xff08;Ax*Bx&#xff09;&#xff08;Ay*By&#xff09;&#xff08;Az*Bz&#xff09;Dot Product 点积 利用点积&#xff0c;可以了解&#xff0c;两个向量(vector)的相关信息&#xff0c; …

【系统架构设计师】软件架构设计 02

系统架构设计师 - 系列文章目录 01 系统工程与信息系统基础 02 软件架构设计 文章目录 系统架构设计师 - 系列文章目录 文章目录 前言 一、软件架构的概念 ★★★ 二、基于架构的软件开发 ★★★★ 三、软件架构风格 ★★★★ 1.数据流风格 2.调用/返回风格 3.独立构件风格…

Qt学习--继承(并以分文件实现)

基类 & 派生类 一个类可以派生自多个类&#xff0c;这意味着&#xff0c;它可以从多个基类继承数据和函数。定义一个派生类&#xff0c;我们使用一个类派生列表来指定基类。类派生列表以一个或多个基类命名。 总结&#xff1a;简单来说&#xff0c;父类有的&#xff0c;子…

操作系统系列学习——信号量临界区保护

文章目录 前言信号量临界区保护 前言 一个本硕双非的小菜鸡&#xff0c;备战24年秋招&#xff0c;计划学习操作系统并完成6.0S81&#xff0c;加油&#xff01; 本文总结自B站【哈工大】操作系统 李治军&#xff08;全32讲&#xff09; 老师课程讲的非常好&#xff0c;感谢 【哈…

【力扣精选算法100道】——带你了解(数组模拟栈)算法

目录 &#x1f4bb;比较含退格的字符串 &#x1f388;了解题意 &#x1f388;分析题意 &#x1f6a9;栈 &#x1f6a9;数组模拟栈 &#x1f388;实现代码 844. 比较含退格的字符串 - 力扣&#xff08;LeetCode&#xff09; &#x1f4bb;比较含退格的字符串 &#x1f3…

Maven项目 快速修复log4j 漏洞

1、log4j 漏洞介绍 log4j的漏洞介绍以及原理请参考文章 &#xff0c;网址详见下面文章 Log4j漏洞原理及修复_linux log4j漏洞修复方案-CSDN博客&#xff0c;遇到这个漏洞要升级log4j 的jar包到2.17.0 以上。 2、项目快速处理方案 由于maven 管理jar 的spring 项目或者…

通过点击按钮实现查看全屏和退出全屏的效果

动态效果如图&#xff1a; 可以通过点击按钮&#xff0c;或者esc键实现全屏和退出全屏的效果 实现代码&#xff1a; <template><div class"hello"><el-button click"fullScreen()" v-if"!isFullscreen">查看全屏</el-butt…

DevExpress WinForms crack,DevExpress WinForms组件套件和库

DevExpress WinForms crack,DevExpress WinForms组件套件和库 Reporting & Analytics - Reports, Pivot Tables, PDF Viewer. The DevExpress WinForms Subscription includes royalty-free user interface components for next-gen decision support systems. Whether you…

泡澡——前缀和

题目链接&#xff1a;1.泡澡 - 蓝桥云课 (lanqiao.cn) 主要应用前缀和方法解决问题 package lanqiao;import java.util.Scanner;/*** 2023/11/29*/ public class lanqiao3898_泡澡 {static final int MAX (int) 2e5;public static void main(String[] args) {Scanner scan ne…

【活动】政府工作报告视角下的计算机行业发展前瞻与策略探讨

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 引言正文计算机行业在政府工作报告中的定位与发展态势政策导向解析未来机遇展望…

Java中的悲观锁机制----synchronized 关键字原理

上篇铺垫&#xff1a;Java中的锁机制&#xff1f;&#xff08;体系梳理篇&#xff09;-CSDN博客 一、sychronized的介绍 sychronized是Java原生的一个同步锁机制&#xff0c;可以保证在多线程并发的情况下&#xff0c;仅允许一个线程执行加锁的方法和代码块&#xff0c;保证了…

深度剖析:数字经济下人工智能水平的新测算模型数据集

数据来源&#xff1a;企业年报时间跨度&#xff1a;1991-2022年数据范围&#xff1a;各企业数据指标&#xff1a; 年份 股票代码 公司名称 总词频 词频加1取对数 人工智能 计算机视觉 图像识别 知识图谱 智能教育 增强现实 智能政务 特征提…

数据分析-Pandas序列时间移动窗口化操作

数据分析-Pandas序列时间移动窗口化操作 数据分析和处理中&#xff0c;难免会遇到各种数据&#xff0c;那么数据呈现怎样的规律呢&#xff1f;不管金融数据&#xff0c;风控数据&#xff0c;营销数据等等&#xff0c;莫不如此。如何通过图示展示数据的规律&#xff1f; 数据表…

Machine Learning ---- Feature Scaling

目录 一、What is feature scaling:&#xff1a; 二、Why do we need to perform feature scaling? 三、How to perform feature scaling: 1、Normalization: 2、Mean normalization: 3、Standardization (data needs to follow a normal distribution): 一、What is featur…

高效使用git流程分享

准备 假设你已经 clone 了当前仓库&#xff0c;并且你的终端位置已经位于仓库目录中。 查询状态 查询状态常用的命令有 git status 和 git branch。 前者用于查询更改文件情况&#xff0c;后者用于展示所有分支。 chatbot-system$ git status On branch develop Your bran…