【Vue】Vue3基础

VUE3基础

    • 1、简介
    • 2、创建工程
      • 2.1 基于vue-cli创建(脚手架webpack)
      • 2.2 基于vite创建(推荐)
      • 2.3 目录结构
      • 2.4 vscode插件推荐
    • 3、核心语法
      • 3.1 选项式(options API)和组合式(composition API)
      • 3.2 拉开序幕的setup概述
      • 3.3 响应式数据 - ref创建:可以定义基本类型、对象类型
      • 3.4 响应式数据 - reactive:只能定义对象类型
      • 3.5 响应式数据 - ref 和 reactive 的对比
    • 4、路由
    • 5、pinia
    • 6、组件通信
    • 7、其它API
    • 8、Vue3新组件

1、简介

2、创建工程

2.1 基于vue-cli创建(脚手架webpack)

! 目前 vue-c1i 已处于维护模式,官方推荐基于 vite 创建项目## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 执行创建命令
vue create vue test
## 随后选择3.x
## Choose a version of Vue.js that you want to start the project with (Use arrow keys)
....

2.2 基于vite创建(推荐)

## 1、创建命令
npm create vue@latest## 2、具体配置
## 项目名称
V Project name: 名称(小写、数字、下划线)
## 是否添加TypeScript支持
V Add TypeScript? Yes
## 是否添加JSX支持
V Add jsx support? No
## 是否添加路由环境
V Add Vue Router for Single Page Application development? No
## 是否添加pinia环境
V Add Pinia for state management? No
## 是否添加单元测试
V Add Vitest for Unit Testing? No
## 是否添加端到端测试方案
V Add an End-to-End Testing Solution? ” No
## 是否添加ESLint语法检查
V Add ESLint for code quality? Yes
## 是否添加Prettiert代码格式化
V Add Prettier for code formatting? No
....

2.3 目录结构

public 脚手架
src 源代码文件
main.js
App.vue
components 组件
assets
env.d.ts 飘红时执行npm -i (安装依赖,node_modules)
index.html 入口文件
package-lock.json 包管理文件
package.json 包管理文件
vite.config.ts 工程的配置文件

2.4 vscode插件推荐

在这里插入图片描述

3、核心语法

3.1 选项式(options API)和组合式(composition API)

在这里插入图片描述
在这里插入图片描述

3.2 拉开序幕的setup概述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.3 响应式数据 - ref创建:可以定义基本类型、对象类型

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.4 响应式数据 - reactive:只能定义对象类型

在这里插入图片描述

3.5 响应式数据 - ref 和 reactive 的对比

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4、路由

5、pinia

6、组件通信

7、其它API

8、Vue3新组件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/863638.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Arduino - LED 矩阵

Arduino - LED 矩阵 Arduino - LED Matrix LED matrix display, also known as LED display, or dot matrix display, are wide-used. In this tutorial, we are going to learn: LED矩阵显示器,也称为LED显示器,或点阵显示器,应用广泛。在…

scatterlist的相关概念与实例分析

概念 scatterlist scatterlist用来描述一块内存,sg_table一般用于将物理不同大小的物理内存链接起来,一次性送给DMA控制器搬运 struct scatterlist {unsigned long page_link; //指示该内存块所在的页面unsigned int offset; //指示该内存块在页面中的…

纯硬件FOC驱动BLDC

1. 硬件FOC 图 1 为采用 FOC 的方式控制 BLDC 电机的过程,经由 FOC 变换( Clark 与 Park 变换) ,将三相电流转换为空间平 行电流 ID 与空间垂直电流 IQ。经过 FOC 逆变化逆( Clark 变换与逆 Park 变换) ,将两相电流转换为三相电流用于控 制电…

喜茶新品被迫更名,内容营销专家刘鑫炜谈品牌定位敏锐度和适应性

喜茶,作为茶饮界的知名品牌,一直以其独特的创意和优质的产品受到消费者的喜爱。然而,近期喜茶推出的一款新品“小奶栀”却因其名称发音问题引发了不小的争议。 事件回顾 “小奶栀”这款新品在上市之初,以其独特的口感和创新的命名…

【算法——快慢指针链表】

【如何判断单链表是否有环?链表中"快慢指针"的妙用】 判断环 快慢指针一开始都在开头,快指针2/s,慢指针1/s;如果链表有环,那么二者一定相遇 那么快慢指针的移动步数固定了吗? 链表中心结点 8…

气膜结构的年度维护费用解析—轻空间

气膜结构作为一种新型建筑形式,广泛应用于体育场馆、仓储、展览馆等场所。由于其独特的结构特点,气膜建筑的维护工作显得尤为重要。轻空间将详细探讨气膜结构的年度维护费用构成及影响因素,帮助大家全面了解气膜建筑的运营成本。 气膜结构年度…

android studio 添加aar包

按着以前旧的导包方式栽了大跟头,后面在留老板的的博客下找到了解决办法,记录一下。 Andriod Studio 导入aar最新的方式_gradle 8 引入arr-CSDN博客 最新导包方式 1.在新建libs目录,在app/libs目录下导入aar包(其实就是拷贝过去…

揭秘品牌推广的制胜之道:步骤、流程、方法与技巧全攻略!

品牌推广是现代营销战略中的核心环节,对于提升品牌知名度、塑造品牌形象以及扩大市场份额具有举足轻重的作用。 作为一名手工酸奶品牌的创始人,目前全国复制了100多家门店,我来为大家分享品牌推广的制胜之道,包括具体步骤、流程、…

Linux系统启动柜过程

linux系统启动过程 启动过程可以分为6步:POST–>BIOS–>MBR(GRUB)–>Kernel–>Init–>Runlevel。POST为Power On Self test,MBR(GRUB)其实也可以分开来讲,MBR的作用是去引导记录,为GRUB做准备。 各过程解析 POS…

释放WebKit潜能:硬件加速的秘诀与实战

释放WebKit潜能:硬件加速的秘诀与实战 在当今快速发展的Web开发领域,性能优化已成为开发者们关注的焦点。WebKit作为众多流行浏览器的内核,其渲染性能直接影响到用户的浏览体验。本文将深入探讨如何通过硬件加速来释放WebKit的潜能&#xff…

面试题之一

路由的两种模式:hash模式和 history模式。 两种的区别、如何实现。 hash模式中#的作用 vue性能优化。具体如何实现(回答了一个可以函数引入的方法引入路由。问) keep-alive 说一下EventBus CSS: flex布局 css新特性 盒子模型 J…

STM32的EXTI简介

一,EXTI(External Interrupt)外部中断事件控制器 什么是EXTI? 1.监测指定的GPIO口的电平信号变化,并检测到指定条件时,向内核的中断控制器NVIC发出中断申请。NVIC在裁决后,如果满足条件&#xf…

pytest-自动执行固件

目前为止,所有固件的使用都是手动指定,或者作为参数,或者使用 usefixtures。 如果我们想让固件自动执行,可以在定义时指定 autouse 参数。 下面是两个自动计时固件,一个用于统计每个函数运行时间(functio…

4-linux获取命令帮助方式

目录 查看命令帮助 命令搜索 查看命令帮助 在使用的过程中获取命令注释和帮助非常重要,相当于R语言中的help查看函数的使用功能。 [root####### ~]# whatis ls ls (1) - list directory contents[root############ ~]# ls --help 用法&#xff1…

【自然语言处理】司法阅读理解

司法阅读理解 1 任务目标 1.1 任务说明 裁判文书中包含了丰富的案件信息,比如时间、地点、人物关系等等,通过机器智能化地阅读理解裁判文书,可以更快速、便捷地辅助法官、律师以及普通大众获取所需信息。 本次任务覆盖多种法律文书类型&am…

半个月从几十升粉到500(发红包喽)

目录 1. 背景2. 涨粉秘籍2.1 持续创作高质量内容2.1.1 保持频率2.1.2 技术文章为主2.1.3 图文并茂 2.2 积极参与社区活动2.2.1 社区分享2.2.2 发文活动 2.3 互动与建立信任2.3.1 与读者互动2.3.2 红包互动2.3.3 动态分享 2.4 标题与内容的优化2.4.1 标题吸引2.4.2 内容实用 2.5…

【AI应用探讨】—支持向量机应用场景

目录 1. 文本分类 2. 图像识别 3. 生物信息学 4. 金融预测 5. 其他领域 1. 文本分类 垃圾邮件过滤:SVM通过训练大量标记为垃圾邮件和非垃圾邮件的样本,学习出能够区分两者的模型,从而实现对新邮件的自动分类。情感分析:在社…

Anaconda 和 Python 的区别及其重要性

引言 Python 是一种广泛使用的编程语言,特别是在数据科学、机器学习和科学计算领域。随着 Python 的普及,许多开发工具和环境也应运而生,其中 Anaconda 是一个非常流行的 Python 发行版。本文将探讨 Anaconda 和 Python 的区别,A…

【面试分享】嵌入式面试题常考难点之关于单链表的增删改查

文章目录 【面试分享】嵌入式面试题常考难点之关于单链表的增删改查一、单链表结点定义二、增(Create)——插入结点1. 于链表头部插入结点(头插法)2. 于链表尾部插入结点(尾插法)3. 于链表中间插入结点3-1.…

Listary(Windows 文件搜索工具)专业版值得购买吗?

说到经典的国货软件,有一款 Win 软件是一定绕不过去的。它就是知名的本地文件搜索工具 Listary! 便捷的文件搜索窗口;快捷操作的体验;与系统更匹配的外观设计;更智能的排序和更可靠的索引。 便捷的文件搜索窗口 紧凑…