Vue3

( 注：该笔记部分内容与Vue2重复，权当复习

二、组件基础(上)

2.1 单页面应用程序

2.1.1 什么是单页面应用程序

单页面应用程序（英文名：Single Page Application）简称 SPA，顾名思义，指的是一个 Web 网站中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。

例如资料中的这个 Demo 项目：

2.1.2 单页面应用程序的特点

单页面应用程序将所有的功能局限于一个 web 页面中，仅在该 web 页面初始化时加载相应的资源（ HTML、JavaScript 和 CSS）。

一旦页面加载完成了，SPA 不会因为用户的 *** 作而进行页面的重新加载或跳转。而是利用 JavaScript 动态地变换HTML 的内容，从而实现页面与用户的交互。

2.1.3 单页面应用程序的优点

SPA 单页面应用程序最显著的 3 个优点如下：

① 良好的交互体验

单页应用的内容的改变不需要重新加载整个页面获取数据也是通过 Ajax 异步获取没有页面之间的跳转，不会出现“白屏现象”

② 良好的前后端工作分离模式

后端专注于提供 API 接口，更易实现 API 接口的复用前端专注于页面的渲染，更利于前端工程化的发展

③ 减轻服务器的压力

服务器只提供数据，不负责页面的合成与逻辑的处理，吞吐能力会提高几倍

2.1.4 单页面应用程序的缺点

任何一种技术都有自己的局限性，对于 SPA 单页面应用程序来说，主要的缺点有如下两个：

① 首屏加载慢

路由懒加载代码压缩CDN 加速网络传输压缩

② 不利于 SEO

SSR 服务器端渲染

2.1.5 如何快速创建 vue 的 SPA 项目

vue 官方提供了两种快速创建工程化的 SPA 项目的方式：

① 基于 vite 创建 SPA 项目

② 基于 vue-cli 创建 SPA 项目

2.2 vite的基本使用

黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程_哔哩哔哩_bilibili

Vite 官方中文文档 

2.2.1 创建 vite 的项目

基于 vite 仅可创建 vue 3.x 的工程化项目

按照顺序执行如下的命令，即可基于 vite 创建 vue 3.x 的工程化项目：

2.2.2 梳理项目的结构

1. 使用 vite 创建的项目结构如下：

其中：

node_modules 目录用来存放第三方依赖包public 是公共的静态资源目录src 是项目的源代码目录（程序员写的所有代码都要放在此目录下）.gitignore 是 Git 的忽略文件index.html 是 SPA 单页面应用程序中唯一的 HTML 页面package.json 是项目的包管理配置文件

2. 梳理项目的结构

在 src 这个项目源代码目录之下，包含了如下的文件和文件夹：

其中：

assets 目录用来存放项目中所有的静态资源文件（css、fonts等）components 目录用来存放项目中所有的自定义组件App.vue 是项目的根组件index.css 是项目的全局样式表文件main.js 是整个项目的打包入口文件

2.2.3 vite 项目的运行流程

在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

其中：

① App.vue 用来编写待渲染的模板结构

② index.html 中需要预留一个 el 区域

③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中

1. 在 App.vue 中编写模板结构

清空 App.vue 的默认内容，并书写如下的模板结构：

2. 在 index.html 中预留 el 区域

打开 index.html 页面，确认预留了 el 区域：

3. 在 main.js 中进行渲染

按照 vue 3.x 的标准用法，把 App.vue 中的模板内容渲染到 index.html 页面的 el 区域中：

2.3 组件化开发思想

2.3.1 什么是组件化开发

组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。

例如：ibootstrap - Bootstrap可视化布局系统 所展示的效果，就契合了组件化开发的思想。用户可以通过拖拽组件的方式，快速生成一个页面的布局结构。

2.3.2 组件化开发的好处

前端组件化开发的好处主要体现在以下两方面：

提高了前端代码的复用性和灵活性提升了开发效率和后期的可维护性

2.3.3 vue 中的组件化开发

vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。

2.4 vue组件的构成

2.4.1 vue 组件的三个组成部分

每个 .vue 组件都由 3 部分构成，分别是：

template -> 组件的模板结构script -> 组件的 JavaScript 行为style -> 组件的样式

其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。

2.4.2. 组件的template节点

vue 规定：每个组件对应的模板结构，需要定义到