当前位置: 首页 > news >正文

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
在这里插入图片描述
项目创建完成后,项目的目录结构如下:
在这里插入图片描述
关键文件有:

  1. vite.config.js - 项目的配置文件基于vite的配置
  2. . package.json - 项目包文件 核心依赖项变成了 Vue3.x 和 vite
  3. main.js - 入口文件createApp函数创建应用实例
  4. . 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创建的项目重命名、重构项目、修改项目名称

一、需求 就是创建了一个项目&#xff0c;后期需要重命名&#xff0c;怎么办&#xff1f;----> 直接修改&#xff1f;肯定不行&#xff0c;因为里面有些配置也需要修改&#xff0c;假如你只改文件夹名称的话&#xff0c;里面配置都没修改&#xff0c;后期可能会出问题。 二…...

【MySQL】数据库约束和多表查询

目录 1.前言 2.数据库约束 2.1约束类型 2.2 NULL约束 2.3 NUIQUE&#xff1a;唯一约束 2.4 DEFAULT&#xff1a;默认值约束 2.5 PRIMARY KEY&#xff1a;主键约束 2.6 FOREIGN KEY&#xff1a;外键约束 1.7 CHECK约束 3.表的设计 3.1一对一 3.2一对多 3.3多对多 …...

抖店飞鸽客服自动回复软件开发教程与下载体验(.NET版)

转载请注明出处&#xff01; 原文链接&#xff1a;https://blog.csdn.net/zgyulongfei/article/details/140960430 本文适合的读者为&#xff1a; 抖店&#xff08;抖音小店&#xff09;个体商家&#xff1b;抖店店群商家&#xff08;店群商家&#xff1a;指的是开了几十个抖…...

如何关闭redis的自动清理缓存,声明式事务(含有redis)如何解决,redis setnx锁的使用。

20240809 一、解决redis数据被删除的方案1、发现问题2、解决注意&#xff01;&#xff01; 二、声明式事务&#xff08;当有redis的时候&#xff09;1. 先看代码2. Transactional(rollbackFor Exception.class)3. 如何解决redis在事务里面&#xff0c;如何保证原子性和一致性3…...

C#中抽象类的使用

前言 我们在C#中使用抽象类可以发挥C#多态的功能&#xff0c;把具有共性的方法定义在抽象类中&#xff0c;然后在不同的类中去实现&#xff0c;可增强代码的可读性、扩展性。 1、不使用抽象类 我们定义了下面两个类XiaoWang、XiaoMing&#xff0c;他们有一个Country方法&…...

揭秘网络攻击:深入理解JavaScript中的跨站点请求伪造(CSRF)

标题&#xff1a;揭秘网络攻击&#xff1a;深入理解JavaScript中的跨站点请求伪造&#xff08;CSRF&#xff09; 在当今数字化时代&#xff0c;网络安全已成为每个开发者和用户必须关注的重点。其中&#xff0c;跨站点请求伪造&#xff08;CSRF&#xff09;是一种常见的网络攻…...

【项目实战】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&#xff08;如果你的系统尚未安装Git&#xf…...

Android逆向题解 攻防世界难度4- Android2.0

Jeb打开apk 关键代码在Native函数getResult IDA 打开 so 发现代码比较简单&#xff0c;可以直接静态分析。 输出字符串也就是flag 长度是15&#xff0c;然后分成三段&#xff0c;第一段是可以整除3&#xff0c;第二段是除3取余1&#xff0c;第三段是除3取余等于2&#xff1…...

P4155 [SCOI2015] 计划

[SCOI2015] 计划 - 洛谷 核心思路 注意到&#xff0c; 可推出&#xff0c; 表示 战士 走 步到达战士位置。 若可以走到且 r < 终点 则答案 然后再加上自己这个哨兵&#xff0c;和走回自己的一个哨兵即可。 AC 代码 #include<bits/stdc.h> using namespace std…...

今日(2024年8月12日)科技新闻

国内&#xff1a; 航空航天领域 我国成功发射卫星互联网高轨卫星。我国试验性冰川保护项目取得积极成效&#xff0c;被形容为“为冰川盖棉被”。2024西太平洋国际航次科考队起航&#xff0c;开启探秘深海海山之旅。我国首架固定翼海上专业搜救航空器正式列编。“祥云”as700载…...

CP AUTOSAR标准之ECUStateManager(AUTOSAR_SWS_ECUStateManager)(更新中……)

1 简介和功能概述 ECU管理器模块(如本文档中所述)是一个基本软件模块(参见[1]),用于管理ECU状态的常见方面。具体来说,ECU管理器模块: 初始化和取消初始化OS、SchM和BswM以及一些基本软件驱动模块。根据请求配置ECU进入休眠和关机状态。管理ECU上的所有唤醒事件ECU管理器模块…...

Java中的中介者模式:解耦复杂系统的有效策略

Java中的中介者模式&#xff1a;解耦复杂系统的有效策略 在软件开发中&#xff0c;随着系统规模的扩大和复杂度的增加&#xff0c;各组件之间的直接交互会导致代码的耦合性增高&#xff0c;从而影响系统的可维护性和可扩展性。为了应对这种复杂性&#xff0c;中介者模式&#…...

transformer(李宏毅老师系列)

自学参考&#xff1a; Transformer:Attention Is All You Need Transformer论文逐段精读 视频课 课件资料 笔记 一、引入 seq2seq&#xff1a;输入一个序列的向量作为input&#xff0c;output的长度由机器自己决定seq2seq model应用: 语音辨识 输入是声音讯号的一串vector 输出…...

XCode15.4真机运行调试

更新Xcode后&#xff0c;没有模拟器内容&#xff0c;而且真机也不显示&#xff0c;编译按钮无法点击&#xff0c;设备在管理运行目标中可见&#xff0c;但无法选中解决方案&#xff1a;下载iOS17.5模拟器&#xff0c;但最坑的是直接点击“Get”下载总是中断&#xff0c;且无法断…...

Google Mock 和 Google Test编写单元测试入门(环境配置、简单执行)

文章目录 环境的配置方法1&#xff1a;从源代码构建第一步&#xff1a;克隆库的源代码第二步&#xff1a;构建库 方法 2&#xff1a;使用 CMake 的 FetchContent示例 CMakeLists.txt 项目的创建项目结构CMakeLists.txt (根目录)main.cpp (示例程序)tests/CMakeLists.txt (测试部…...

shell外壳与Linux权限

&#x1f308;个人主页&#xff1a;Yui_ &#x1f308;Linux专栏&#xff1a;Linux &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1f308;数据结构专栏&#xff1a;数据结构 文章目录 1.shell命令以及运行原理2. Linux权限的概念3.Linux权限管理3.1 文件访问者的分类…...

越混越好的项目经理做对了哪些事?现在知道还不晚

作为一名项目经理&#xff0c;你最害怕的是什么&#xff1f; 是做不完的项目&#xff1f;延迟的进度条&#xff1f;还是团队人心涣散&#xff1f; 很多人都知道&#xff0c;得人心者得天下&#xff0c;一个成功的领导者&#xff0c;一定是能做到让人心服口服的。如果失去了团…...

haproxy是什么?以及haproxy基础实验

目录 一、什么是负载均衡&#xff1f; 二、为什么要用haproxy&#xff1f; 三、haproxy的基本部署实验&#xff1a; 3.1 基本配置实验 环境准备&#xff1a; 详细步骤&#xff1a; 3.2 haproxy-多进程与多线程实验&#xff1a; 多进程&#xff1a; 多线程&#xff1a;…...

【向量数据库】向量数据库的构建和检索

1、使用 sentence-transformers 将文本编码为向量 安装 sentence-transformers&#xff1a; pip install -U sentence-transformers在 huggingface 下载 all-MiniLM-L6-v2 模型权重&#xff08;1_Pooling 是文件夹&#xff0c;里面包含一个 config.json 文件&#xff09;&…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...