個人怎麼學會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能夠進行通訊。