什么是MVVM
我有一篇博客是关于MVVM的，如果您想要了解，请参考：写给大忙人看的MVC、MVP和MVVM
Vue中的MVVM
图示
解释
-
View层
（1）视图层
（2）在前端开发中，通常就是DOM层
（3）主要的作用是给用户展示各种信息 -
Model层
（1）数据层
（2）数据可能是固定不变的数据，更多的是来自服务器、从网络上请求下来的数据 -
ViewModel层
（1）视图模型层
（2）视图模型是View和Model沟通的桥梁
（3）一方面它实现了Data Binding(数据绑定)，将Model的改变实时地更新到View中.另一方面它实现了DOM Listener（DOM监听），当DOM发生一些事件（点击、滚动等等）时，可以监听到并在需要地情况下改变数据
举例
全部代码展示
首先ViewModel通过Data Binding让data中的数据实时的在DOM上显示，其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的相关操作来改变data中的数据
<body>
<div id="app">
<h2>当前计数：{{counter}}</h2>
<button @click="counter--">-</button>
<button @click="add">+</button>
</div>
<script src="../vue.js"></script>
<script>
var data = {
counter:0
}
const app = new Vue({
el:"#app",
data: data,
methods:{
add:function(){
this.counter++;
},
sub:function(){
this.counter--;
}
}
});
</script>
</body>
View
就是在浏览器上展现给用户看的
<div id="app">
<h2>当前计数：{{counter}}</h2>
<button @click="counter--">-</button>
<button @click="add">+</button>
</div>
Model
Model是数据层，这里的data对象是要使用到的数据
var data = {
counter:0
}
ViewModel
整个Vue实例是View和Model沟通的桥梁
const app = new Vue({
el:"#app",
data: data,
methods:{
add:function(){
this.counter++;
},
sub:function(){
this.counter--;
}
}
});
