Vue快速入门(四)——Vue3及组合式API(一)
文章目录
- 一、认识Vue3
- 1. Vue2 选项式 API vs Vue3 组合式API
- 2. Vue3的优势
- 二、使用create-vue搭建Vue3项目
- 1、认识create-vue
- 2. 使用create-vue创建项目
- 三、组合式API - setup选项
- 1. setup选项的写法和执行时机
- 2. setup中写代码的特点
- 3. `<script setup>`语法糖
- 4.小结
- 四、组合式API - reactive和ref函数
- 1. reactive()
- 2、ref()
- 3. 小结
- 五、组合式API - computed
一、认识Vue3
1. Vue2 选项式 API vs Vue3 组合式API
Vue2选项式API格式如下:
<script>
export default {data(){return {count:0}},methods:{addCount(){this.count++}}
}
</script>
Vue3组合式API格式如下:
<script setup>
import { ref } from 'vue'
const count = ref(0)
const addCount = ()=> count.value++
</script>
通过对比可以看出,Vue2的变量要要集中写在data中,方法是要集中写在methods中的;而Vue3的编程代码更少,而且变量和方法是不需要写在特定的地方的,可以随意写在你想放的位置,你可以把有关联的变量和方法集中在一块,这样也非常方便维护哦。
由此可看出Vue3的特点:
- 代码量变少
- 分散式维护变成集中式维护,更易封装复用
2. Vue3的优势

二、使用create-vue搭建Vue3项目
1、认识create-vue
create-vue是Vue官方新的脚手架工具,底层切换到了 vite(下一代构建工具),为开发提供极速响应

2. 使用create-vue创建项目
前置条件 - 已安装16.0或更高版本的Node.js
执行如下命令,这一指令将会安装并执行 create-vue
npm init vue@latest
这一指令将会安装并执行 create-vue

项目创建完成后,项目的目录结构如下:

关键文件有:
- vite.config.js - 项目的配置文件
基于vite的配置 - . package.json - 项目包文件
核心依赖项变成了 Vue3.x 和 vite - main.js - 入口文件
createApp函数创建应用实例 - . app.vue - 根组件
SFC单文件组件 script - template - style
变化一:脚本script和模板template顺序调整
变化二:模板template不再要求唯一根元素
变化三:脚本script添加setup标识支持组合式API
5.index.html - 单页入口提供id为app的挂载
三、组合式API - setup选项
1. setup选项的写法和执行时机
setup选项的写法
<script>export default {setup(){},<相关文章:
Vue快速入门(四)——Vue3及组合式API(一)
文章目录 一、认识Vue31. Vue2 选项式 API vs Vue3 组合式API2. Vue3的优势二、使用create-vue搭建Vue3项目1、认识create-vue2. 使用create-vue创建项目三、组合式API - setup选项1. setup选项的写法和执行时机2. setup中写代码的特点3. `<script setup>`语法糖4.小结四…...
vue项目名修改、webstorm和idea创建的项目重命名、重构项目、修改项目名称
一、需求 就是创建了一个项目,后期需要重命名,怎么办?----> 直接修改?肯定不行,因为里面有些配置也需要修改,假如你只改文件夹名称的话,里面配置都没修改,后期可能会出问题。 二…...
【MySQL】数据库约束和多表查询
目录 1.前言 2.数据库约束 2.1约束类型 2.2 NULL约束 2.3 NUIQUE:唯一约束 2.4 DEFAULT:默认值约束 2.5 PRIMARY KEY:主键约束 2.6 FOREIGN KEY:外键约束 1.7 CHECK约束 3.表的设计 3.1一对一 3.2一对多 3.3多对多 …...
抖店飞鸽客服自动回复软件开发教程与下载体验(.NET版)
转载请注明出处! 原文链接:https://blog.csdn.net/zgyulongfei/article/details/140960430 本文适合的读者为: 抖店(抖音小店)个体商家;抖店店群商家(店群商家:指的是开了几十个抖…...
如何关闭redis的自动清理缓存,声明式事务(含有redis)如何解决,redis setnx锁的使用。
20240809 一、解决redis数据被删除的方案1、发现问题2、解决注意!! 二、声明式事务(当有redis的时候)1. 先看代码2. Transactional(rollbackFor Exception.class)3. 如何解决redis在事务里面,如何保证原子性和一致性3…...
C#中抽象类的使用
前言 我们在C#中使用抽象类可以发挥C#多态的功能,把具有共性的方法定义在抽象类中,然后在不同的类中去实现,可增强代码的可读性、扩展性。 1、不使用抽象类 我们定义了下面两个类XiaoWang、XiaoMing,他们有一个Country方法&…...
揭秘网络攻击:深入理解JavaScript中的跨站点请求伪造(CSRF)
标题:揭秘网络攻击:深入理解JavaScript中的跨站点请求伪造(CSRF) 在当今数字化时代,网络安全已成为每个开发者和用户必须关注的重点。其中,跨站点请求伪造(CSRF)是一种常见的网络攻…...
【项目实战】C++视频共享点播系统
目录 一、项目介绍 1.1 对视频共享点播系统的认识 1.2服务端程序负责功能 1.3 服务端功能模块划分 1.4 项目界面演示 1.5预备知识 二.环境搭建 2.1 安装 Jsoncpp 库 2.1.1 使用jsoncpp 2.2 引入httplib库 2.2.1 安装Git(如果你的系统尚未安装Git…...
Android逆向题解 攻防世界难度4- Android2.0
Jeb打开apk 关键代码在Native函数getResult IDA 打开 so 发现代码比较简单,可以直接静态分析。 输出字符串也就是flag 长度是15,然后分成三段,第一段是可以整除3,第二段是除3取余1,第三段是除3取余等于2࿱…...
P4155 [SCOI2015] 计划
[SCOI2015] 计划 - 洛谷 核心思路 注意到, 可推出, 表示 战士 走 步到达战士位置。 若可以走到且 r < 终点 则答案 然后再加上自己这个哨兵,和走回自己的一个哨兵即可。 AC 代码 #include<bits/stdc.h> using namespace std…...
今日(2024年8月12日)科技新闻
国内: 航空航天领域 我国成功发射卫星互联网高轨卫星。我国试验性冰川保护项目取得积极成效,被形容为“为冰川盖棉被”。2024西太平洋国际航次科考队起航,开启探秘深海海山之旅。我国首架固定翼海上专业搜救航空器正式列编。“祥云”as700载…...
CP AUTOSAR标准之ECUStateManager(AUTOSAR_SWS_ECUStateManager)(更新中……)
1 简介和功能概述 ECU管理器模块(如本文档中所述)是一个基本软件模块(参见[1]),用于管理ECU状态的常见方面。具体来说,ECU管理器模块: 初始化和取消初始化OS、SchM和BswM以及一些基本软件驱动模块。根据请求配置ECU进入休眠和关机状态。管理ECU上的所有唤醒事件ECU管理器模块…...
Java中的中介者模式:解耦复杂系统的有效策略
Java中的中介者模式:解耦复杂系统的有效策略 在软件开发中,随着系统规模的扩大和复杂度的增加,各组件之间的直接交互会导致代码的耦合性增高,从而影响系统的可维护性和可扩展性。为了应对这种复杂性,中介者模式&#…...
transformer(李宏毅老师系列)
自学参考: Transformer:Attention Is All You Need Transformer论文逐段精读 视频课 课件资料 笔记 一、引入 seq2seq:输入一个序列的向量作为input,output的长度由机器自己决定seq2seq model应用: 语音辨识 输入是声音讯号的一串vector 输出…...
XCode15.4真机运行调试
更新Xcode后,没有模拟器内容,而且真机也不显示,编译按钮无法点击,设备在管理运行目标中可见,但无法选中解决方案:下载iOS17.5模拟器,但最坑的是直接点击“Get”下载总是中断,且无法断…...
Google Mock 和 Google Test编写单元测试入门(环境配置、简单执行)
文章目录 环境的配置方法1:从源代码构建第一步:克隆库的源代码第二步:构建库 方法 2:使用 CMake 的 FetchContent示例 CMakeLists.txt 项目的创建项目结构CMakeLists.txt (根目录)main.cpp (示例程序)tests/CMakeLists.txt (测试部…...
shell外壳与Linux权限
🌈个人主页:Yui_ 🌈Linux专栏:Linux 🌈C语言笔记专栏:C语言笔记 🌈数据结构专栏:数据结构 文章目录 1.shell命令以及运行原理2. Linux权限的概念3.Linux权限管理3.1 文件访问者的分类…...
越混越好的项目经理做对了哪些事?现在知道还不晚
作为一名项目经理,你最害怕的是什么? 是做不完的项目?延迟的进度条?还是团队人心涣散? 很多人都知道,得人心者得天下,一个成功的领导者,一定是能做到让人心服口服的。如果失去了团…...
haproxy是什么?以及haproxy基础实验
目录 一、什么是负载均衡? 二、为什么要用haproxy? 三、haproxy的基本部署实验: 3.1 基本配置实验 环境准备: 详细步骤: 3.2 haproxy-多进程与多线程实验: 多进程: 多线程:…...
【向量数据库】向量数据库的构建和检索
1、使用 sentence-transformers 将文本编码为向量 安装 sentence-transformers: pip install -U sentence-transformers在 huggingface 下载 all-MiniLM-L6-v2 模型权重(1_Pooling 是文件夹,里面包含一个 config.json 文件)&…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)
目录 1.TCP的连接管理机制(1)三次握手①握手过程②对握手过程的理解 (2)四次挥手(3)握手和挥手的触发(4)状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统,可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析:自动解析Markdown文档结构PPT模板分析:分析PPT模板的布局和风格智能布局决策:匹配内容与合适的PPT布局自动…...
(转)什么是DockerCompose?它有什么作用?
一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用,而无需手动一个个创建和运行容器。 Compose文件是一个文本文件,通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...
高防服务器能够抵御哪些网络攻击呢?
高防服务器作为一种有着高度防御能力的服务器,可以帮助网站应对分布式拒绝服务攻击,有效识别和清理一些恶意的网络流量,为用户提供安全且稳定的网络环境,那么,高防服务器一般都可以抵御哪些网络攻击呢?下面…...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI,使用客户端或是内部自己搭建集成大模型的终端,加速与大型语言模型(LLM)的结合,同时使用检索增强生成(Retrieval Augmented Generation &#…...
DAY 26 函数专题1
函数定义与参数知识点回顾:1. 函数的定义2. 变量作用域:局部变量和全局变量3. 函数的参数类型:位置参数、默认参数、不定参数4. 传递参数的手段:关键词参数5 题目1:计算圆的面积 任务: 编写一…...
数据分析六部曲?
引言 上一章我们说到了数据分析六部曲,何谓六部曲呢? 其实啊,数据分析没那么难,只要掌握了下面这六个步骤,也就是数据分析六部曲,就算你是个啥都不懂的小白,也能慢慢上手做数据分析啦。 第一…...
Selenium 查找页面元素的方式
Selenium 查找页面元素的方式 Selenium 提供了多种方法来查找网页中的元素,以下是主要的定位方式: 基本定位方式 通过ID定位 driver.find_element(By.ID, "element_id")通过Name定位 driver.find_element(By.NAME, "element_name"…...
今日行情明日机会——20250609
上证指数放量上涨,接近3400点,个股涨多跌少。 深证放量上涨,但有个小上影线,相对上证走势更弱。 2025年6月9日涨停股主要行业方向分析(基于最新图片数据) 1. 医药(11家涨停) 代表标…...
