Vue及双向绑定
Vue的特点
1 ，易用（使用成本低）
2 ，灵活（生态系统完善，试用于任何规模的项目）
3 ，高效（体积小，优化好，性能好）
Vue是一个MVVM的js 框架，但是，Vue 的核心库只关注视图层，开发者关注的只是m-v的映射关系，也就是说我们就是关心的映射关系。
注意的是： MVC、MVP、MVVM
1 MVC的之间关系：通信都是单向的。
View 传送指令到Controller，
Controller完成业务逻辑之后要求Model改变状态
Model 将新的数据发送到View，用户得到反馈
2 MVP之间的关系、：MVP模式将Controller改名为Presenter，同时改变了通信方向。
各部分之间的通信，都是双向的
View与Model不发生关系，通过Presenter传递
VIew非常薄，不会部署任何业务逻辑，称为“被动式图”（Passive View），既没有任何主动性，而Presenter非常厚，所有的业务逻辑都部署在这里
3 MVVM 模式将presenter改名为ViewModel，基本上与MVP模式完全一致，唯一区别是，它采用的是双向绑定（data-binding），View的变动，自动反应在ViewModel，反之亦然。Angular和Ember都采用这种模式
{{msg}}
// 创建一个Vue的实例
// 声明一条数据，然后用页数的模板语法将其渲染到界面中 （声明式渲染）
// el data methods是固定写法
var vm=new Vue({
el:'#app',//获取元素 处
data:{//数据 存放处
msg:'hello word'
},
methods:{//方法 存放处
}
})
**vue 中按照MVVM的架构去进行实现的
MVVM
m: model 模型
v: view 视图
vm: ViewModel 视图模型**
重点：
当model层的数据发生改变，为什么Vm就可以知道数据发生了变化
也就是说vue的双向数据绑定原理是什么：
1 vue在创建VM的时候，会将数据配置到实例中。然后通过 Object.defineProperty 方法,
为数据动态的添加getter和setter方法
**（Object.defineProperty(obj, prop, descriptor)**
obj：需要定义属性的对象
prop：需要定义的属性
descriptor：属性的描述描述符
返回值：返回此对象）
2 当获取数据的时候，会触发对应的getter方法，当设置数据的时候，触发对应的setter方法
3 然后当setter方法触完成的时候，内部会进一步的触发 watcher （观察者），，当数据改变了，视图则更新操作完毕。
// 创建Vue实例
// 先在外部创建一个data
// let data1={msg:'nihao'}
// new Vue({
// el:'#app',
// data:data1
// })
// console.log(data1)//Object
var obj = {}
// 设置一个中间变量承接内容
let middel=100
Object.defineProperty(obj, 'prop', {
get() {
console.log('打印getter的方法')
return middel;
},
set(val) {
console.log('打印setter的方法',val)
middel=val
}
})
// 在这里打印的顺序是看自己是获取还是设置
console.log(obj.prop)//获取对象的属性的时候，会调用自身的get方法
obj.prop=11 //设置对象的属性的时候，会调用自身的set方法
// console.log(obj.prop)