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

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

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

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

ESP32读取DHT11温湿度数据

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

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

相机从app启动流程

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

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)

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

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

dify打造数据可视化图表

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

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...