当前位置: 首页 > 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;&…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

Python Ovito统计金刚石结构数量

大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

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

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