《Vue3学习手记》
下面进入Vue3的学习,以下代码中都有很详细的注释,代码也比较清晰易懂:
Vue3
index.html是入口文件
Vue3通过createApp函数创建一个应用实例
main.ts:
// Vue3中通过createApp函数创建应用实例
// 引入createApp用于创建应用
import { createApp } from 'vue'
// 引入App根组件
import App from './App.vue'createApp(App).mount('#app')
Vue2的API设计是options(配置)风格的
Vue3的API设计是composition(组合)风格的
setup初使用
setup是Vue3中的一个新的配置项,值是一个函数,setup函数中的this是undefined
<script>// TS或JSexport default {name:"Person",// 采用组合式API开发setup(){// 此时的name和age不是响应式的,所以点击按钮更改了名字但并不能显示出来let name="张三"; let age=18;function UpdateName(){name="zhang-san"};function UpdateAge(){age++}function UpdateTel(){alert("Tel:18888888888")}// 将数据、方法交出去,模板中才可以使用return {name,age,UpdateName,UpdateAge,UpdateTel}}}
注意:
data、methods和setup可以一起使用,但是不建议
setup不能读取data中的数据
但data可以读取setup中的数据
setup语法糖
可以将上面的代码简写为:
<script lang="ts" setup name="Person">let name="张三"; let age=18;function UpdateName(){name="zhang-san"};function UpdateAge(){age++}function UpdateTel(){alert("Tel:18888888888")}</script>
ref创建-基本类型和对象类型的响应式数据
当用ref创建响应式时,要加.value
<template><div class="app"><h2>你好啊!{{name}}</h2><h2>年龄{{age}}</h2><button @click="UpdateName">点我修改名字</button><button @click="UpdateAge">点我年龄加1</button><button @click="UpdateTel">点我显示联系方式</button><hr><h2>{{car.brand}}汽车的价格是{{car.price}}万元</h2><button @click="changeName">点击修改汽车名字</button><button @click="changePrice">点击修改汽车价格</button><button @click="changeInfo">点击修改汽车信息</button></div></template><script lang="ts" setup name="Person">// 知识点一:ref创建-基本类型的响应式数据// 首先 引入refimport {ref} from "vue"let name=ref("张三"); let age=ref(18);function UpdateName(){name.value="zhang-san"};function UpdateAge(){age.value++}function UpdateTel(){alert("Tel:18888888888")}
// =========================================================// 知识点二:ref创建-对象类型的响应式数据let car=ref({brand:"大众",price:20})function changeName(){car.value.brand="宝马" //注意这里的写法!当用ref创建响应式时,car不是响应式,car.value才是响应式};function changePrice(){car.value.price=100}
// =========================================================// 知识点三:ref创建-对象类型的响应式数据-重新分配对象// 点击按钮同时修改汽车名称和价格信息,即需要修改car对象里的所有数据function changeInfo (){// car.value.brand="宝马"// car.value.price=100// 上面的写法可以实现,但是当数据过多时,太麻烦;用下面的写法更容易实现car.value={brand:"宝马",price:100}}</script>
reactive创建-对象类型的响应式数据以及Object.assign
当用reactive创建响应式时,直接写,不用写value
<template><div class="app"><h2>{{car.brand}}汽车的价格是{{car.price}}万元</h2><button @click="changeName">点击修改汽车名字</button><button @click="changePrice">点击修改汽车价格</button><button @click="changeInfo">点击修改汽车信息</button><h2>游戏栏目:</h2><ul><li v-for="game in games" :key="game.id">{{game.name}}</li></ul></div></template><script lang="ts" setup name="Person">// 知识点一:reactive创建-对象类型的响应式数据// 首先 引入reactiveimport {reactive} from "vue"let car=reactive({brand:"大众",price:20})function changeName(){car.brand="宝马" //注意这里的写法!};function changePrice(){car.price=100}// reactive创建-数组对象类型的响应式数据let games=reactive([{id:"01",name:"王者荣耀"},{id:"02",name:"我的世界"},{id:"03",name:"蛋仔派对"}])
// =========================================================// 知识点二:reactive创建-对象类型的响应式数据-重新分配对象// 点击按钮同时修改汽车名称和价格信息,即需要修改car对象里的所有数据function changeInfo (){// car.brand="宝马"// car.price=100// 上面的写法可以实现,但是当数据过多时,太麻烦;用下面的写法更容易实现// car={brand:"宝马",price:100} //当用reactive创建响应式,需要重新分配对象这样写页面不能更新// 需要使用Object.assign()Object.assign(car,{brand:"宝马",price:100})}</script>
toRef和toRefs
<template><div class="app"><h2>个人信息:</h2><h2>姓名:{{person.name}}</h2><h2>年龄:{{person.age}}</h2><button @click="UpdateName">点我修改名字</button><button @click="UpdateAge">点我年龄加1</button><hr><h2>游戏栏目:</h2><ul><li v-for="game in games" :key="game.id">{{game.name}}</li></ul><button @click="UpdateGameName">点我修改第一个游戏名字</button></div>
</template><script lang="ts" setup name="Person">
// 知识点一:toRefs
// 首先 引入toRefs
import {ref,reactive,toRefs,toRef} from "vue"let person=reactive({name:"张三",age:18})// 按照前边的讲述可以修改信息。但当数据过多时太麻烦,可以先解构再修改//let {name,age}=person //这样写并不能修改数据,person是响应式的,但是name和age并不是。let {name,age}=toRefs(person) //加上toRefs,person是响应式的,解构出的name和age也是响应式的。需要注意:name和age是ref创建的响应式,要写valuefunction UpdateName(){name.value="李四"}function UpdateAge(){age.value++}
// =========================================================// 知识点二:toRef// 和toRefs一样,但是toRefs是可以把person中所有属性一次性解构出来,且是响应式;但是toRef需要一个一个解构// 用toRef尝试解构数组let games=ref([{id:"01",name:"王者荣耀"},{id:"02",name:"我的世界"},{id:"03",name:"蛋仔派对"}])let gameName=toRef(games.value[0],"name") //注意写法!!!function UpdateGameName(){gameName.value="第五人格"}
</script>
计算属性computed
计算属性有缓存,不管使用多少次都调用一次
但是方法没有缓存,使用几次调用击此
<template><div class="app"><h2>姓:{{firstName}}</h2><h2>名:{{lastName}}</h2><h2>全名:{{fullName}}</h2><!-- <button @click="changeFirstName">点击修改姓</button><button @click="changeLastName">点击修改名</button> --><button @click="changeFullName">点击修改全名</button></div>
</template><script lang="ts" setup name="Person">// 知识点一:计算属性computed// 首先 引入computed// 通过修改姓和名来修改全名(此时,fullName是只读的)
import {ref,computed} from "vue"let firstName=ref("zhang");let lastName=ref("san");// let fullName=computed(()=>{ //注意语法// return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+"-"+lastName.value.slice(0)// })// function changeFirstName(){// firstName.value="li"// }// function changeLastName(){// lastName.value="si"// }
// =========================================================// 知识点二:修改fullName,实现fullName既可读又可写。// 通过fullName来改变姓和名,而不是通过姓和名来改变fullNamelet fullName=computed({get(){return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+"-"+lastName.value.slice(0)},set(val){ //val指的是想要修改的名字let [str1,str2]=val.split("-")firstName.value=str1lastName.value=str2}})function changeFullName(){fullName.value="li-si"}
</script>
相关文章:
《Vue3学习手记》
下面进入Vue3的学习,以下代码中都有很详细的注释,代码也比较清晰易懂: Vue3 index.html是入口文件 Vue3通过createApp函数创建一个应用实例 main.ts: // Vue3中通过createApp函数创建应用实例 // 引入createApp用于创建应用 import { crea…...
【Ubutun】 在Linux Yocto的基础上去适配4G模块
1)、完整解决流程总结 一. 固定4G模块的网络接口名 usb0(基于物理路径) # 创建UDEV规则文件 sudo vi /etc/udev/rules.d/10-4g-rename.rules添加内容: SUBSYSTEM"net", ACTION"add", ATTRS{busnum}"2&…...
达梦数据库-学习-15-大内存SQL相关视图介绍
目录 一、环境信息 二、介绍 三、数据字典表 1、V$MEM_POOL 2、V$SQL_STAT 3、V$SQL_STAT_HISTORY 4、V$LARGE_MEM_SQLS 5、V$SYSTEM_LARGE_MEM_SQLS 四、总结 一、环境信息 名称值CPU12th Gen Intel(R) Core(TM) i7-12700H操作系统CentOS Linux release 7.9.2009 (Co…...
分治-归并系列一>翻转对
目录 题目:解析:策略一: 代码:策略二: 代码: 题目: 链接: link 这题和逆序对区别点就是,要找到前一个元素是后一个元素的2倍 先找到目标值再,继续堆排序 解析࿱…...
微服务面试题
五大组件 注册中心/配置中心 nacos 服务注册 服务启动时 将自己的id等信息发送给nacos 完成注册 服务发现 服务需要调用其他服务时 从nacos获取服务列表 交给负载均衡选择 服务监控 临时实例 由服务每隔一段时间注册中心发送信息 表示自己存活 若注册中心超过一定时间没有…...
高级java每日一道面试题-2025年3月31日-微服务篇[Nacos篇]-Nacos集群模式下的部署方案有哪些?
如果有遗漏,评论区告诉我进行补充 面试官: Nacos集群模式下的部署方案有哪些? 我回答: Nacos 集群模式下的部署方案详解 在 Java 高级面试中,Nacos 集群部署是考察候选人对分布式系统高可用性和扩展性理解的重要议题。以下是几种常见的 Nacos 集群部…...
3dmax的python通过普通的摄像头动捕表情
1、安装python 进入cdm,打python要能显示版本号 >>>(进入python提示符模式) import sys sys.path显示python的安装路径, 进入到python.exe的路径 在python目录中安装(ctrlz退出python交互模式) 2、pip install mediapipe…...
vue3+vite Cannot find module ‘@/XXXXXX‘ or its corresponding type declarations
在使用vue3vite 创建新的工程时会出现Connot find module /xxx错误,根本原因是vite 中没有配置跟目录别名导致的,可以在vite.config.ts 中增加如下配置 如果在tsconfig.json中增加 "compilerOptions": {"paths": {"/*": …...
vmware-exporter容器
vmware-exporter干嘛的,需要的都知道,不再赘述,如果你不了解,说明你也用不到,此文可略过。 如果你嫌自行部署比较麻烦,可移步https://download.csdn.net/download/qq_28608175/90595900下载容器打包文件&a…...
异形遮罩之QML中的 `OpacityMask` 实战
文章目录 🌧️ 传统实现的问题👉 效果图 🌈 使用 OpacityMask 的理想方案👉代码如下🎯 最终效果: ✨ 延伸应用🧠 总结 在 UI 设计中,经常希望实现一些“异形区域”拥有统一透明度或颜…...
代码随想录算法训练营Day27 | Leetcode 56. 合并区间、738.单调递增的数字、968.监控二叉树
代码随想录算法训练营Day27 | Leetcode 56.合并区间、738.单调递增的数字、968.监控二叉树 一、合并区间 相关题目:Leetcode56 文档讲解:Leetcode56 视频讲解:Leetcode56 1. Leetcode56. 合并区间 以数组 intervals 表示若干个区间的集合&am…...
【SQL】常见SQL 行列转换的方法汇总 - 精华版
【SQL】常见SQL 行列转换的方法汇总 - 精华版 一、引言二、SQL常见的行列转换对比1. 行转列 Pivoting1.1 CASE WHEN 聚合函数1.2 IF 聚合函数1.3 PIVOT操作符 2.列转行 Unpivoting2.1 UNION ALL2.2 EXPLODE函数(Hive/Spark&#…...
docx文档转为pdf文件响应前端
1、转换文件(docx~pdf) 1.引入pom依赖 <dependency><groupId>com.aspose</groupId><artifactId>aspose-words</artifactId><version>20.12.0</version> </dependency>2.读取docx文档数据-转换 // 初…...
python办公自动化------word转换pdf
需要安装包:docx2pdf 例1:将docx文件转换为pdf文件 from docx2pdf import convertconvert("./dataFile/test_doc.docx", "./dataFile/测试文件转换.pdf") 运行结果:...
cs224w课程学习笔记-第10课
cs224w课程学习笔记-第10课 异构图 前言一、异构图1、异构图定义2、异构图与同构图 二、异构图下的GNN1、GCN扩展至RGCN1.1 RGCN原理1.2 异构图的任务预测特点1.3 异构图任务预测基础案例 2、完整的异构图GCN三、异构图下的Transformer 前言 异构图的定义是节点内部存在类型不…...
leetcode每日一题:查询数组异或美丽值
引言 今天的每日一题原题是2843. 统计对称整数的数目,由于数据量很小,最大只是到10000,所以直接模拟即可,不需要复杂的数位DP,反而执行的更慢。更换成前几天遇到的更有意思的一题来写这个每日一题。 题目 2527. 查询…...
【C#】一种优雅的基于winform的串口通信管理
serialPort.DataReceived、串口优雅管理 完整《C#串口通信系统》功能清单 Part 1 — SerialPortManager.cs —— 串口核心管理类 using System; using System.IO.Ports; using System.Text; using System.Threading; using System.Windows.Forms;/// <summary> /// 专业…...
【Linux】ubuntu环境变量配置以及shell配置文件编写
一、确定配置文件类型 输入命令确定配置文件类型 echo $SHELL输出如果是 /bin/zsh,那就改 .zshrc;如果是 /bin/bash,那就改 .bashrc。 下面以 .bashrc 为例。 二、编辑 ./bashrc 文件 输入命令编辑配置文件。 vim ~/.bashrc在文件末尾添…...
.NET MAUI教程2-利用.NET CommunityToolkit.Maui框架弹Toast
在上一篇博文的基础上继续操作: .NET MAUI教程1-入门并发布apk包安装到真机-CSDN博客 本文内容参考: Toast - .NET MAUI Community Toolkit - Community Toolkits for .NET | Microsoft Learn 1 在NuGet包管理器中安装 MAUI Community Toolkit&…...
Android 16应用适配指南
Android 16版本特性介绍 https://developer.android.com/about/versions/16?hlzh-cn Android 16 所有功能和 API 概览 https://developer.android.com/about/versions/16/features?hlzh-cn#language-switching Android 16 发布时间 Android 16 适配指南 Google开发平台&…...
<C#>在 C# .NET 6 中,使用IWebHostEnvironment获取Web应用程序的运行信息。
在 C# .NET 6 中,IWebHostEnvironment 接口提供了有关应用程序运行环境的信息,例如应用程序的根目录、环境名称等。它在处理文件路径、加载配置文件以及根据不同环境提供不同服务等场景中非常有用。以下是关于 IWebHostEnvironment 的详细用法介绍&#…...
在 STM32 中实现电机测速的方法介绍
在 STM32 中实现电机测速的方法介绍 关键字:M 法测速, T 法测速,编码器 1. 电机测速方法介绍 在电机控制类应用中,经常会需要对电机转速进行检测,测速常用的方式有 M 法测速和 T法测速。 M 法测速是利用在规定时间 …...
第四十六篇 人力资源管理数据仓库架构设计与高阶实践
声明:文章内容仅供参考,需仔细甄别。文中技术名称属相关方商标,仅作技术描述;代码示例为交流学习用途;案例数据已脱敏,技术推荐保持中立;法规解读仅供参考,请以《网络安全法》《数据…...
支持iOS与Android!SciChart开源金融图表库助力高效开发交易应用
如果您想了解更多关于开源财务图表库的iOS和Android应用程序,SciChart高性能的iOS、Android图表库一定不要错过!使用SciChart创建金融、交易呵股票、外汇或加密应用程序变得很容易。 SciChart iOS & macOS是一个功能丰富和强大的OpenGL ES和Metal 2D…...
stack和queue的模拟实现
功能介绍 1.stack stack是栈,它是后进先出,如下图所示: 它是从顶部出数据,从顶部出数据。STL库中提供了几个接口来实现栈。、 它们是: empty判断栈是否为空,返回值是bool。 size是返回栈中的元素个数。…...
【QT】-define (A, B) (quint16)(((A) << 8) | (B)) 分析
不加 quint8 的写法:#define TO_SOURCE(A, B) (quint16)((A << 8) | B) 潜在问题 符号位扩展(如果 A 是负数) 如果 A 是 char 或 int8_t 且为负数(如 0xFF -1),左移 << 8 会导致 符号位扩展&…...
DISTRIBUTED PRIORITIZED EXPERIENCE REPLAY(分布式优先级体验回放)论文阅读
标题:DISTRIBUTED PRIORITIZED EXPERIENCE REPLAY(分布式优先级体验回放) 作者:John Quan, Dan Horgan,David Budden,Gabriel Barth-Maron 单位: DeepMind 发表期刊:Machine Learning 发表时…...
【Qt】QxOrm:下载、安装、使用
1、下载源码 github地址:https://github.com/QxOrm/QxOrm 稳定版本下载:https://github.com/QxOrm/QxOrm/releases/tag/1.5.0 2、编译源码 QxOrm支持cmake编译(CMakeLists.txt)、Qt pro工程编译(QxOrm.pro) 以 QxOrm.pro 为例,编译生成的库,没有在 build-QxOrm-1.5…...
Java I/O 流体系详解与记忆方法
Java I/O 流体系详解与记忆方法 一、I/O 流核心框架 Java I/O 流体系是Java处理输入输出的核心API,主要分为两大阵营: 1. 按数据流向分(输入和输出是相对于内存而言的) 内存:临时存储数据的空间 硬盘:…...
【vLLM 学习】API 客户端
vLLM 是一款专为大语言模型推理加速而设计的框架,实现了 KV 缓存内存几乎零浪费,解决了内存管理瓶颈问题。 更多 vLLM 中文文档及教程可访问 →https://vllm.hyper.ai/ 源代码:vllm-project/vllm """Example Python client…...
CSS学习02 动态列数表格开发,解决多组数据布局与边框重合问题
概要 在前端开发中,表格常用于展示结构化数据。当数据组的字段数量不统一时(如有的行包含 3 组数据,有的行包含 2 组或 1 组),传统固定列数的表格会出现结构错位、边框重合等问题。本文通过 HTML/CSS 规范方法&#x…...
【websocket】使用案例( JSR 356 标准)
目录 一、JSR 356方式:简单示例 1、引入依赖 2、注册端点扫描器 3、编写通过注解处理生命周期和消息 4、细节解读 5、总结 二、聊天室案例 方案流程 1、引入依赖 2、注册端点扫描器 3、编写一个配置类,读取httpsession 4、编写通过注解处理生…...
Tomcat Session 反序列化漏洞(CVE-2025-24813)
1.漏洞描述 Tomcat 是一个开源的、轻量级的 Web 应用服务器 和 Servlet 容器。它由 Apache 软件基金会下的 Jakarta 项目开发,是目前最流行的 Java Web 服务器之一。 该漏洞利用条件较为复杂,需同时满足以下四个条件: 应用程序启用了DefaultS…...
maven导入本地jar示例
1、${project.basedir} 是固定写法 <dependency><groupId>alipay-sdk</groupId><artifactId>alipay-sdk</artifactId><version>1.0</version><scope>system</scope><systemPath>${project.basedir}/src/main/lib…...
哨兵模式下,Redis主从同步原理,新增的Redis从节点如何同步
在Redis哨兵模式下,新增从节点的同步过程遵循全量同步和增量同步相结合的机制,具体原理如下: 一、新增从节点的同步流程 1. 建立连接与初始化请求 新增从节点首次启动时,通过replicaof <master-ip> <master-port>命…...
SpringBoot系列之集成Redisson实现布隆过滤器
基于Spring Boot集成Redisson实现布隆过滤器 在高并发和大数据量的场景下,布隆过滤器是一种非常高效的存储结构,可以用于快速判断一个元素是否存在于集合中。本文将介绍如何在Spring Boot中集成Redisson来实现布隆过滤器,并通过一个订单查询…...
Matlab 非线性阻尼四分之一车体被动和模糊pid控制悬架对比
1、内容简介 Matlab 192-非线性阻尼四分之一车体被动和模糊pid控制悬架对比 可以交流、咨询、答疑 2、内容说明 略 汽车车辆悬架系统的核心元件主要有控制器、导向机构、弹性元件以及减 震器等,该系统是汽车最重要的结构系统之一,主流车辆悬架大致有被…...
JavaWeb 课堂笔记 —— 07 Web 入门、HTTP 协议和Tomcat
本系列为笔者学习JavaWeb的课堂笔记,视频资源为B站黑马程序员出品的《黑马程序员JavaWeb开发教程,实现javaweb企业开发全流程(涵盖SpringMyBatisSpringMVCSpringBoot等)》,章节分布参考视频教程,为同样学习…...
Android学习总结之OKHttp拦截器和缓存
深入理解 OkHttp 拦截器 1. 拦截器接口详解 Interceptor 接口是自定义拦截器的基础,它仅包含一个抽象方法 intercept。以下是对该方法参数和返回值的详细解释: import okhttp3.Interceptor; import okhttp3.Request; import okhttp3.Response; import…...
Activiti(五)- 工作流引擎中流程定义删除机制
1、引言 Activiti作为一款轻量级、开源的工作流和业务流程管理(BPM)平台,在实际运维过程中,随着业务发展会产生大量需要清理的流程定义,不规范的删除操作可能导致数据不一致或系统异常等问题。本文将介绍Activiti中删除流程定义的相关方式及…...
C#里使用MaterialDesign来构造自定义窗口
本例子主要就是创建一个上面的界面, 它是一个采用MaterialDesign开源库来创建的WPF程序。 先要编辑App.xaml文件: <Application x:Class="MDIXWindow.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http:/…...
PyTorch 模型转换为 TensorRT 引擎的通用方法
PyTorch 模型转换为 TensorRT 引擎的通用方法 在深度学习模型的部署过程中,提升推理性能是一个重要的目标。将 PyTorch 模型(.pt 文件)转换为 TensorRT 引擎(.engine 文件)是一种常用的优化手段。本文将介绍几种通用的…...
利用Ruby的Typhoeus编写爬虫程序
Typhoeus是一个基于libcurl的HTTP客户端,支持并行请求,适合高效爬取数据。用户可能想要一个简单的例子,或者需要处理更复杂的情况,比如分页、并发请求或者数据解析。 首先,我应该检查用户是否已经安装了Typhoeus。通常…...
Fabric8 Kubernetes使用介绍
Fabric8 Kubernetes Client 是一个强大的 Java 客户端库,用于与 Kubernetes 集群交互。以下是快速上手指南: 1. 添加依赖 Maven 依赖: <dependency><groupId>io.fabric8</groupId><artifactId>kubernetes-client&…...
种田游戏的综合尝试
游戏角色 详细教程 一、准备工作 1、场景重命名为Farm 2、导入资源 (1) 新建文件夹。Import Asset (2) 导入:人物、走、跑、休息 3、设置摄像机 二、制作角色预制体 1、增加角色,命名为Player,设置材质、人类角色 2、设置角色的空闲…...
uniapp解决上架华为应用市场审核要求-监听权限的申请
支持android平台全局监听权限的申请。当申请权限时,会在页面顶部显示申请权限的目的。主要解决上架华为应用市场审核要求:APP在调用终端权限时,应同步告知用户申请该权限的目的。 因为如果不提示,你上架应用市场会被打打回来 Tip…...
【结肠息肉AI论文集】ASPS: Augmented Segment Anything Model for Polyp Segmentation
摘要 息肉分割在结直肠癌诊断中起着关键作用。最近,Segment Anything Model(SAM)的出现为息肉分割带来了前所未有的潜力,其在大规模数据集上的强大预训练能力使其备受关注。然而,由于自然图像和内窥镜图像之间存在领域…...
MHA详解
MHA(Master High Availability)是一个用于 MySQL 数据库的高可用性解决方案。它基于 MySQL 主从复制机制实现,通过自动化的方式进行故障检测和自动故障转移操作,确保在 MySQL 主节点(Master)发生故障时&…...
蓝桥杯单片机刷题——通过按键触发串口传输电压值
设计要求 通过内部ADC完成电位器RB2的输出电压检测,并显示在数码管上; 通过串口向PC端返回当前检测的电压值。 按键“S4”定义为发送按键,按下按键S4,串口向PC端发送当前检测的电压值。 串口发送格式: U:1.25V\r\…...
github fatal Authentication failed for解决
常用的生成令牌方式不多介绍,参考1 得到令牌后替换url 格式为 https://你的令牌github.com/<USERNAME>/<REPO>.git查看仓库url git remote -v假如为 https://github.com/jiang/megatron.git 令牌为CCCC 则将“令牌”插入github之前 使用 git remote …...