Vue

一.前段技术发展历史

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的分层架构。

3.ECMAScript6–ES6

(1)let：块级；var：全局

(2)const常量

(3)解构表达式

(4)箭头表达式

4.Vue的生命周期

(1)生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

(2)钩子函数

5.Vue表达式

(1)加减乘除运算

(2)三目运算

(3)字符串操作

(4)对象操作

(5)数组操作

6.Vue指令

(1)text

(2)html

(3)for

(4)bind

(5)model

(6)show

(7)if else