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 就是一个观察者。

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

Vue.js 的两大核心要素

数据驱动 和 组件化