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: "李南江"
}
});