Vue3的学习
create-vue创建vue3项目
create-vue是官方新的脚手架工具,底层切换到了vite(下一代构建工具),为开发提供急速响应
- 前提环境条件:控制面板输入node -v,显示的是安装了16.0或更高版本的Node.js
- 创建一个Vue应用:npm init vue@latest
- vite.config.js --- 项目的配置文件基于vite的配置
- package.json --- 项目包文件核心依赖项是vue3
- main.js --- 入口文件createApp函数创建应用实例
- app.vue --- 根组件SFC单文件组件script-template
- 脚本script和模板template顺序调整
- 模板template不再要求唯一根元素
- 脚本script添加setup表示支持组合式API
- index.html --- 单页入口,提供id为app的挂载点
创建项目和yun:
创建一个Vue应用:npm init vue@latest
接下来会需要输入项目名,此时输入的项目名是:vue_project
接下来输入执行下面的语句(之后如果要打开项目也是指令,终端要进入项目所在的目录)
cd vue_project
npm install
npm run dev(之后打开项目使用这条语句)
组合式API
setup
执行时,比beforeCreate还要早
setup函数中,获取不到this(this是underfined)
vue2的完整写法:
(定义数据+函数 然后以对象方式return)
<script>export default {setup(){console.log('setup函数')const message='hello'const logMessage=()=>{console.log(message)}return{message,logMessage}},beforeCreate() {console.log('beforeCreate函数')}}
</script>
<template><div>{{ message }}</div><button @click="logMessage">按钮</button>
</template>
vue3的语法糖可以简化return:
(使用组合式API)
<script setup>
//数据
const message='this is a message'
const logMessage=()=>{console.log(message)
}
</script>
<template><div>{{ message }}</div><button @click="logMessage">按钮</button>
</template>
reactive()和ref()
reactive()
接收一个对象类型的数据,返回一个响应式的对象
<script setup>import {reactive} from "vue";const state=reactive({count:100})const setCount=()=>{state.count++}
</script><template><div>{{state.count}}</div><button @click="setCount">++</button>
</template>
ref()
接收简单类型或复杂类型,返回一个响应式对象
本质:是在原有传入数据的基础上,外层包了一层对象,包成了复杂类型
底层:保存复杂类型之后,再借助reactive实现的响应式
注意:
- 脚本中访问数据,需要通过.value
- 在template中,.value不需要加(帮我们扒了一层)
<script setup>import {ref} from 'vue'const count =ref(简单类型或者复杂类型数据)
</script>
<script setup>// import {reactive} from "vue";// const state=reactive({// count:100// })// const setCount=()=>{// state.count++// }import {ref} from "vue";const count=ref(0)const setCount=()=>[count.value++]
</script><template><div>{{count}}</div><button @click="setCount">++</button>
</template>
computed
步骤:
- 导入computed函数
- 执行函数在
- 回调参数中return基于响应式数据做计算的值,用变量接收
只读写法:

可写方法:

watch函数
监听一个或多个数据的变化,数据变化时执行回调函数
监听单个数据
- 导入watch函数
- 执行watch监听传入要监听的咸阳市数据(ref对象)和回调函数

监听多个数据
不管哪个数据变化都需要监听
1.其中第三个参数可以写immediate:true,可以立刻执行(例如在打开页面时)

2.deep深度监视,默认watch进行的是浅层监视
- const ref1=ref(简单类型)可以直接监视
- const ref2=ref(复杂类型)监视不到复杂类型内部数据的变化
3.对于对象中的单个属性,进行监视

组合式API下的数据传递
父传子

由于写了setup,所以无法直接配置props,此处借助于“编译器宏”函数defineProps接收传递的数据
defineProps原理
就是编译阶段的一个标识,实际编译器解析时,遇到后会进行编译转换

子传父
- 父组件中给子组件标签通过@绑定事件
- 通过defineEmits编译器宏生成emit方法
- 子组件内部通过emit方法触发事件


模板引用
概念:通过ref标识获取真实的都没对象或者组件实例对象
- 通过ref函数,生成一个ref对象
- 通过ref标识,进行绑定
- 通过ref对象,value即可访问到绑定的元素

defineFxpose()
在默认情况下<script setup>语法糖组件内部的属性和方法是不开放给父组件访问的,可以通过defineFxpose编译宏指定哪些属性和方法可以访问
defineExpose({testMessage
})
project&inject
跨层组件通过provide函数提供数据
底层组件通过inject函数获取数据



新特性defineOptions
1.在vue2中用的<script>标签,其中setup,props,emits等是平级属性
2.在vue3中是用的<script setup>标签,setup属性已经没有了,无法添加与其平行的属性,所以引入了defineProps和defineFmits这两个宏。
如果要定义组件的name或其他自定义属性,还是得回到最原始的用法——再添加一个普通的<script>标签

所以引用了defineOptions宏,只要是用来定义Options API选项,可以定义defineOptions任意选项,props,emit,expose,slots除外(这些可以使用defineXXX来实现)

defindModel
要使用,在vite.config.js中加入配置,接着要重启项目



Pinia
Pinia是Vue的最新的状态管理工具,是Vuex的替代品
可以在创建Vue项目时Pinia那一栏选择Yes,也可以在该项目的终端输入指令:yarn add pinia 或者使用 npm install pinia![]()
相关文章:
Vue3的学习
create-vue创建vue3项目 create-vue是官方新的脚手架工具,底层切换到了vite(下一代构建工具),为开发提供急速响应 前提环境条件:控制面板输入node -v,显示的是安装了16.0或更高版本的Node.js创建一个Vue应…...
什么是Peppol ID?如何创建?
Peppol 网络的两大优势是安全和高效,由于Peppol 最常用于电子发票,因此这些优势在电子发票上展露无遗。相比之下,通过电子邮件发送 PDF 格式的发票和其他文件不仅处理成本较高,而且容易出现发票欺诈。 如果您所在的公共部门组织或…...
Spring注解大揭秘:@Component、@Service、@Repository详解
Spring注解大揭秘:Component、Service、Repository详解 前言比较 前言 想象一下,你正在构建一个复杂的Spring应用程序。你需要管理各种不同类型的组件,包括服务层、数据访问层和通用组件。Spring的Component、Service和Repository注解就像是你…...
Innodb底层原理与Mysql日志机制
MySQL内部组件结构 Server层 主要包括连接器、词法分析器、优化器、执行器等,涵盖 MySQL 的大多数核心服务功能,以及所有的内置函数(如日期、时间、数学和加密函数等),所有跨存储引擎的功能都在这一层实现,…...
浅谈大数据背景下用户侧用电数据在电力系统的应用与发展分析
安科瑞 华楠 摘要:随着能源互联网、互联网、新型传感技术的持续推进,电力用户侧用电数据呈现指数级剧增、异构性增强的情况,逐渐构成了用户侧用电行为大数据。然而目前对电力领域的数据价值挖掘于电网内部和电源端,用户侧庞大且蕴…...
20230919在WIN10下使用python3将PDF文档转为DOCX格式的WORD文档
20230919在WIN10下使用python3将PDF文档转为DOCX格式的WORD文档 2023/9/19 11:20 python pdf word https://blog.csdn.net/u013185349/article/details/130059657 Python实现PDF转Word文档 AcceptedLin 已于 2023-04-10 14:45:17 修改 1243 收藏 1 文章标签: pd…...
PCR检测试剂——博迈伦
PCR(聚合酶链式反应)是一种常用的分子生物学技术,被广泛应用于基因分型、基因表达分析、病原体检测等领域。在PCR实验中,PCR检测试剂是必不可少的重要组成部分,它们包括引物、酶、缓冲液和核苷酸。 1. 引物(…...
spring一个项目多个模块聚合打包问题解决方案
文章目录 1.问题描述:2.解决方案一、创建聚合父工程二、创建子模块(module)三、编写子模块代码1.模块1(demo-one)2.模块2(demo-tow) 四、创建聚合模块 (demo-starter)1. …...
Linux设备树(Device Tree)何时被解析
Linux设备树(Device Tree)是在内核启动阶段就会被解析。当 Linux 内核启动的时候,它会读取设备树文件(dtb文件)并根据里面的信息来组织设备、加载驱动等。在驱动代码里,通常我们是在驱动初始化(…...
【Elasticsearch】数据简单操作(二)
简介:Elasticsearch(ES)是一个开源的分布式搜索和分析引擎,用于快速存储、搜索和分析大量数据。它具有高性能、可扩展性和灵活性的特点,被广泛用于构建实时搜索、日志分析、数据可视化等应用。 本文主要介绍ES索引的操…...
4 vCPU 实例达成 100 万 JSON API 请求/秒的优化实践
“性能工程” (Performance engineering)是个日渐流行的概念。顾名思义“性能工程”是包含在系统开发生命周期中所应用的一个技术分支,其目的就是确保满足非功能性的性能需求,例如:性能、可靠性等。由于现代软件系统变…...
呼叫中心系统有什么优势
在随着企业的管理水平也在不断提高。企业经营管理中所涉及到的各种复杂问题都有逐渐凸显出来。传统的呼叫中心已无法满足企业服务需求和客户满意度变化的要求。因此通过呼叫中心系统将企业业务流程和数据整合起来进行管理和运营已经成为目前企业管理领域中较为流行和成熟之选。…...
如何在linux操作系统下安装nvm
本文主要介绍如何在linux操作系统下安装nvm,如果想知道nvm如何在windows操作系统下使用,请参考文章如何通过nvm管理多个nodejs版本_nvm 查看所有node版本-CSDN博客。 1、nvm下载 nvm全称Node Version Manager,即Node版本管理器。访问官网地址…...
Linux 入门:基本指令
本篇文章来介绍我们在初学Linux时可以会碰倒的一些基本指令,让我们对这些指令有一个基本的了解。 目录 01. ls 指令 02. pwd 命令 03. cd 指令 04. touch 指令 05. mkdir 指令(重要) 06. rmdir指令 && rm 指令(重…...
IP转地理位置:探讨技术与应用
IP地址是互联网上设备的唯一标识符,而将IP地址转换为地理位置信息是网络管理、安全监控和市场定位等领域中的一项重要任务。本文将深入探讨IP转地理位置的技术原理和各种应用场景。 IP地址与地理位置 IP地址(Internet Protocol Address)是一…...
关于埋点上报
一、埋点上报结构包含哪些? 埋点上报结构一般包含以下信息: 事件名称:标识上报的是哪个事件,例如“注册成功”或“点击按钮”等。事件发生时间:记录事件发生的时间戳。用户ID:标识事件所属的用户。设备信息…...
最新博客园图片上传接口,模拟实现图片上传
简单看了一下博客园的图片上传接口,可以拿来做图床工具,仅供参考学习,请勿滥用。 1、实例代码 #!/usr/bin/python # -*- coding: UTF-8 -*- """ author: Roc-xb """import requestsurl "https://uplo…...
ROS2 从头开始:第 08/8回 - 使用 ROS2 生命周期节点简化机器人软件组件管理
一、说明 欢迎来到我在 ROS2 上的系列的第八部分。对于那些可能不熟悉该系列的人,我已经涵盖了一系列主题,包括 ROS2 简介、如何创建发布者和订阅者、自定义消息和服务创建、...
Vue组件库Element
目录 Vue组件库ElementElement简介Element快速入门环境配置Element常用组件Table表格Table表格演示Table表格属性详解 Pagination分页Pagination分页演示Pagination分页属性详解Pagination分页事件详解 Dialog对话框Dialog对话框组件演示Dialog对话框属性详解 Form表单Form表单…...
broadcast自动扩展
broadcast: 1、能够进行维度扩展,是自动的2、在扩展的时候不需要拷贝数据要点: - 从最小的维度开始匹配,如果前面没有维度了,在前面插入一个新的维度。- 插入的新维度size是1,再将其扩展为与目标相同大小si…...
Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)
文章目录 1.什么是Redis?2.为什么要使用redis作为mysql的缓存?3.什么是缓存雪崩、缓存穿透、缓存击穿?3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣(LeetCode) 思路: 笔者写过很多次这道题了,不想写题解了,大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...
将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?
Otsu 是一种自动阈值化方法,用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理,能够自动确定一个阈值,将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
MinIO Docker 部署:仅开放一个端口
MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...
MyBatis中关于缓存的理解
MyBatis缓存 MyBatis系统当中默认定义两级缓存:一级缓存、二级缓存 默认情况下,只有一级缓存开启(sqlSession级别的缓存)二级缓存需要手动开启配置,需要局域namespace级别的缓存 一级缓存(本地缓存&#…...
SQL Server 触发器调用存储过程实现发送 HTTP 请求
文章目录 需求分析解决第 1 步:前置条件,启用 OLE 自动化方式 1:使用 SQL 实现启用 OLE 自动化方式 2:Sql Server 2005启动OLE自动化方式 3:Sql Server 2008启动OLE自动化第 2 步:创建存储过程第 3 步:创建触发器扩展 - 如何调试?第 1 步:登录 SQL Server 2008第 2 步…...
企业大模型服务合规指南:深度解析备案与登记制度
伴随AI技术的爆炸式发展,尤其是大模型(LLM)在各行各业的深度应用和整合,企业利用AI技术提升效率、创新服务的步伐不断加快。无论是像DeepSeek这样的前沿技术提供者,还是积极拥抱AI转型的传统企业,在面向公众…...
PH热榜 | 2025-06-08
1. Thiings 标语:一套超过1900个免费AI生成的3D图标集合 介绍:Thiings是一个不断扩展的免费AI生成3D图标库,目前已有超过1900个图标。你可以按照主题浏览,生成自己的图标,或者下载整个图标集。所有图标都可以在个人或…...
SpringSecurity+vue通用权限系统
SpringSecurityvue通用权限系统 采用主流的技术栈实现,Mysql数据库,SpringBoot2Mybatis Plus后端,redis缓存,安全框架 SpringSecurity ,Vue3.2Element Plus实现后台管理。基于JWT技术实现前后端分离。项目开发同时采 …...
React从基础入门到高级实战:React 实战项目 - 项目四:企业级仪表盘
React 实战项目:企业级仪表盘 欢迎来到 React 开发教程专栏 的第 29 篇!在前 28 篇文章中,我们从 React 的基础概念逐步深入到高级技巧,涵盖了组件设计、状态管理、路由配置、性能优化和实时通信等核心内容。这一次,我…...
