# Vue入门

### Vue简介

Vue是用于构建用户界面的渐进式框架（就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用，不强求你一次性接受并使用它的全部功能特性，可以后续逐步增加功能），Vue只关注视图层，其他功能要与第三方库以插件的形式配合使用，如：vue-router(路由)、vue-resource、vuex(状态管理)

### 前端知识了解

#### 前端三要素

HTML、CSS、JavaScript

#### CSS

由于CSS不具备可编程性，例如不能使用变量，在编写时经常会违背重构原则，于是诞生了CSS预处理器，主流的CSS预处理器有 `SASS` 和 `LESS`

SASS：基于 Ruby，通过服务端处理，功能强大，解析效率高。

LESS：基于 NodeJS，通过客户端处理，使用简单，功能比 SASS 简单，解析效率比 SASS 低，适合后台人员使用。

#### JavaScript

常用的开发方式有两种，一种是用 原生JS 进行开发，还有一种是用 TypeScript 进行开发

**原生JS**

Natice JS 开发是按照 ECMAScript(ES) 标准进行开发的，先在的浏览器都已支持到 ES5，而前端开发人员都是使用 ES6 进行开发。

ES6 在 ES5 的基础上增加了一些新的特性，会有些浏览器不支持的情况。

当前端人员用 ES6 开发完毕后，遇到不兼容的情况就可以用 webpack 工具进行打包，会将 ES6 的新特性转化成 ES5 语法。

比较激进。

**TypeScript**

由微软开发，认为ES标准的特性不足，并对其进行了扩展，因此 TypeScript 拥有的特性不一定会纳入 ES 标准。

遇到浏览器不支持的情况下需要编译成 JS 才能被浏览器正确执行。

#### JavaScript框架

**jQuery**

jQuery 虽然优化了 DOM 操作，但是影响了前端性能，在前端眼里使用它仅仅是为了兼容 IE6/7/8。

**Angular**

Angular 是谷歌收购的前端框架，采用 TypeScript 语法开发。

由一群 Java 程序员所开发，他们将 MVC 模式搬到了前端，增加了 `模块化开发` 的理念，对后台程序员友好，对前端程序员不太友好。

不适合前后端分离项目，而且版本迭后代变化太大，基本就是两个东西，导致大量程序员弃用 Angular。

它的贡献是为前端带来了模块化开发的理念。

**React**

React 是由 Facebook 出品的，是一款高性能的 JS 前端框架。

提出了 `虚拟DOM` 的新概念，就是在内存里模拟 DOM 操作，然后再将结果显示到页面上，大大提升了前端渲染的效率。

但是它使用复杂，需要额外学习 JSX 语言，比学习 TypeScript 还要难一些。

**Vue**

实现模块化开发、路由、状态管理等新特性。

综合了 Angular（模块化）和 React（虚拟 DOM）的优点。

集合了众家之所长。

作者尤雨溪注重 SoC（关注度分离原则）进行开发，例如 Vue 指注重视图层。

**Axios**

专门的前端通信框架，由于 Vue 边界很明确，就是为了处理 DOM，所以不具备通信能力，此时就需要一个通信框架与服务器交互。

也可以直接选择使用 jQuery 提供的 AJAX 通信功能。

#### UI框架

**Ant-Design**

阿里巴巴出品，基于 React 的 UI 框架。（圣诞节按钮下雪事件）已凉。

**ElementUI**

基于 Vue 的 UI 框架

还有 iview、飞冰 也是基于 Vue 的 UI 框架

**Bootstrap**

Twitter 推出的一个用于前端开发的开源工具包

**AmazeUI**

又叫妹子UI，一款 HTML5 跨屏前端框架

#### JavaScript 构建工具

**Babel**

JS 编译工具，主要用于浏览器不支持的 ES 新特性，比如用于编译 TypeScript。

**WebPack**

模块打包器，主要作用是打包、压缩、合并以及按序加载。

#### 三端统一

**混合开发（Hybrid App）**

即写一套程序代码可以运行在（PC、Android、IOS）三端，并能够通过中间件调用到底层的硬件资源。

由于安卓和IOS的安装包不同，又需要实现统一打包，就有了一些打包的方式，如：云打包 和 本地打包。

云打包：用 HBuild 的云打包功能，但是需要将代码提供给它。

本地打包：用的是 Cordova，需要自己搭建环境，例如需要打包IOS应用就需要有苹果电脑。

**微信小程序**

微信小程序的 UI 开发框架是 WeUI，也可以通过 HBuild 进行打包。

#### 前端中的后端技术

#### NodeJS

由于后端知识体系极其庞大复杂，对于前端开发人员不够友好，但他们又需要用到一些后端的技术，所以就出现了 NodeJS。

NodeJS 主要用于前端人员与后端人员的技术对接。

如果应用的功能比较简单，可以不使用后端技术，直接让前端全栈工程师用 NodeJS 代替后端程序。

#### NodeJS 框架

**Express**

用起来比较麻烦

**Koa**

主流的框架，Express 的简化版

**NPM**

项目综合管理工具，用具编译、打包、运行、下载 JS 依赖，类似于 Maven

**YARN**

NPM 的替代方案，类似于 Maven（常用于Web） 和 Gradle（常用于安卓，打包效率高） 的关系

### 前后分离

由于前后端职责纠缠不清，对前后端开发人员的职能带来了很大的困扰，当出现问题时容易引发争议，所以需要前后端分离，也就是所谓的关注度分离。

#### MVVM 模式

MVVM（Model-View-ViewModel）是一种软件架构设计模式，由微软 WPF 和 Silverlight 的架构师开发，是一种简化用户界面的 `事件驱动编程方式`。

对 Model 层和 View 层的操作进行了解耦，是连接视图层和数据的中间件，实现了真正的前后端分离。

Vue.js 就是 MVVM 中的 ViewModel 层的实现者，MVVM 模式的核心是 ViewModel 层，ViewModel 就是一个观察者。

![](https://toki-figurebed.oss-cn-shenzhen.aliyuncs.com/202204042345900.png)

Vue.js 的核心就是实现了 DOM监听 与 数据绑定。

#### Vue.js 的两大核心要素

**数据驱动 和 组件化**

![](https://toki-figurebed.oss-cn-shenzhen.aliyuncs.com/202204042349585.png)