我的怎么学会vue的03：Vue中的MVVM

MVVM框架

MVVM是 Model View ViewModel 的缩写。这种模式的优点是：改变js中的数据，dom结构就会跟着变化，不用再手动修改dom。

Model是数据，view即dom，ViewModel是让Model和View通信用的。

MVVM的设计思想是：关注Model的变化，让MVVM框架去自动更新DOM，从而把开发者从操作DOM的繁琐步骤中解脱出来！

VUE中的MVVM

view和model无法直接通信，他们通过viewModel来通信，viewModel做了2件事：

1. 数据绑定：把从date里定义的数据，绑定到dom上
2. 监听view的事件，从js里回调对应的函数来执行。

思考：在上一讲的计数器案例中，谁是view，谁是model，谁是viewModel？

计数器的源码如下：

<div id="app">
    <h2>当前计数: {{counter}}</h2>
    <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,
           message: 'abc' 
        },
        methods: {
            add: function () {
                console.log('add被执行');
                this.counter++
            },
            sub: function () {
                console.log('sub被执行');
                this.counter--
            }
        }
    })
</script>

在这个计数器示例里面，dom是view，model就是我们在data属性里写的值，是一个对象。为了让这个model显示的更直观更清晰，我们把数据单独拎出来写：

<script>
    //把数据写在vue实例外面。
    const obj = {
        counter: 0,
        message: 'abc'
    }

    const app = new Vue({
        el: '#app',
        data: obj,
        methods: {
            add: function () {
                console.log('add被执行');
                this.counter++   //这里虽然数据写在实例外面，但是this也可以读取到，因为vue在这里做了一个代理，后面会讲到
            },
            sub: function () {
                console.log('sub被执行');
                this.counter--
            }
        }
    })
</script>

我们创建的那个vue实例new Vue()，就是ViewModel，让Model和View可以进行通信。