前端知识体系（Vue2.0）

1、css预处理器：Sass、Less

什么是css预处理器？
css预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为css增加一些编程的特性，将css作为目标生成文件，然后开发者就只要使用这中语言进行css的编码工作。转化成通俗移动的话来说就是“用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的css文件，以供项目使用”

• SASS：基于Rbuy，通过服务器处理，功能强大，解析效率高，需要学习Ruby语言，上手难度高于LESS。
• LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以我们后台人员如果需要的话，建议使用LESS。

2、行为层（JavaScript）
JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。
Native原生JS开发
原生JS开发，也就是让我们按照ECMAScript标准的开发方式，简称ES，特点是所有浏览器都支持。截止到目前，ES标准已发布如下版本：
ES3、ES4（内部，未正常发布）、ES5(全部浏览器支持)、ES6
TypeSript 微软的标准

JavaScript框架

• jQuery
• Angular
• React
• Vue：一款渐进式JaveScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular（模块化）和React（虚拟DOM）的优点。
• Axios（前端通信框架）

3、 UI框架

• Ant-Design:阿里巴巴出品，基于React的UI框架
• ElementUI：饿了么出品，基于Vue的UI框架
• Bootstrap:Twitter推出的一个用于前端开发的开源工具包
• AmazeUI：又叫“妹子UI”,一款HTML5跨屏前端框架

4、 JavaScript构建工具

• Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
• WebPack：模块打包器，主要作用是打包、压缩、合并及按需加载

总结：
选用视图vue，通信axios，ui-element-ui（由于用于ES6开发我们要用打包编译，打包编译为ES5语法，因此需要构建工具）webpack
Vue框架需要学习的脑图：

5、简单介绍MVVM模式（双向绑定）

1、原理：ViewModel（MVVM的核心）它更像一个观察者
用户在我们的View页面视图，ViewModel可以和View（页面视图）双向数据绑定，同时ViewModel和Model有一定的关联。
当我们View（页面视图）有数据变更的时候，就会通过我们的viewModel，用AJAX请求后台Model，后台Model返回给ViewModel一个JSON，ViewModel将返回的JSON通过数据的双向绑定在VIew（前台页面视图）展示出来。
2、当前流行的MVVM框架有Vue.js，AngularJS等
vue.js其实就是我们MVVM框架的实现者
3、优点
● 低耦合：视图独立于Model变化和修改；一个viewmodel可以绑定到不同view上；当view变化时，model可以不变，反之亦然。
● 可复用：可以把一些视图逻辑放在viewmodel里面，让很多view重用这段视图逻辑
● 独立开发：开发人员可以专注于业务逻辑、数据的开发，设计人员可以专注于页面设计。
● 可测试：可以针对viewmodel来写测试。
4、MVVM的组成部分


说明：View层展现的不是Model层的数据，而是ViewModel的数据，由ViewModl负责与Model层交互，这就完全解耦了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。