3.vue-数据传递（绑定）

1.MVVM设计模式

在MVVM设计模式中由3个部分组成。
M：Model 数据模型（保存数据，处理数据业务逻辑）
V：View 视图（展示数据，与用户交互）
VM：View Model 数据模型和视图的桥梁
例如：
M是中国人，V是美国人，VM教师翻译

MVVM设计模式最大的特点就是支持数据的双向传递
数据可以从M——>VM——>V
也可以从V——>VM——>M

2.Vue中MVVM的划分

Vue其实是基于MVVM设计模式的
被控制的区域：View
Vue实例对象：View Model
实例对象中的data：Model

3.Vue中数据的单向传递

把“数据”交给“Vue实例对象”，Vue实例对象将数据交给“界面”
Model——>View Model——>View
例如：

<!--这里就是MVVM中的View-->
<div id="app">
    <p>{{name}}</p>
</div>
<script>
    //这里就是MVVM中的View Model
    let vue = new Vue({
        el:'#app',
        //这里就是MVVM中的Model
        data:{
            name:"Hello World！"
        }
    });
</script>

4.Vue中数据的双向传递

默认情况下，Vue只支持数据单向传递Model——>View Model——>View，但是由于Vue是基于MVVM设计模式的，所以也提供了双向传递的能力，只有在< input >、< textarea >及< select >元素上可以用V-model指令创建双向数据传递。