Vue2.X 数据单向绑定

写在前面： 此博客记录自己学习vue学习笔记，如有侵权，联系删！
学习来源： Vue + Vue-Cli 快速入门教程
李南江老师各平台账号：

• 微博：极客江南
• 微信公众号：李南江
• 腾讯课堂： 李南江
• 网易云课堂：李南江

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

<!--这里就是MVVM中的View-->
<div id="app">
    <p>{{ name }}</p>
</div>

这里就是MVVM中的View Model

// 这里就是MVVM中的View Model
let vue = new Vue({
    el: '#app'
});

这里就是MVVM中的Model

let vue = new Vue({
    el: '#app',
    // 这里就是MVVM中的Model
    data: {
        name: "李南江"
    }
});