一.前段技术发展历史

1.静态网页：html-超文本标记语言

2.css+javascript出现

3.动态网页：jsp/asp/php

4.ajax阶段：局部刷新技术

5.html5

6.nodejs(服务器)–>在前端写后台

7.vue，elementui，react

二.Vue

1.Vue介绍

Vue是一套用于构建用户界面的渐进式框架，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

2.Vue架构

(1).MVC

Model：数据模型，一些JavaScript 对象。
View: 视图，网页中的内容，一般由HTML模板生成。
Controller : 控制器（路由），视图和模型之间的胶水。

(2).MVVM

Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象。
View：它专注于界面的显示和渲染，在Vue中则是包含一堆声明式Directive和Component的视图模板。
ViewModel：它是View和Model的粘合体，负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在vue中“Vue对象实例”充当了这个ViewModel的角色。

(3).小结

View不能直接与Model交互，而是通过Vue实例这个ViewModel来实现与Model的交互。对于界面表单的交互，通过v-model指令来实现View和ViewModel的同步。对于View而言，ViewModel中的DOM Listeners工具会帮助我们监听页面上DOM元素的变化，一旦发生变化，Model中的数据也会发生改变；
对于Model而言，当我们添加或修改Model中的数据时，ViewModel中的Data Bindings工具会帮助我们更改View中的DOM元素。从而实现View和Model的分离，达到对前端逻辑MVVM的分层架构。