1_介绍

JRealcs

已于 2022-12-30 23:01:47 修改

阅读量279

点赞数

分类专栏： JavaScript HTML5+CSS3 文章标签： javascript 前端前端框架

于 2022-10-07 16:20:20 首次发布

本文链接：https://blog.csdn.net/weixin_58764638/article/details/127195655

版权

JavaScript 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

HTML5+CSS3

19 篇文章 0 订阅

订阅专栏

一、什么是Vue?

一套用于构建用户界面的前端框架

1.构建用户界面

指令
用于辅助开发者渲染页面的模板语法
数据驱动视图
数据源变化, 页面结构自动重新渲染
事件绑定
用于处理用户和网页之间的交互行为

2.前端框架

1.1vue全家桶

官方给vue 的定位是前端框架，因为它提供了构建用户界面的一整套解决方案（俗称vue全家桶)

vue（核心库)
vue-router (路由方案)
vuex（状态管理方案)
vue组件库（快速搭建页面UI效果的方案)

1.2开发系列工具

辅助vue 项目开发的一系列工具

vue-cli (npm全局包:一键生成工程化的vue项目, 基于webpack、大而全)
vite (npm全局包:一键生成工程化的vue 项目, 小而巧)
vue-devtools（浏览器插件:辅助调试的工具)
vetur ( vscode插件:提供语法高亮和智能提示)

二、Vue的特性

1.数据驱动视图

在使用了vue的页面中，vue会监听数据的变化，从而自动重新渲染页面的结构。

好处: 当页面数据发生变化时，页面会自动重新渲染
注意: 数据驱动视图是单向的数据绑定。

2.双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源中。

好处: 开发者不再需要手动操作DOM元素, 来获取表单元素最新的值!

3.MVVM

MVVM是vue 实现数据驱动视图和双向数据绑定的核心原理。它把每个HTML页面都拆分成了如下三个部分:

View表示当前页面所渲染的DOM结构。
Model表示当前页面渲染时所依赖的数据源。
ViewModel表示 vue的实例，它是MVVM的核心。

4.MVVM的工作原理

ViewModel作为MWVM的核心，是它把当前页面的**数据源（Model）和页面的结构（View〉**连接在了一起。

当数据源发生变化时，会被VM监听到，VM会根据最新的数据源自动更新页面的结构
当表单元素的值发生变化时，也会被VM监听到，VM会把变化过后最新的值自动同步到数据源中

三、单页面应用程序

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

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

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

单页面应用程序将所有的功能局限于一个 web 页面中，仅在该 web 页面初始化时加载相应的资源（ HTML、JavaScript 和 CSS）。
一旦页面加载完成了，SPA 不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态地变换HTML 的内容，从而实现页面与用户的交互。

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

① 良好的交互体验

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

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

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

③ 减轻服务器的压力

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

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

① 首屏加载慢

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

② 不利于 SEO

SSR 服务器端渲染

5.如何快速创建vueSPA 项目

① 基于 vite 创建 SPA 项目
② 基于 vue-cli 创建 SPA 项目

四、vite的基本使用

1.创建vite的项目

1 npm init vite-app 项目名称
2
3 cd 项目名称 
4 npm install
5 npm run dev

2.梳理项目的结构

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

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

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

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 所预留的区域中

四、组件化开发思想

1.什么是组件化开发

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

2.组件化开发的好处

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

3.vue 中的组件化开发

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