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 文件)&…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造,完美适配AGV和无人叉车。同时,集成以太网与语音合成技术,为各类高级系统(如MES、调度系统、库位管理、立库等)提供高效便捷的语音交互体验。 L…...

使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...

ESP32读取DHT11温湿度数据
芯片:ESP32 环境:Arduino 一、安装DHT11传感器库 红框的库,别安装错了 二、代码 注意,DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

【机器视觉】单目测距——运动结构恢复
ps:图是随便找的,为了凑个封面 前言 在前面对光流法进行进一步改进,希望将2D光流推广至3D场景流时,发现2D转3D过程中存在尺度歧义问题,需要补全摄像头拍摄图像中缺失的深度信息,否则解空间不收敛…...

相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术,它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton):由层级结构的骨头组成,类似于人体骨骼蒙皮 (Mesh Skinning):将模型网格顶点绑定到骨骼上,使骨骼移动…...

如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...

dify打造数据可视化图表
一、概述 在日常工作和学习中,我们经常需要和数据打交道。无论是分析报告、项目展示,还是简单的数据洞察,一个清晰直观的图表,往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server,由蚂蚁集团 AntV 团队…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...