狂神说Vue新手上手课程笔记一：前端核心分析、前端发展史、MVVM介绍

一、Vue介绍
       Vue是一套用于构建用户界面的渐进式JavaScript框架，其核心库只关心视图层（html、css、js）。Vue不仅易于上手，还便于与第三方库（如：vue-router：跳转、vue-resource：通信、vuex：状态管理）进行项目整合。

二、前端三要素
（一）HTML：超文本标记语言
（二）CSS：层叠样式表
1）缺陷：a.语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
       b.没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。
2）CSS预处理器
       CSS预处理器提供CSS缺失的样式层复用机制，减少冗余代码，提高样式代码的可维护性，大大提高了前端在样式上的开发效率。
       其基本思想是：用一种专门的编程语言，进行WEB页面样式的设计，再通过编译器转化为正常的CSS文件，以供项目使用。

       常用的CSS预处理器：
              - SASS：基于Ruby，通过服务器处理，功能强大，解析效率高，需要学习Ruby语言，上手难度高于LESS。
              - LESS：基于NodeJS，通过客户端处理，使用简单，功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以后台人员如果需要的话，建议使用LESS。
（三）JS
1）Native原生JS开发
       原生JS开发，也就是让我们按照【ECMAScript】标准的开发方式，简称ES。ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。
       ES6是目前常用版本，通过webpack可以打包成为ES5支持。
2）JavaScript框架
       jQuery、Angular、React、Vue、Axios

三、后端技术
       前端人员为了方便开发也需要掌握一定的后端技术，但Java后台人员知道后台知识体系及其庞大复杂，所以为了方便前端人员开发后台应用，就出现了NodeJS这样的技术。
       既然是后台技术，那肯定也需要框架和项目管理工具，NodeJS框架及项目管理工具如下：
              - Express：NodeJS框架
              - Koa：Express简化版
              - NPM：项目综合管理工具，类似于Maven
              - YARN：NPM的替代方案，类似于Maven和Gradle的关系

四、前端为主的MV*时代
       - MVC（同步通信为主）：Model、View、Controller
       - MVP（异步通信为主）：Model、View、Presenter
       - MVVM（异步通信为主）：Model、View、ViewModel

五、NodeJS带来的全栈时代
       前端为主的MV*模式解决了很多很多问题，但依然存在不少不足之处。随着NodeJS的兴起，JavaScript开始有能力运行在服务端（但不意味着JS能够取代Java）。

六、MVVM
1）介绍
       MVVM（Model-View-ViewModel）是一种软件架构设计模式，其源自于经典的MVC模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用如下：
       - 该层向上与视图层进行双向数据绑定；
       - 向下与Model层通过接口请求进行数据交互。
       MVVM已经相当成熟了，主要运用不仅仅在网络应用程序开发中。当下流行的MVVM框架有Vue.js、Angular.js等。

       总的来说，MVVM框架中，Model层的数据会通过ViewModel层跟前端进行绑定，Model层的数据变化了，View层的相应数据也要变化，这是瞬间完成的动作，而以前是要进行前端页面的刷新或者改变js中的值才能实现View层数据的变化。
2）MVVM模式的实现者
       - Model：模型层，在这里表示JavaScript对象，这里的难点主要在于和前端约定同意的接口规则
       - View：视图层，在这里表示DOM（HTML操作的元素）
       - ViewModel：连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者
       在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者。
       * ViewMode能够观察到数据的变化，并对视图对应的内容进行更新；
       * ViewModel能够监听到视图的变化，并能够通知数据发生改变。
3）为什么使用MVVM
       MVVM模式和MVC模式一样，主要目的是分离视图和模型，有几大好处：
       - 低耦合：视图可以独立于Model变化和修改，一个ViewModel可以绑定不同的View上，当View变化的时候Model可以不变，当Modle变化的时候View可以不变。
       - 可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段逻辑。
       - 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
       - 可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。