什么是MVVM?
直接看维基百科
直接看vue 的MVVM
- vue可以帮我们把Model数据绑定到View上面
- vue帮我们把View的事件绑定到Model上面
下面是一个使用vue实现的计数器demo
使用这个demo,来简单理解demo中的MVVM分别指的哪个
demo中,当点击+和-时,计数会发生变化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<h2>当前计数:{
{
msg}}</h2>
<button v-on:click='add'>+</button>
<button v-on:click='sub'>-</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
msg:0
},
methods:{
add: function(){
console.log(this)
this.msg++
},
sub: function(){
this.msg--
}
}
})
</script>
</body>
</html>
在这个计数器demo中
我们的计数器就有严格的MVVM思想
- View就是我们的DOM
- Model就是我们抽离出来的obj
- ViewModel就是我们创建的Vue对象实例
这时候就有长得帅的小伙伴来问了,他们之间是如何工作的呢?
- 首先ViewModel通过DataBuilding让obj中的数据实时的在DOM中展示
- 其次ViewModel通过DOM Listener来监听DOM事件,通过methods来操作.改变obj的数据
有了vue帮助我们完成ViewModel层的任务,在后续的开发中,我们可以专注于数据的处理,已经DOM的编写工作了