理解MVVM框架：
V:view 是HTML显示的页面
V:viewModel 是业务逻辑层（一切可视的JS业务逻辑，比如表单按钮提交，自定义事件的注册和处理逻辑都在viewmodel里面负责监控两边 view和model的数据）
Model 数据层 对数据的处理 （增删改查）
【MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。】
VUE.JS的优点：低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写
易用灵活高效
VUE的开发模式 1.通过script标签引入vue.js（前期） 2.通过vue的脚手架工具进行项目搭建
{{msg}}
声明周期的钩子
Jquery的钩子 ：$(document).ready()
Vue：
*created：实例创建完成后立马调用。此阶段完成了数据的观测等，但是尚未挂载，$el还不可用，需要处理初始化一些数据时比较有用。
*mounted el：相当于$(document).ready(),刚刚挂载状态
*beforeDestroy:实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等。
文本插值和表达式:
语法：使用双大括号“{{xx}}”是最基本的文本插值方法，会自动的将我们双向绑定的数据实时显示出来。文本插值模式，可以进行简单的运算（2+2）可以进行三元运算符（6>3?a:b）。不可以书写表达式（{{if(6>5){}}}）。支持单行表达式
一个小demo
{{msg}}
{{aaa|formatDate}}
**过滤器：VUE支持在{{ }}插值的尾部添加 “|” 对数据进行过滤，经常用于格式化文本，比如字母改大小写货币等。过滤规则是自定义的，通过vue实例添加选项filter来设置。
过滤器 ：{{date|filter1|filter2}}
filters：{{date|formatDate(66,99)}} 这里面的 第一个和第二个参数，分别对应过滤器的第二个和第三个参数
指令和事件
v-text指令 == {{}} 的作用一样，解析文本
v-html指令 ：v-bind 的基本用途是动态更新 HTML 元素上的属性，比如 id 、class 等。
v-on：用来绑定事件监听器
所有的方法都放在methods里面。和date，el并列。
语法糖
语法糖是指在不影响功能的情况下，添加某种简洁方法实现同样的效果。更方便的方便，
v-bind---->:(冒号)
v-on----->@
以上两句效果都是一样的
Document
{{msg}}
{{msg}}
VUE的计算属性。
所有计算属性都以函数形式卸载VUE实例中，于data同级，定义一个computed 实例。最终返回计算后的结束。
{{text}}
{{text.split(',').reverse().join(',')}}
{{reverseText}}
VUE的计算属性：
在一个计算属性中科院完成各种复杂的逻辑，包括函数的调用运算等。只要最终返回一个结果就行（return）。只要任意数据变化，计算属性就会重新执行。视图也会更新。
getter和setter
默认都是getter属性来进行读取。也可以提供一个setter函数，当手动修改计算属性的值，就会触发setter函数，执行一些自定义操作。 计算书型可以依赖其他计算属性；计算书型不仅可以依赖当前vue实例数据，还可以依赖其他实例的数据。
计算属性缓存。
调用methods里的方法也可以与计算属性起到同样的作用
页面中的方法：如果是调用方法，只要页面重新渲染，方法就会重新执行，不需要渲染，则不需要重新执行。（methods）
页面中的计算属性：不管渲不渲染，只要计算属性依赖数据未变化，就永远不变/
aaa
{{fullName}}
//使用的是watch监听器
aaa
{{fullName}}
//使用的是计算属性
使用v-bind插入class,内链属性等
1.绑定class的对象语法:对象的键是类名,值是布尔值
222
点击蓝红背景相互切换
绑定计算属性
222
2.绑定class数组语法： 数据中的成员直接对应类名
我是数组
3.数组和对象混用:第一个成员是对象,第二个成员是数组成员
4.绑定内连样式 在VUE里面，只要是大写字母，都会自动转换成-加小写。
fontSize = font-size
内联样式