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

vue3学习-ref引用

模板引用

使用特殊的 refattribute

允许再特定的Dom或组件被挂在后,获取他的直接引用。

import { ref } form 'vue'
const input = ref(null)
<input ref="input"/>

注意:只可以在组件挂载后才能访问模板引用

#如果你需要侦听一个模板引用 ref 的变化,确保考虑到其值为 null 的情况
watchEffect(() => {if(input.value) {input.value.forcus()}else{}// 此时还未挂载,或此元素已经被卸载(例如通过 v-if 控制)
})
onMounted(() => {console.log(input.value)
})
v-for 中的模板引用
const list = ref([])

ref 数组并不保证与源数组相同的顺序

函数模板引用

除了使用字符串值作名字,ref attribute 还可以绑定为一个函数,会在每次组件更新时都被调用。该函数会收到元素引用作为其第一个参数

<input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }">
组件上的 ref

获得的值是组件实例

使用了 的组件是**默认私有**的:一个父组件无法访问到一个使用了 的子组件中的任何东西,除非子组件在其中通过 defineExpose 宏显式暴露:

import { ref } from 'vue'
const a = 1,  b = ref(2)
defineExpose({a,b})cons.value.a //1
cons.value.b // 2

当父组件通过模板引用获取到了该组件的实例时,得到的实例类型为 { a: number, b: number } (ref 都会自动解包,和一般的实例一样)。

相关文章:

vue3学习-ref引用

模板引用 使用特殊的 refattribute 允许再特定的Dom或组件被挂在后&#xff0c;获取他的直接引用。 import { ref } form vue const input ref(null) <input ref"input"/>注意&#xff1a;只可以在组件挂载后才能访问模板引用 #如果你需要侦听一个模板引用 r…...

Docker 容器转为镜像

# 容器转成镜像并指定镜像名称与版本号 # commit 时原有容器挂载的目录是不会被写入到新的镜像中去的&#xff0c;数据卷相关的都不会生效 # 但是 root 目录下新建的内容会写入到新的镜像中去 $ docker commit 容器ID 新镜像名称:版本号 $ docker commit -m"描述信息"…...

阿里云服务器免费试用及搭建WordPress网站

文章目录 前言一、免费试用1、选择使用产品2、进行产品配置3、远程连接阿里云服务器①、重置实例密码②、SecureCRT 远程链接③、Workbench 远程链接二、搭建 WordPress 网站1、开放搭建 WordPress 需要的端口2、搭建 LAMP 环境①、Linux 系统升级和更新源②、安装 Apache2③、…...

整流二极管型号汇总,超齐全

整流二极管是什么二极管&#xff1f;查看资料可知&#xff0c;整流二极管是一种将交流电能转变为直流电能的半导体器件&#xff0c;可见整流二极管的作用重在“整流”。整流二极管主要用于各种低频半波整流电路&#xff0c;如需达到全波整流需连成整流桥使用。近日&#xff0c;…...

MongoDB 操作命令

创建database 有就切换没有创建 useMydatabase 显示数据库&#xff1a;show dbs显示该database下的 bson对象 show collections 显示该bson下的具体内容**mydatabase.mycollection.find()**查询该bson对象内容**且查询****mydatabase.mycollection.find({a:,b:})****或查询****…...

markdown高级写作技巧汇总

文章目录 1 代码diff2 待办事项3 图片设置宽高4 折叠5 锚点链接实现方式① Markdown 原始写法 [名称](#id)② HTML 语法 名称 6 目录树7 换行 1 代码diff 如果你做过代码 Code Review&#xff0c;对下面这种效果肯定很熟悉 // 数组去重 const unique (arr)>{ - return A…...

SpringBoot自动配置原理入门级理解

简单理解 spring中&#xff0c;我们配置一个bean有两种方式&#xff0c;一种是xml标签的形式&#xff0c;一种是通过java类的形式。那么自动装配就是通过java类的形式来配置bean。 不同的是&#xff0c;springboot将这些我们需要的bean提前配置好了以java类的形式存放在META-I…...

2023 08.02 小记与展望

碎碎念系列更新 算是坚持的第一个月&#xff08;每个月更新一次&#xff0c;上次是6.29&#xff09; 主要对上月工作进行总结&#xff0c;并对后续学习内容进行规划。 一、关于工作 7月工作主要涉及以下方面&#xff1a; 1、公司自研APP维护&#xff08;主要是接口更新和修改…...

MaxPatrol SIEM 增加了一套检测供应链攻击的专业技术

我们为 MaxPatrol SIEM 信息安全事件监控系统增加了一套新的专业技术。 该产品可帮助企业防范与供应链攻击相关的威胁。 此类攻击正成为攻击者的首要目标&#xff1a;它们以软件开发商和供应商为目标&#xff0c;网络犯罪分子通过他们的产品进入最终目标的基础设施。 因此&a…...

蓝桥杯上岸每日N题 第六期(求阶乘)!!!

蓝桥杯上岸每日N题第六期 ❗️ ❗️ ❗️ 同步收录 &#x1f447; 蓝桥杯上岸必背&#xff01;&#xff01;&#xff01;(持续更新中~) 大家好 我是寸铁&#x1f4aa; 冲刺蓝桥杯省一模板大全来啦 &#x1f525; 蓝桥杯4月8号就要开始了 &#x1f64f; 距离蓝桥杯省赛倒数…...

Codeforces Round 889 (Div. 2)(视频讲解A——D)

文章目录 A Dalton the TeacherB Longest Divisors IntervalC2 Dual (hard Version)D Earn or Unlock Codeforces Round 889 (Div. 2)&#xff08;视频讲解A——D&#xff09; A Dalton the Teacher #include<bits/stdc.h> #define endl \n #define INF 0x3f3f3f3f us…...

K8s安全配置:CIS基准与kube-bench工具

01、概述 K8s集群往往会因为配置不当导致存在入侵风险&#xff0c;如K8S组件的未授权访问、容器逃逸和横向攻击等。为了保护K8s集群的安全&#xff0c;我们必须仔细检查安全配置。 CIS Kubernetes基准提供了集群安全配置的最佳实践&#xff0c;主要聚焦在两个方面&#xff1a;主…...

linux安装python和部署Django项目

文章目录 1 python安装2 Django项目部署 1 python安装 官网地址&#xff1a;https://www.python.org/ 本次下载的python安装包地址&#xff1a;https://www.python.org/ftp/python/3.8.16/Python-3.8.16.tgz 解压下载的python压缩包 [rootlocalhost software]# tar -zxvf P…...

00-Hadoop入门

Hadoop入门 Hadoop四高 1&#xff09;高可靠性 Hadoop底层维护多个数据副本&#xff0c;所有即使hadoop某个计算元素或存储故障&#xff0c;也不会造成数据丢失 2&#xff09;高扩展性 在集群间分配任务数据&#xff0c;可方便的扩展数以千计的节点 3&#xff09;高效性 …...

SE-Net注意力机制详解

📌本次任务:了解SE-Net原理 SE-Net 是 ImageNet 2017(ImageNet 收官赛)的冠军模型,是由WMW团队发布。具有复杂度低,参数少和计算量小的优点。且SENet 思路很简单,很容易扩展到已有网络结构如 Inception 和 ResNet 中。(这篇论文是2019年的,应该是后续做了更新) 一…...

商城免费搭建之java商城 开源java电子商务Spring Cloud+Spring Boot+mybatis+MQ+VR全景+b2b2c bbc

&#xfeff; 1. 涉及平台 平台管理、商家端&#xff08;PC端、手机端&#xff09;、买家平台&#xff08;H5/公众号、小程序、APP端&#xff08;IOS/Android&#xff09;、微服务平台&#xff08;业务服务&#xff09; 2. 核心架构 Spring Cloud、Spring Boot、Mybatis、R…...

推理加速 --- torch.compile

推理加速-- torch.compile 一、背景介绍1.2 首次推理速度慢1.3 推理多次之后&#xff0c;又会出现一次速度特别慢的情况&#xff0c;感觉好像是重新优化 二、如何使用三、其他设置3.1 mode 设置3.2 backend3.3 fullgraph3.4 dynamic 参考资料 一、背景介绍 PyTorch 2.0 官宣了…...

JS-----数据结构与算法(2)

目录 三. 栈结构 1.认识栈结构 2. 封装栈结构 3. 应用 3-1 十进制转二进制 3-2 进制转换法 四. 队列 1.队列是什么&#xff1f; 2.队列的封装 3. 队列的应用-击鼓传花 4. 双端队列 5.判断是否为回文 三. 栈结构 1.认识栈结构 栈&#xff08;stack&#xff09;又…...

手把手安装TomCat;并部署JPress

目录 一、了解Tomcat&#xff1a; 二、安装 1、获取Tomcat软件包&#xff0c;且需要Java环境。 2、安装jdk 3、安装Tomcat 1.解压并创建软链接&#xff1a; 2.创建启动用户并更改文件权限&#xff1a; 3.编写系统服务文件&#xff1a; 4.重新加载配置文件并启动tomcat…...

tensorflow1.13分布式训练 参考资料 -教程原理

前言 对于数据量较大的时候&#xff0c;通过分布式训练可以加速训练。相比于单机单卡、单机多卡只需要用with tf.device(‘/gpu:0’)来指定GPU进行计算的情况&#xff0c;分布式训练因为涉及到多台机器之间的分工交互&#xff0c;所以更麻烦一些。本文简单介绍了多机(单卡/多卡…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

【C++特殊工具与技术】优化内存分配(一):C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...