【VUE基础】VUE3第三节—核心语法之ref标签、props
ref标签
作用:用于注册模板引用。
用在普通
DOM
标签上,获取的是DOM
节点。用在组件标签上,获取的是组件实例对象。
用在普通DOM
标签上:
<template><div class="person"><h1 ref="title1">小C学安全</h1><h2 ref="title2">前端</h2><h3 ref="title3">Vue</h3><input type="text" ref="inpt"> <br><br><button @click="showLog">点我打印内容</button></div>
</template><script lang="ts" setup name="Person">import {ref} from 'vue'let title1 = ref()let title2 = ref()let title3 = ref()function showLog(){// 通过id获取元素 在dom标签上需要设置id=title1// const t1 = document.getElementById('title1')// 打印内容// console.log((t1 as HTMLElement).innerText)// console.log((<HTMLElement>t1).innerText)// console.log(t1?.innerText)/************************************/// 通过ref获取元素console.log(title1.value)console.log(title2.value)console.log(title3.value)}
</script>
用在组件标签上:
在父组件中设置ref标签,获取到的是子组件对象,还没有获取到真正数据
例如
//APP.vue
<template><Person ref="xiaoc123"/><button @click="test">测试</button>
</template><script lang="ts" setup>import Person from './components/Person.vue'import {ref} from 'vue'let xiaoc123 = ref()function test(){console.log(xiaoc123.value);}
</script>
//Person.vue
<template><div class="person"><h1 ref="title1">小C学安全</h1><h2 ref="title2">前端</h2><h3 ref="title3">Vue</h3><input type="text" ref="inpt"> <br><br><!-- <button @click="showLog">点我打印内容</button> --></div>
</template><script lang="ts" setup name="Person">
import { ref } from 'vue'let name = ref('xiaoc')
let age = ref(20)
</script>
以上代码并没有获取到Person.vue中具体的name,age值
需要使用defineExpose将组件中的数据交给外部,就可以获取到name,age值
例如:
//APP.vue
<template><Person ref="xiaoc123"/><button @click="test">测试</button>
</template><script lang="ts" setup>import Person from './components/Person.vue'import {ref} from 'vue'let xiaoc123 = ref()function test(){console.log(xiaoc123.value);}
</script>
//Person.vue
<template><div class="person"><h1 ref="title1">小C学安全</h1><h2 ref="title2">前端</h2><h3 ref="title3">Vue</h3><input type="text" ref="inpt"> <br><br><!-- <button @click="showLog">点我打印内容</button> --></div>
</template><script lang="ts" setup name="Person">
import { ref,defineExpose } from 'vue'let name = ref('xiaoc')
let age = ref(20)defineExpose({name,age})
Props
在使用
<script setup>
const props = defineProps(['foo'])console.log(props.foo)
</script>
除了使用字符串数组来声明 props 外,还可以使用对象的形式:
// 使用 <script setup>
defineProps({title: String,likes: Number
})
如果你正在搭配 TypeScript 使用
<script setup lang="ts">
defineProps<{title?: stringlikes?: number
}>()</script>
传递不同的值类型
在上述的两个例子中,我们只传入了字符串值,但实际上任何类型的值都可以作为 props 的值被传递。
Number
<!-- 虽然 `42` 是个常量,我们还是需要使用 v-bind -->
<!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
<BlogPost :likes="42" /><!-- 根据一个变量的值动态传入 -->
<BlogPost :likes="post.likes" />
Boolean
<!-- 仅写上 prop 但不传值,会隐式转换为 `true` -->
<BlogPost is-published /><!-- 虽然 `false` 是静态的值,我们还是需要使用 v-bind -->
<!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
<BlogPost :is-published="false" /><!-- 根据一个变量的值动态传入 -->
<BlogPost :is-published="post.isPublished" />
Array
<!-- 虽然这个数组是个常量,我们还是需要使用 v-bind -->
<!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
<BlogPost :comment-ids="[234, 266, 273]" /><!-- 根据一个变量的值动态传入 -->
<BlogPost :comment-ids="post.commentIds" />
Object
<!-- 虽然这个对象字面量是个常量,我们还是需要使用 v-bind -->
<!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
<BlogPost:author="{name: 'Veronica',company: 'Veridian Dynamics'}"/><!-- 根据一个变量的值动态传入 -->
<BlogPost :author="post.author" />
代码演示:
指定固定数据类型
// 定义一个接口,限制每个Person对象的格式
export interface PersonInter {
id:string,
name:string,age:number
}// 定义一个自定义类型Persons
export type Persons = Array<PersonInter>
App.vue
中代码:
<template><Person :list="persons"/>
</template><script lang="ts" setup name="App">
import Person from './components/Person.vue'
import {reactive} from 'vue'import {type Persons} from './types'let persons = reactive<Persons>([{id:'e98219e12',name:'张三',age:18},{id:'e98219e13',name:'李四',age:19},{id:'e98219e14',name:'王五',age:20}])
</script>
Person.vue
中代码:
<template>
<div class="person">
<ul><li v-for="item in list" :key="item.id">{{item.name}}--{{item.age}}</li></ul>
</div>
</template><script lang="ts" setup name="Person">
import {defineProps} from 'vue'
import {type PersonInter} from '@/types'// 第一种写法:仅接收
// const props = defineProps(['list'])// 第二种写法:接收+限制类型
// defineProps<{list:Persons}>()// 第三种写法:接收+限制类型+指定默认值+限制必要性
let props = withDefaults(defineProps<{list?:Persons}>(),{list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}]
})
console.log(props)
</script>
相关文章:
【VUE基础】VUE3第三节—核心语法之ref标签、props
ref标签 作用:用于注册模板引用。 用在普通DOM标签上,获取的是DOM节点。 用在组件标签上,获取的是组件实例对象。 用在普通DOM标签上: <template><div class"person"><h1 ref"title1">…...
生物化学笔记:电阻抗基础+电化学阻抗谱EIS+电化学系统频率响应分析
视频教程地址 引言 方法介绍 稳定:撤去扰动会到原始状态,反之不稳定,还有近似稳定的 阻抗谱图形(Nyquist和Bode图) 阻抗谱图形是用于分析电化学系统和材料的工具,主要有两种类型:Nyquist图和B…...
SQL使用join查询方式找出没有分类的电影id以及名称
系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 描述 现有电影信息…...
对MsgPack与JSON进行序列化的效率比较
序列化是将对象转换为字节流的过程,以便在内存或磁盘上存储。常见的序列化方法包括MsgPack和JSON。以下将详细探讨MsgPack和JSON在序列化效率方面的差异。 1. MsgPack的效率: 优点: 高压缩率: MsgPack采用高效的二进制编码格式&…...
Unix\Linux 执行shell报错:“$‘\r‘: 未找到命令” 解决
linux执行脚本sh xxx.sh报错:$xxx\r: 未找到命令 原因:shell脚本在Windows编写导致的换行问题: Windows 的换行符号为 CRLF(\r\n),而 Unix\Linux 为 LF(\n)。 缩写全称ASCII转义说…...
动态路由--RIP配置(思科cisco)
一、简介 RIP协议(Routing Information Protocol,路由信息协议)是一种基于距离矢量的动态路由选择协议。 在RIP协议中,如果路由器A和网络B直接相连,那么路由器A到网络B的距离被定义为1跳。若从路由器A出发到达网络B需要…...
python - 函数 / 字典 / 集合
一.函数 形参和实参: >>> def MyFirstFunction(name): 函数定义过程中的name是叫形参 ... print(传递进来的 name 叫做实参,因为Ta是具体的参数值!) print前面要加缩进tab,否则会出错。 >>> MyFirstFun…...
connect to github中personal access token生成token方法
一、问题 执行git push时弹出以下提示框 二、解决方法 去github官网生成Token,步骤如下 选择要授予此 令牌token 的 范围 或 权限 要使用 token 从命令行访问仓库,请选择 repo 。 要使用 token 从命令行删除仓库,请选择 delete_repo 其他根…...
Appium启动APP时报错Security exception: Permission Denial
报错内容Security exception: Permission Denial: starting Intent 直接通过am命令尝试也是同样的报错 查阅资料了解到:android:exported | App quality | Android Developers exported属性默认false,所以android:exported"false"修改为t…...
ubuntu22 使用ufw防火墙
专栏总目录 一、安装 sudo apt update sudo apt install ufw 二、启动防火墙 (一)启动命令 sudo ufw enable (二)重启命令 sudo ufw reload 三、配置规则 #允许SSH连接 sudo ufw allow ssh #如果sshd服务端口指定到了8888&a…...
初识STM32:开发方式及环境
STM32的编程模型 假如使用C语言的方式写了一段程序,这段程序首先会被烧录到芯片当中(Flash存储器中),Flash存储器中的程序会逐条的进入CPU里面去执行。 CPU相当于人的一个大脑,虽然能执行运算和执行指令,…...
详解Amivest 流动性比率
详解Amivest 流动性比率 Claude-3.5-Sonnet Poe Amivest流动性比率是一个衡量证券市场流动性的重要指标。这个比率主要用于评估在不对价格造成重大影响的情况下,市场能够吸收多少交易量。以下是对Amivest流动性比率的详细解释: 定义: Amivest流动性比率是交易额与绝对收益率的…...
pycharm小游戏制作
以下是一个使用 Python 和 PyGame库在 PyCharm中创建一个简单的小游戏(贪吃蛇游戏)的示例代码,希望对您有所帮助: import pygame import random# 基础设置 # 屏幕高度 SCREEN_HEIGHT 480 # 屏幕宽度 SCREEN_WIDTH 600 # 小方格…...
昇思11天
基于 MindSpore 实现 BERT 对话情绪识别 BERT模型概述 BERT(Bidirectional Encoder Representations from Transformers)是由Google于2018年开发并发布的一种新型语言模型。BERT在许多自然语言处理(NLP)任务中发挥着重要作用&am…...
AI绘画Stable Diffusion【图生图教程】:图片高清修复的三种方案详解,你一定能用上!(附资料)
大家好,我是画画的小强 今天给大家分享一下用AI绘画Stable Diffusion 进行 高清修复(Hi-Res Fix),这是用于提升图像分辨率和细节的技术。在生成图像时,初始的低分辨率图像会通过放大算法和细节增强技术被转换为高分辨…...
适用于Mac和Windows的最佳iPhone恢复软件
本文将指导您选择一款出色的iPhone数据恢复软件来检索您的宝贵数据。 市场上有许多所谓的iPhone恢复程序。各种程序很难选择并选择其中之一。一旦您做出了错误的选择,您的数据就会有风险。 最好的iPhone数据恢复软件应包含以下功能。 1.安全可靠。 2.恢复成功率高…...
64.ThreadLocal造成的内存泄漏
内存泄漏 程序中已动态分配的堆内存,由于某种原因程序为释放和无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果。内存泄漏的堆积终将导致内存溢出。 内存溢出 没有足够的内存提供申请者使用。 ThreadLocal出现内存泄漏的真实原因 内存泄漏的发…...
深入刨析Redis存储技术设计艺术(二)
三、Redis主存储 3.1、存储相关结构体 redisServer:服务器 server.h struct redisServer { /* General */ pid_t pid; /* Main process pid. */ pthread_t main_thread_id; /* Main thread id */ char *configfile; /* Absolut…...
python读取写入txt文本文件
读取 txt 文件 def read_txt_file(file_path):"""读取文本文件的内容:param file_path: 文本文件的路径:return: 文件内容"""try:with open(file_path, r, encodingutf-8) as file:content file.read()return contentexcept FileNotFoundError…...
日期选取限制日期范围antdesign vue
限制选取的日期范围 效果图 <a-date-pickerv-model"dateTime"format"YYYY-MM-DD":disabled-date"disabledDate"valueFormat"YYYY-MM-DD"placeholder"请选择日期"allowClear />methods:{//回放日期选取范围限制&…...
【大模型】衡量巨兽:解读评估LLM性能的关键技术指标
衡量巨兽:解读评估LLM性能的关键技术指标 引言一、困惑度:语言模型的试金石1.1 定义与原理1.2 计算公式1.3 应用与意义 二、BLEU 分数:翻译质量的标尺2.1 定义与原理2.2 计算方法2.3 应用与意义 三、其他评估指标:综合考量下的多元…...
《优化接口设计的思路》系列:第2篇—小程序性能优化
优化Uniapp应用程序的性能可以从以下几个方面进行优化: 1.减少页面加载时间:避免页面过多和过大的组件,减少不必要的资源加载。可以使用懒加载的方式,根据用户的实际需求来加载页面和组件。 2.节流和防抖:对于频繁触发…...
prototype 和 __proto__的区别
prototype 和 __proto__ 在 JavaScript 中都与对象的原型链有关,但它们各自有不同的用途和含义。 prototype prototype 是函数对象的一个属性,它指向一个对象,这个对象包含了可以由特定类型的所有实例共享的属性和方法。当我们创建一个新的…...
网络中未授权访问漏洞(Rsync,PhpInfo)
Rsync未授权访问漏洞 Rsync未授权访问漏洞是指Rsync服务配置不当或存在漏洞,导致攻击者可以未经授权访问和操作Rsync服务。Rsync是一个用于文件同步和传输的开源工具,通常在Unix/Linux系统上使用。当Rsync服务未经正确配置时,攻击者可以利用…...
DataWhaleAI分子预测夏令营 学习笔记
AI分子预测夏令营学习笔记 一、直播概览 主持人介绍 姓名:徐翼萌角色:DataWhale助教活动目的:分享机器学习赛事经验,提升参赛者在分子预测领域的能力 嘉宾介绍 姓名:余老师背景:Data成员,腾…...
lnmp php7 安装ssh2扩展
安装ssh2扩展前必须安装libssh2包 下载地址: wget http://www.libssh2.org/download/libssh2-1.11.0.tar.gzwget http://pecl.php.net/get/ssh2-1.4.tgz (这里要换成最新的版本) 先安装 libssh2 再安装 SSH2: tar -zxvf libssh2-1.11.0.tar.gzcd libss…...
数据库概念题总结
1、 2、简述数据库设计过程中,每个设计阶段的任务 需求分析阶段:从现实业务中获取数据表单,报表等分析系统的数据特征,数据类型,数据约束描述系统的数据关系,数据处理要求建立系统的数据字典数据库设计…...
提升用户体验之requestAnimationFrame实现前端动画
1)requestAnimationFrame是什么? 1.MDN官方解释 2.解析这段话: 1、那么浏览器重绘是指什么呢? ——大多数电脑的显示器刷新频率是60Hz,1000ms/6016.66666667ms的时间刷新一次 2、重绘之前调用指定的回调函数更新动画? ——requ…...
Mysql慢日志、慢SQL
慢查询日志 查看执行慢的SQL语句,需要先开启慢查询日志。 MySQL 的慢查询日志,记录在 MySQL 中响应时间超过阀值的语句(具体指运行时间超过 long_query_time 值的SQL。long_query_time 的默认值为10,意思是运行10秒以上(不含10秒…...
卫星网络——Walker星座简单介绍
一、星座构型介绍 近年来,随着卫星应用领的不断拓展,许多任务已经无法单纯依靠单颗卫星来完成。与单个卫星相比,卫星星座的覆盖范围显著增加,合理的星座构型可以使其达到全球连续覆盖或全球多重连续覆盖,这样的特性使得…...
C++ Lambda表达式第一篇, 闭合(Closuretype)
C Lambda表达式第一篇, 闭合Closuretype ClosureType::operator()(params)auto 模板参数类型显式模板参数类型其他 ClosureType::operator ret(*)(params)() lambda 表达式是唯一的未命名,非联合,非聚合类类型(称为闭包类型&#…...
移动校园(3):处理全校课程数据excel文档,实现空闲教室查询与课程表查询
首先打开教学平台 然后导出为excel文档 import mathimport pandas as pd import pymssql serverName 127.0.0.1 userName sa passWord 123456 databaseuniSchool conn pymssql.connect(serverserverName,useruserName,passwordpassWord,databasedatabase) cursor conn.cur…...
【MySQL】1.初识MySQL
初识MySQL 一.MySQL 安装1.卸载已有的 MySQL2.获取官方 yum 源3.安装 MySQL4.登录 MySQL5.配置 my.cnf 二.MySQL 数据库基础1.MySQL 是什么?2.服务器,数据库和表3.mysqld 的层状结构4.SQL 语句分类 一.MySQL 安装 1.卸载已有的 MySQL //查询是否有相关…...
查看电脑显卡(NVIDIA)应该匹配什么版本的CUDA Toolkit
被串行计算逼到要吐时,决定重拾CUDa了,想想那光速般的处理感觉(夸张了)不要太爽,记下我的闯关记录。正好我的电脑配了NVIDIA独显,GTX1650,有菜可以炒呀,没有英伟达的要绕道了。回到正…...
优化:遍历List循环查找数据库导致接口过慢问题
前提: 我们在写查询的时候,有时候会遇到多表联查,一遇到多表联查大家就会直接写sql语句,不会使用较为方便的LambdaQueryWrapper去查询了。作为一个2024新进入码农世界的小白,我喜欢使用LambdaQueryWrapper,…...
NoSQL 之 Redis 配置与常用命令
一、关系型数据库与非关系型数据库 1、数据库概述 (1)关系型数据库 关系型数据库是一个结构化的数据库,创建在关系模型(二维表格模型)基础上,一般面向于记 录。 SQL 语句(标准数据查询语言&am…...
用SpringBoot打造坚固防线:轻松实现XSS攻击防御
在这篇博客中,我们将深入探讨如何使用SpringBoot有效防御XSS攻击。通过结合注解和过滤器的方式,我们可以为应用程序构建一个强大的安全屏障,确保用户数据不被恶意脚本所侵害。 目录 什么是XSS攻击?SpringBoot中的XSS防御策略使用…...
2024机器人科研/研发领域最新研究方向岗位职责与要求
具身智能工程师 从事具身智能领域的技术研究或产品开发,制定具身智能技术标准,利用大模型技术来提高机器人的智能化水平,研究端云协同的机器人系统框架,并赋能人形/复合等各类形态的机器人。具体内容包括不限于: 1、负…...
笔记:Newtonsoft.Json 序列化接口集合
在使用 Newtonsoft.Json 序列化接口集合时,一个常见的挑战是如何处理接口的具体实现,因为接口本身并不包含关于要实例化哪个具体类的信息。为了正确序列化和反序列化接口集合,你需要提供一些额外的信息或使用自定义的转换器来指导 Newtonsoft…...
【Unity设计模式】✨使用 MVC 和 MVP 编程模式
前言 最近在学习Unity游戏设计模式,看到两本比较适合入门的书,一本是unity官方的 《Level up your programming with game programming patterns》 ,另一本是 《游戏编程模式》 这两本书介绍了大部分会使用到的设计模式,因此很值得学习 本…...
CDH安装和配置流程
这份文件是一份关于CDH(Clouderas Distribution Including Apache Hadoop)安装的详细手册,主要内容包括以下几个部分: 1. **前言**: - CDH是基于Apache Hadoop的发行版,由Cloudera公司开发。 - 相比…...
SpringMVC:SpringMVC执行流程
文章目录 一、介绍二、什么是MVC 一、介绍 Spring MVC 是一种基于Java的Web框架,它采用了MVC(Model - View - Controller)设计模式,通过吧Model、View和Controller分离,将Web层进行职责解耦,把复杂的Web应…...
如何在前端网页实现live2d的动态效果
React如何在前端网页实现live2d的动态效果 业务需求: 因为公司需要做机器人相关的业务,主要是聊天形式的内容,所以需要一个虚拟的卡通形象。而且为了更直观的展示用户和机器人对话的状态,该live2d动画的嘴型需要根据播放的内容来…...
昇思25天学习打卡营第15天|linchenfengxue
Pix2Pix实现图像转换 Pix2Pix概述 Pix2Pix是基于条件生成对抗网络(cGAN, Condition Generative Adversarial Networks )实现的一种深度学习图像转换模型,该模型是由Phillip Isola等作者在2017年CVPR上提出的,可以实现语义/标签到…...
软考中级数据库系统工程师备考经验分享
前几天软考成绩出了,赶紧查询了一下发现自己顺利通过啦(上午63,下午67,开心),因此本文记录一下我的备考经验分享给大家。因为工作中项目管理类的知识没有系统学习过,本来想直接报名软考高级证书…...
Centos7删除MariaDB
在 CentOS 7 上删除 MariaDB 可以通过 yum 包管理器来完成。以下是一步一步的指导: 打开终端:首先,你需要打开你的 CentOS 7 系统的终端。 停止 MariaDB 服务(如果正在运行):在卸载 MariaDB 之前ÿ…...
【Docker系列】Docker 镜像构建中的跨设备移动问题及解决方案
💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...
C++友元函数和友元类的使用
1.友元介绍 在C++中,友元(friend)是一种机制,允许某个类或函数访问其他类的私有成员。通过友元,可以授予其他类或函数对该类的私有成员的访问权限。友元关系在一些特定的情况下很有用,例如在类之间共享数据或实现特定的功能。 友元可以分为两种类型:类友元和函数友元。…...
黑马苍穹外卖技术亮点 详情
1.使用工厂模式和策略模式实现布隆过滤器解决缓存穿透问题 Bitmap Bitmap是一种数据结构,它使用位图来表示数据。在处理大量数据时,Bitmap可以通过将每个数据元素映射到一个位,然后使用位运算来对数据进行操作。 通过使用Bitmap,…...
Python酷库之旅-第三方库Pandas(005)
目录 一、用法精讲 7、pandas.read_clipboard函数 7-1、语法 7-2、参数 7-3、功能 7-4、返回值 7-5、说明 7-6、用法 7-6-1、代码示例 7-6-2、结果输出 8、pandas.DataFrame.to_clipboard函数 8-1、语法 8-2、参数 8-3、功能 8-4、返回值 8-5、说明 8-6、用法…...