一支咸鱼
一支咸鱼

Vue-组件基础（上）

一、目标

  • 能够说出什么是单页面应用程序和组件化开发
  • 能够说出.vue单文件组件的组成部分
  • 能够知道如何注册vue的组件
  • 能够知道如何声明组件的props属性
  • 能够知道如何在组件中进行样式绑定

二、目录

  • 单页面应用程序
  • vite的基本使用
  • 组件化开发思想
  • vue组件的构成
  • 组件的基本使用
  • 封装组件的案例

单页面应用程序

1.什么是单页面应用程序

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

Vue-组件基础（上）_第1张图片

 2.单页面应用程序的特点

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

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

3.单页面应用程序的优点

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

①良好的交互体验

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

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

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

③减轻服务器的压力

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

4.单页面应用程序的缺点

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

①首屏加载慢

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

②不利于SEO

  • SSR服务器端渲染

5.如何快速创建Vue的SPA项目

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

①基于vite创建SPA项目

②基于vue-cli创建SPA项目

Vue-组件基础（上）_第2张图片

 vite的基本使用

1.创建vite的项目

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

Vue-组件基础（上）_第3张图片

Vue-组件基础（上）_第4张图片

 2.梳理项目的结构

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

Vue-组件基础（上）_第5张图片

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

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

Vue-组件基础（上）_第6张图片

 其中：

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

3.vite项目的运行流程

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

其中：

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

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

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

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

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

Vue-组件基础（上）_第7张图片

3.2在index.html中预留el区域

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

Vue-组件基础（上）_第8张图片

 3.3在main.js中进行渲染

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

Vue-组件基础（上）_第9张图片

 组件化开发思想

1.什么是组件化开发

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

例如：http://www.ibootstrap.cn/（Bootstrap可视化布局系统 (bootcss.com)）所展示的效果，就契合了组件化开发的思想。用户可以通过拖拽组件的方式，快速生成一个页面的布局结构。

Vue-组件基础（上）_第10张图片

 2.组件化开发的好处

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

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

3.vue中的组件化开发

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

vue组件的构成

1.vue组件的构成

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

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

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

2.组件的template节点

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