M---Model （数据）
V---View (视图)
VM---VIewModel (转换器)
VIewModel主要做两件事：
1、把 Model 中的数据绑定到View(视图层)。
2、监听VIew （视图层），把事件，界面操作，回调给Model中的JavaScript中的对象，函数。
View:视图层，前端所说的DOM,通常给用户展示各种信息。
Model:数据层，里面存放着各种数据，有我们写死的固定数据，大多数是从网上请求过来的数据。
VIewModel：视图模型层，它是View和Model的桥梁，一是实现Data Bindings也就是数据绑定，将Model中的数据的改变同步到View中去。二是DOM Listeners,也就是DOM监听，当DOM发生一些事件(点击，滚动，touch等)可以监听到，并且改变对应的Data.
计算器小案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <h1>当前计数:{{counter}}</h1> <!-- <button v-on:click="counter++">+</button> <button v-on:click="counter--">-</button> --> <button v-on:click='add'>+</button> <button v-on:click='sub'>-</button> </div> <script src="./js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { counter: 0 }, methods: { add: function () { console.log(this.counter); this.counter++ }, sub: function () { console.log(this.counter); this.counter-- } } }) </script> </body> </html>