VU3-02
1.一些小点
1.1 npm i -D less (安装less)
-D 安装依赖到开发环境中
只在开发中生效
正式打包的时候没有它,只在开发时有效
1.2 父子组件传参
(1)子组件中定义自己的参数和事件
父传子:const props = defineProps(["item","name"])
子传父:const emit = defineEmits(["deleteItem"])
(2) 子组件中可以直接使用父组件传递过来的数据
子组件中也可以唤起删除事件
emit("deleteItem",传递的数据)
子组件的模板中可以直接通过
$emit("事件名字",参数)
1.3 计算属性与监听属性
计算属性:会有缓存,基于当前属性做派生,支持缓存,只有以来数据放生改变时,才
会重新进行计算,返回一个属性
监听属性:不支持缓存,数据变化,直接会触发相应的操作,执行一个过程
VUE3中解构取值会丢失响应式
1.4 监听数据渲染
使用swiper时,初始化时依赖DOM,所以需要等到界面渲染完成之后再进行初始化。
如果数据是静态的,界面会在mounted时渲染完成
如果数据是通过接口请求的,有可能我们请求到数据的时候,mounted已经执行过了
给数据设置值之后,界面会在updated更新,但我们在开发过程中一般不会操作updated,
容易死循环
所以VUE提供了一个钩子函数
VUE2中:this.$nextTick()
VUE3中:nextTick()
使用此钩子函数可以确保在DOM更新完成后执行回调函数,以便获取最新的DOM状态
2.VUE3计算属性与监听
2.1 watch函数
watch([firstName, secondName], () => {fullName.value = firstName.value + secondName.value
}, {immediate: true, //初始化时立即执行一次deep: true //深度监听,当监听的是引用数据类型时,监听地址和属性的变化
})
watch([() => userName.firstName], () => { //监听对象中的某一个属性fullName.value = userName.firstName + userName.secondName
})
-
- 与watch配置功能一致
- 监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
- 默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
- 通过配置deep为true, 来指定深度监视
2.2 computed函数
const fullName=computed({get:()=>firstName.value+'·'+secondName.value,set:(value:string)=>{ //可以给计算属性进行赋值的操作firstName.value=value.split('·')[0]secondName.value=value.split('·')[1]}
})
2.3 watchEffect函数
watchEffect(()=>{fullName.value=firstName.value+secondName.value
})
-
- 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
- 默认初始时就会执行第一次, 从而可以收集需要监视的数据
- 监视数据发生变化时回调
3.自定义hook函数
3.1 收集用户鼠标点击的页面坐标
import {onBeforeUnmount, onMounted, ref} from "vue";export default function useCustomMouseClick(){const x=ref(-1)const y=ref(-1)function onMouseClick(e:MouseEvent){x.value=e.pageXy.value=e.pageY}onMounted(()=>{document.addEventListener("click",onMouseClick)})onBeforeUnmount(()=>{document.removeEventListener("click",onMouseClick)})return{x,y}
}
3.2 封装ajax请求的hook函数
import {ref} from "vue";
import axios from "axios";export default function(url:string,params:{}){const loading=ref(true)const data=ref()const fd=new URLSearchParams()Object.keys(params).forEach(key=>{fd.append(key,params[key])})axios.post(url,fd).then(res=>{data.value=res.data.rows}).finally(()=>{loading.value=false})return {loading,data}
}
4.VUE3的生命周期
- beforeCreate -> 使用 setup()
- created -> 使用 setup()
- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- errorCaptured -> onErrorCaptured
- onRenderTracked
-
- 注册一个调试钩子,当组件渲染过程中追踪到响应式依赖时调用。
- 这个钩子仅在开发模式下可用,且在服务器端渲染期间不会被调用。
- onRenderTriggered
-
- 注册一个调试钩子,当响应式依赖的变更触发了组件渲染时调用。
- 这个钩子仅在开发模式下可用,且在服务器端渲染期间不会被调用。
5.toRefs
把一个响应式对象转换成普通对象,该普通对象的每个 property 都是一个 ref
应用: 当从合成函数返回响应式对象时,toRefs 非常有用,这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用
问题: reactive 对象取出的所有属性值都是非响应式的
解决: 利用 toRefs 可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性
import {reactive, toRefs} from "vue";const user=reactive({name:"张三",age:18
})
console.log(toRefs(user))
console.log(user)
下图是输出 toRefs(user)和user,可看到 toRefs(user)中的name和age属性为响应式的ref属性,而user中的name和age为非响应式的

6. ref获取元素
注意操作dom元素在onMounted的生命周期
<template><div ref="dom1">我是dom1</div><div ref="dom2">我是dom2</div>
</template>
<script setup lang="ts">
import {onMounted, reactive, ref, toRefs} from "vue";const dom1=ref()const dom2=ref()onMounted(()=>{console.log(dom1.value,'这是dom1')console.log(dom2.value,'这是dom2')})
</script>

7.VUE3的路由
7.1 路由跳转
router.push()
7.2 获取路由参数
useRoute().query
8.VUE3的store (VUEX)
import {defineStore} from "pinia";
import {computed, ref} from "vue";export default defineStore("user", () => {const name = ref('')const isLogin = ref(false)function changeName() {name.value = name.value + 1}const nameCompute = computed(() => {return '《' + name.value + '》'})return {name, isLogin, changeName, nameCompute}
})
VUE3中的VUEX使用pinia,只有state,getter,action
相关文章:
VU3-02
1.一些小点 1.1 npm i -D less (安装less) -D 安装依赖到开发环境中 只在开发中生效 正式打包的时候没有它,只在开发时有效 1.2 父子组件传参 (1)子组件中定义自己的参数和事件 父传子:const props defineProps(["item&quo…...
Linux新手小程序——进度条
前言 目录 前言 需要先了解 1.\r和\n 2.缓冲区 一.理解字符的含义: 学习c语言时,我们可以粗略把字符分为可显字符和控制字符. 在按回车换到下一行开始的操作时,实际上是进行了两个操作:1.让光标跳到下一行(只…...
会点C++还需要再学Python吗?
提到的C、数据结构与算法、操作系统、计算机网络和数据库技术等确实是计算机科学中非常重要的基础知识领域,对于软件开发和计算机工程师来说,它们是必备的核心知识。掌握这些知识对于开发高性能、可靠和安全的应用程序非常重要。Python作为一种脚本语言&…...
Ceph入门到精通- Linux 磁盘管理(block 与 inode)
1 硬盘 block 与 inode 详解 1.1 Sector(扇区)与 Block(块) 1) 硬盘的最小存储单位:sector(扇区),每个扇区储存 512 字节;操作系统会一次性连续读取多个…...
安全DNS,状态码,编码笔记整理
一 DNS DNS(Domain Name System)是互联网中用于将域名转换为IP地址的系统。 DNS的主要功能包括以下几个方面: 域名解析:DNS最主要的功能是将用户输入的域名解析为对应的IP地址。当用户在浏览器中输入一个域名时,操作…...
【业务功能篇53】Springboot 数据封装对象
Entity、VO、DTO解释 1)Entity:实体,与数据库的每一行数据打交道的,它的属性对应数据库每个字段 class User{ private Long idCard; private String name; private Date birthday; ...... } 对应数据库的id,name&…...
将Spring Session存储到Redis中实现持久化
文章目录 Session持久化1. 添加依赖2. 配置redis连接信息3. 存储和读取session从Redis Session持久化 1. 添加依赖 在项目中添加session依赖和redis依赖,如下所示: <dependency><groupId>org.springframework.boot</groupId><art…...
Git工作中常用命令
模拟一个git完整命令流程 有一个名为 example.txt 的文本文件 Hello, this is some text.1、做一些修改并查看文件的差异: # 修改 example.txt 文件 echo "Hello, this is some updated text." > example.txt查看文件的差异 git diffgit diff 命令…...
【电路效应】信号处理和通信系统模型中的模拟电路效应研究(SimulinkMatlab代码实现)
目录 💥1 概述 📚2 运行结果 🎉3 参考文献 🌈4 Matlab代码、Simulink仿真实现 💥1 概述 在信号处理和通信系统模型中,模拟电路效应研究是指考虑到实际电路的特性对信号进行建模和分析的过程。模拟电路效应…...
Spring 的元注解
一、元注解介绍 1.1.源码引入 1.2.元注解介绍 从上面的图片可知,Spring 有四个【负责注解其他注解】的元注解,分别是: Target:标识该注解可以用于标注哪些程序元素,比如类、方法、字段等。 Retention:标…...
【前缀和】238. 除自身以外数组的乘积
238. 除自身以外数组的乘积 解题思路 前缀与后缀的思路对于给定索引i,将它左边的所有数字乘积乘以右边所有数字的乘积初始化两个数组L R计算L[i] L[i - 1] * nums[i - 1] 也就是左侧所有数字的乘积计算R[i] R[i 1] * nums[i 1] 也就是右侧所有数字的成绩计算L…...
【Java中间件】RocketMQ
RocketMQ 一、MQ概述 Message Queue,是一种提供消息队列服务的中间件。提供了消息生产、存储、消费全过程API的软件系统。 MQ的作用 限流削峰:当用户发送超量请求时,将请求暂存,以便后期慢慢处理。如果不使用MQ暂存直接请求到…...
Megatron-LM、NVIDIA NeMo、MegaMolBART 、model_optim_rng.pt 文件是什么?
本文涉及以下几个概念,分别是: Megatron和Megatron-LM-v1.1.5-3D_parallelism NVIDIA NeMo Megatron和Megatron-LM-v1.1.5-3D_parallelism是什么? Megatron是由NVIDIA开发的一种用于训练大规模语言模型的开源框架。它旨在提供高效的分布式…...
2023年信息系统项目管理师如何报名?老司机告诉你
信息系统项目管理师是全国计算机技术与软件专业技术资格(水平)考试(简称软考)项目之一,是由国家人力资源和社会保障部、工业和信息化部共同组织的国家级考试,既属于国家职业资格考试,又是职称资…...
linux ubuntu系统 命令备忘
一、安装软件包的命令 1、验证安装包是否安装 dpkg -s <软件包名> 2、从软件源服务器获取最新的软件信息并缓存到本地 apt update 3、从本地仓库中对比系统中所有已安装的软件,如果有新版本的话则进行升级 apt upgrade 4、列出本地仓库中所有的软件包名…...
我的第一个flutter项目(Android Webview)
前言:flutter开发环境搭建Flutter的开发环境搭建-图解_☆七年的博客-CSDN博客 第一个flutter简单项目,内容是一个主界面,其中: 1.内容点击数字自增 2.跳转一个空页, 3.跳转一个WebView界面 其中涉及添加主键…...
微信机器人搭建详细教程
确保已安装Python和pip。 在D盘上创建名为wxbot的文件夹,并将你的Python机器人项目文件放在这个目录中。 在D盘的wxbot文件夹中打开命令行工具,并创建一个新的Python虚拟环境(可选): python -m venv venv激活虚拟环…...
opengauss安装
opengauss安装 系统环境 Redhat版本:redhat7.6 虚拟机ip:192.168.5.144 Gauss版本:openGauss-5.0.0-CentOS-64bit-all.tar.gz 企业版 一.准备软硬件环境 1.1 安装依赖包 yum -y install bzip2 python3 libaio-devel flex bis…...
什么是SVM算法?硬间隔和软间隔的分类问题
SVM全称是supported vector machine(支持向量机),即寻找到一个超平面使样本分成两类,并且间隔最大。 SVM能够执行线性或⾮线性分类、回归,甚至是异常值检测任务。它是机器学习领域最受欢迎的模型之一。SVM特别适用于中小型复杂数据集的分类。…...
Normalization(BN and LN) in NN
Batch Normalization 称为批标准化。批是指一批数据,通常为 mini-batch;标准化是处理后的数据服从 N ( 0 , 1 ) N(0,1) N(0,1) 的正态分布。在训练过程中,数据需要经过多层的网络,如果数据在前向传播的过程中,尺度发…...
(十)学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端,同时完善学生端的构建。本次工作主要包括: 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题(可多选) 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘:专注于发现数据中…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!
一、引言 在数据驱动的背景下,知识图谱凭借其高效的信息组织能力,正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合,探讨知识图谱开发的实现细节,帮助读者掌握该技术栈在实际项目中的落地方法。 …...
leetcodeSQL解题:3564. 季节性销售分析
leetcodeSQL解题:3564. 季节性销售分析 题目: 表:sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...
HubSpot推出与ChatGPT的深度集成引发兴奋与担忧
上周三,HubSpot宣布已构建与ChatGPT的深度集成,这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋,但同时也存在一些关于数据安全的担忧。 许多网络声音声称,这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...
ubuntu22.04有线网络无法连接,图标也没了
今天突然无法有线网络无法连接任何设备,并且图标都没了 错误案例 往上一顿搜索,试了很多博客都不行,比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动,重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...
五子棋测试用例
一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏,有着深厚的文化底蕴。通过将五子棋制作成网页游戏,可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家,都可以通过网页五子棋感受到东方棋类…...
微服务通信安全:深入解析mTLS的原理与实践
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、引言:微服务时代的通信安全挑战 随着云原生和微服务架构的普及,服务间的通信安全成为系统设计的核心议题。传统的单体架构中&…...
【Linux】Linux安装并配置RabbitMQ
目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的,需要先安…...
