【vue3 入门到实战】7. 标签中的 ref
目录
1. ref 的作用
2. 如何使用
1. ref 的作用
用于注册模板引用
用在普通DOM标签上，获取的是DOM节点。
用在组件标签上，获取的是组件的实例对象。
2. 如何使用
代码如下
<template><div class="app"><h2 ref="title">你好呀</h2><button @click="test">测试</button><Person ref="person"></Person></div>
</template><script setup lang="ts">
import Person from './components/Person.vue'
import { ref } from 'vue';let title = ref();
let person = ref();
function test() {console.log(title.value)console.log(person.value)
}
</script><style>
.app{background: wheat;padding: 20px;
}
</style> 
值得一提的是，这里的获取的组件的实例对象是没有任何信息的。如果想拿到子组件中的信息，需要在子组件 Person.vue 中要使用 defineExpose 暴露内容。
代码如下
<template><div class="person"><div class="person"><h1>需求：水温达到50℃，或水位达到20cm，则联系服务器</h1><h2 id="demo">水温：{{ temp }}</h2><h2>水位：{{ height }}</h2><button @click="changePrice">水温+1</button><button @click="changeSum">水位+10</button></div></div>
</template><script lang="ts" setup name="Person">import {ref,watch,watchEffect} from 'vue'// 数据let temp = ref(0)let height = ref(0)// 方法function changePrice(){temp.value += 10}function changeSum(){height.value += 1}watchEffect(()=>{if(temp.value >= 50 || height.value >= 20){console.log('联系服务器')}})defineExpose({temp,height })
</script>这样控制台打印的内容包含了子组件暴露的内容。
相关文章：
【vue3 入门到实战】7. 标签中的 ref
目录 1. ref 的作用 2. 如何使用 1. ref 的作用 用于注册模板引用 用在普通DOM标签上，获取的是DOM节点。 用在组件标签上，获取的是组件的实例对象。 2. 如何使用 代码如下 <template><div class"app"><h2 ref"titl…...
MAC OS安装Homebrew
文章目录 1.下载Homebrew2.完成安装3.验证安装4.更新 Homebrew作为一个包管理器，提供了一种简便的方式来安装、更新和卸载各种命令行工具和应用程序。相比于手动下载和编译源代码，或者从不同的网站下载安装包，使用Homebrew可以显著减少这些操…...
)
数据结构之栈和队列(超详解)
文章目录 概念与结构栈队列 代码实现栈栈是否为空，取栈顶数据、栈的有效个数 队列入队列出队列队列判空，取队头、队尾数据，队列的有效个数 算法题解有效的括号用队列实现栈用栈实现队列复用 设计循环队列数组结构实现循环队列构造、销毁循环队…...
[Deepseek-自定义Ollama 安装路径+lmStudio 简易安装]
ollama 先下载 https://ollama.org.cn/download 使用 发现报错 检查路径 自己的路径! 再用 .\OllamaSetup.exe /DIRE:\MySoftware\Ollama 删除掉 多余模型 ollama delete <model_name> 例如 ollama delete deepseek-r1:1.5b 下载 ollama run deepseek-r1:1.5b…...
uniapp mqttjs 小程序开发
在UniApp中集成MQTT.js开发微信小程序时，需注意平台差异、协议兼容性及消息处理等问题。以下是关键步骤与注意事项的综合指南： 一、环境配置与依赖安装 安装MQTT.js 推荐使用兼容性较好的版本：mqtt4.1.0（H5和小程序兼容性最佳&…...
LabVIEW位移测量系统
本文介绍了一种基于LabVIEW的位移测量系统，结合先进的硬件设备与LabVIEW平台的强大功能，能够实现对位移的精确测量和高效数据处理。该系统具备高精度、实时性和良好的可扩展性，适用于工程与科学实验中对位移测量的多种需求。 项目背景 位移…...
VMware下Linux和macOS遇到的一些问题总结
1.解决.NET程序通过网盘传到Linux和macOS不能运行的问题 这是文件权限的问题。当你通过U盘将文件传输到虚拟机的macOS和Linux系统时，文件的权限和所有权可能得到了保留或正确设置。但如果你通过网盘上传，文件的权限或所有权可能没有正确设置，…...
Mac: docker安装以后报错Command not found: docker
文章目录 前言解决办法（新的）解决步骤（原来的）不推荐总结 前言 本操作参考 http://blog.csdn.net/enhenglhm/article/details/137955756 原作者，更详细请，查看详细内容请关注原作者。 一般，…...
深度学习里面的而优化函数 Adam，SGD，动量法，AdaGrad 等 | PyTorch 深度学习实战
前一篇文章，使用线性回归模型逼近目标模型 | PyTorch 深度学习实战 本系列文章 GitHub Repo: https://github.com/hailiang-wang/pytorch-get-started 本篇文章内容来自于 强化学习必修课：引领人工智能新时代【梗直哥瞿炜】 深度学习里面的而优化函数 …...
C++自研3D教程OPENGL版本---动态批处理的基本实现
又开始找工作了，借机休息出去旅行两个月，顺便利用这段时间整理下以前写的东西。 以下是一个简单的动态批处理实现： #include <GL/glew.h> #include <GLFW/glfw3.h> #include <iostream> #include <vector>// 顶点结…...
如何使用deepseek开发一个翻译API
什么是deepseek Deepseek 是一个基于人工智能技术的自然语言处理平台，提供了多种语言处理能力，包括文本翻译、语义分析、情感分析等。它通过深度学习模型和大规模语料库训练，能够实现高质量的文本翻译和多语言理解。Deepseek 的核心优势在于…...
Java使用aspose实现pdf转word
Java使用aspose实现pdf转word 一、下载aspose-pdf-21.6.jar包【下载地址】，存放目录结构如图；配置pom.xml。 <!--pdf to word--> <dependency><groupId>com.aspose</groupId><artifactId>aspose-pdf</artifactId>…...
fs 文件系统模块
在 Node.js 中，fs（File System）模块提供了与文件系统进行交互的能力。无论是读取、写入还是操作文件和目录，fs 模块都提供了丰富的 API 支持。本文将详细介绍 fs 模块的基本用法、异步与同步方法的区别以及一些高级功能࿰…...
正激变换器拓扑
正激变换器拓扑是一种常见的DC-DC电源拓扑结构，以下是关于它的详细介绍： 基本组成 - 主开关：通常为MOSFET，用于控制输入电压的通断。 - 变压器：实现电压隔离和电压变换，传递能量。 - 续流二极管&#x…...
Rsyslog omhttp（HTTP输出模块）
个人博客地址：Rsyslog omhttp（HTTP输出模块） | 一张假钞的真实世界 使用Rsyslog的omhttp模块可以将收集的日志数据以HTTP请求的方式输出。该模块支持单条/批量发送数据，支持GZIP压缩，支持HTTPS。 Rsyslog默认未包含o…...
防火墙与Squid代理服务器
服务器的安装、搭建与配置准备前期 虚拟机版本：redhat Enterprise Linux Server release 7.2(Maipo)系统架构：x86虚拟机服务器地址：192.168.195.3Window地址：192.168.195.237进行ISO挂载操作进入root模式[yonghu@localhost 桌面]#su 返回上级目录文件进入media文件中，创建…...
为何实现大语言模型的高效推理以及充分释放 AI 芯片的计算能力对于企业级落地应用来说，被认为具备显著的研究价值与重要意义？
🍉 CSDN 叶庭云：https://yetingyun.blog.csdn.net/ AI 芯片：为人工智能而生的 “大脑” AI 芯片，又称人工智能加速器或计算卡，是专为加速人工智能应用，特别是深度学习任务设计的专用集成电路（A…...
【教程】docker升级镜像
转载请注明出处：小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你，欢迎[点赞、收藏、关注]哦~ 目录 自动升级 手动升级 无论哪种方式，最重要的是一定要通过-v参数做数据的持久化！ 自动升级 使用watchtower，可…...
k8s常见面试题2
k8s常见面试题2 安全与权限RBAC配置如何保护 Kubernetes 集群的 API Server？如何管理集群中的敏感信息（如密码、密钥）？如何限制容器的权限（如使用 SecurityContext）？如何防止容器逃逸࿰…...
mysql运维
1、msyqlLinux通用二进制安装 1. MySQL :: Download MySQL Community Server (Archived Versions)https://downloads.mysql.com/archives/community/https://downloads.mysql.com/archives/community/https://downloads.mysql.com/archives/community/https://downloads.mysql…...
将Deepseek接入pycharm 进行AI编程
目录 专栏导读1、进入Deepseek开放平台创建 API key 2、调用 API代码 3、成功4、补充说明多轮对话 总结 专栏导读 🌸 欢迎来到Python办公自动化专栏—Python处理办公问题，解放您的双手 🏳️🌈 博客主页：请点击——…...
Redis03 - 高可用
Redis高可用 文章目录 Redis高可用一：主从复制 & 读写分离1：主从复制的作用2：主从复制原理2.1：全量复制2.2：增量复制（环形缓冲区） 3：主从复制实际演示3.1：基本流程准…...
日常知识点之面试后反思遗留问题汇总
梳理一下最近接触到的几个知识点： 1：突然问到端口复用 （SO_REUSEADDR） 端口复用一般用在服务端重启时，套接字处于time_wait状态时，无法绑定该端口，导致无法启动问题。 设置端口复用ÿ…...
软考教材重点内容 信息安全工程师 第15章 网络安全主动防御技术与应用
目录 15.1.1 人侵阻断技术原理 15.1.2 人侵阻断技术应用 15.3 网络流量清洗技术与应用 15.3.1 网络流量清洗技术原理 15.3.2 网络流量清洗技术应用 15.4 可信计算技术与应用 15.4.1 可信计算技术原理 15.5 数字水印技术与应用 15.5.1 数字水印技术原理 15.5.2 数字水…...
大模型的底层逻辑及Transformer架构
一、大模型的底层逻辑 1.数据驱动 大模型依赖海量的数据进行训练，数据的质量和数量直接影响模型的性能。通过大量的数据，模型能够学习到丰富的模式和规律，从而更好地处理各种任务。 2.深度学习架构 大模型基于深度学习技术，通常采用多层神经网络进行特征学习与抽象。其中…...
PostgreSQL-字符串函数
字符串连接 SELECT A||B; 字符串连接，适用于字符串与数字连接 SELECT CONCAT(10,a,hello,20.0); 连接所有参数，个数不限，类型不限 字母转换 SELECT LOWER(ABCD); 将字符转换成小写 SELECT UPPER(ABCD); 将字符转换成大写 SELECT IN…...
Qt修仙之路2-1 炼丹初成
widget.cpp #include "widget.h" #include<QDebug> //实现槽函数 void Widget::login1() {QString userusername_input->text();QString passpassword_input->text();//如果不勾选无法登入if(!check->isChecked()){qDebug()<<"xxx"&…...
华为的IPD模式VS敏捷项目管理模式
本文介绍了华为的IPD模式与敏捷项目管理模式的对比。文章详细阐述了两种模式的特点、适用范围及实施要点，为读者提供了全面的理解。 重点内容： 1. IPD模式强调跨部门协同，注重产品全生命周期管理，适用于复杂产品领域。 2. 敏捷…...
Ollama python交互:chat+embedding实践
Ollama简介 Ollama 是一个开源的大型语言模型（LLM）平台，旨在让用户能够轻松地在本地运行、管理和与大型语言模型进行交互。 Ollama 提供了一个简单的方式来加载和使用各种预训练的语言模型，支持文本生成、翻译、代码编写、问答等…...
Redis进阶
Redis持久化： 前面我们讲到mysql事务有四个比较核心的特性： 原子性：保证多个操作打包成一个。一致性：A给B100，A少一百，B必须多一百。持久性：针对事务操作必须要持久生效，不管是重启…...
【蓝桥杯嵌入式】6_定时器输入捕获
全部代码网盘自取 链接：https://pan.baidu.com/s/1PX2NCQxnADxYBQx5CsOgPA?pwd3ii2 提取码：3ii2 这是两个信号发生器，可以通过调节板上的两个电位器R39和R40调节输出频率。 将PB4、PA15选择ch1，两个信号发生器只能选择TIM3和TIM…...
C#常用集合优缺点对比
先上结论： 在C#中，链表、一维数组、字典、List<T>和ArrayList是常见的数据集合类型，它们各有优缺点，适用于不同的场景。以下是它们的比较： 1. 一维数组 (T[]) 优点： 性能高：数组在内存中…...
Python调取本地MongoDB招投标数据库，并结合Ollama部署的DeepSeek-R1-8B模型来制作招投标垂直领域模型
根据你的需求，以下是使用Python调取本地MongoDB招投标数据库，并结合Ollama部署的DeepSeek-R1-8B模型来制作招投标垂直领域模型的步骤： 安装PyMongo 首先，确保你已经安装了PyMongo库，用于Python与MongoDB的交互。如果未…...
【MySQL】深入了解索引背后的内部结构
目录 索引的认识： 作用： 索引的使用： 索引底层的数据结构： 哈希表 AVL树 红黑树 B树： B树： B树搜索： 索引的认识： 索引是数据库中的一个数据结构，用于加速查询…...
pytest-xdist 进行多进程并发测试
在自动化测试中，运行时间过长往往是令人头疼的问题。你是否遇到过执行 Pytest 测试用例时，整个测试流程缓慢得让人抓狂？别担心，pytest-xdist 正是解决这一问题的利器！它支持多进程并发执行，能够显著加快测试…...
蓝桥杯准备 【入门3】循环结构
素数小算法（埃氏筛&&欧拉筛） 以下四段代码都是求20以内的所有素数 1.0版求素数 #include<iostream> using namespace std;int main() {int n 20;for(int i2;i<n;i){int j0;for(j2;j<i;j)//遍历i{if(i%j0){break;}}if(ij){cout&l…...
PHP填表统计预约打卡表单系统小程序
📋 填表统计预约打卡表单系统——专属定制，信息互动新纪元 📊 填表统计预约打卡表单系统，一款专为现代快节奏生活量身打造的多元化自定义表单统计小程序，集信息填表、预约报名、签到打卡、活动通知、报名投票、班级统…...
自定义数据集，使用scikit-learn 中K均值包 进行聚类
1. 引言 K均值聚类是一种无监督学习方法，用于将数据集分为多个簇。通过计算数据点之间的距离并将它们分配到最近的簇中心，K均值算法可以帮助我们发现数据中的自然结构。 2. 数据集创建 首先，我们使用numpy创建一个自定义的二维数据集&…...
Lua中文语言编程源码-第十一节，其它小改动汉化过程
__tostring 汉化过程 liolib.c metameth[] {"__转换为字符串", f_tostring}, lauxlib.c luaL_callmeta(L, idx, "__转换为字符串") lua.c luaL_callmeta(L, 1, "__转换为字符串") __len 汉化过程 ltm.c luaT_eventname[] ltablib.c c…...
Android studio 创建aar包给Unity使用
1、aar 是什么？ 和 Jar有什么区别 aar 和 jar包 都是压缩包，可以使用压缩软件打开 jar包 用于封装 Java 类及其相关资源 aar 文件是专门为 Android 平台设计的 ，可以包含Android的专有内容，比如AndroidManifest.xml 文件 &#…...
4. 【.NET 8 实战--孢子记账--从单体到微服务--转向微服务】--什么是微服务--微服务设计原则与最佳实践
相比传统的单体应用，微服务架构通过将大型系统拆分成多个独立的小服务，不仅提升了系统的灵活性和扩展性，也带来了许多设计和运维上的挑战。如何在设计和实现微服务的过程中遵循一系列原则和最佳实践，从而构建一个稳定、高效、易维…...
大语言模型遇上自动驾驶：AsyncDriver如何巧妙解决推理瓶颈？
导读 这篇论文提出了AsyncDriver框架，致力于解决大语言模型在自动驾驶领域应用中的关键挑战。论文的主要创新点在于提出了大语言模型和实时规划器的异步推理机制，实现了在保持性能的同时显著降低计算开销。通过设计场景关联指令特征提取模块和自适应注入…...
)
第17章 读写锁分离设计模式(Java高并发编程详解：多线程与系统设计)
1.场景描述 对资源的访问一般包括两种类型的动作——读和写(更新、删除、增加等资源会发生变化的动作)，如果多个线程在某个时刻都在进行资源的读操作，虽然有资源的竞争，但是这种竞争不足以引起数据不一致的情况发生，那么这个时候…...
硬盘修复后，文件隐身之谜
在数字时代，硬盘作为数据存储的重要载体，承载着无数珍贵的信息与回忆。然而，当硬盘遭遇故障并经过修复后，有时我们会遇到这样一个棘手问题：硬盘修复后，文件却神秘地“隐身”，无法正常显示。这一…...
Ollama+ page Assist或Ollama+AnythingLLM 搭建本地知识库
参考：【AI】10分钟学会如何用RAG投喂数据给你的deepseek本地模型？_哔哩哔哩_bilibili 方法一：Ollama page Assist 本地知识库 ***下方操作比较精简，详情参考：Ollama 部署本地大语言模型-CSDN博客 1.下载Ollama 2.O…...
树莓派5添加摄像头 在C++下调用opencv
由于树莓派5 os系统升级,正常libcamera创建对象每次失败。 改如下方法成功。 1 创建管道 rpicam-vid -t 0 --codec mjpeg -o udp://127.0.0.1:8554 > /dev/null 2>&1 2 opencv从管道里读取 #include <opencv2/opencv.hpp> #include <iostream>int mai…...
redis之RDB持久化过程
redis的rdb持久化过程 流程图就想表达两点： 1.主进程会fork一个子进程，子进程共享主进程内存数据(fork其实是复制页表)，子进程读取数据并写到新的rdb文件，最后替换旧的rdb文件。 2.在持久化过程中主进程接收到用户写操作&#x…...
Linux后台运行进程
linux 后台运行进程：& , nohup-腾讯云开发者社区-腾讯云 进程 &，后台运行，结束终端退出时结束进程。 nohup 进程 &，后台运行，结束终端后依然保持运行。...
webpack配置方式
1. 基本配置文件 (webpack.config.js)（导出一个对象） 最常见的方式是通过 webpack.config.js 文件来配置 Webpack，导出一个对象。你可以在这个文件中导出一个配置对象，指定入口、输出、加载器、插件等。 // webpack.config.js m…...
123，【7】 buuctf web [极客大挑战 2019]Secret File
进入靶场 太熟悉了，有种回家的感觉 查看源代码，发现一个紫色文件 点下看看 点secret 信息被隐藏了 要么源代码，要么抓包 源代码没有，抓包 自己点击时只能看到1和3处的文件，点击1后直接跳转3，根本不出…...