單向繫結非常簡單，就是把Model繫結到View，當我們用JavaScript程式碼更新Model時，View就會自動更新。
有單向繫結，就有雙向繫結。如果使用者更新了View，Model的資料也自動被更新了，這種情況就是雙向繫結。

什麼情況下使用者可以更新View呢？填寫表單就是一個最直接的例子。當用戶填寫表單時，View的狀態就被更新了，如果此時MVVM框架可以自動更新Model的狀態，那就相當於我們把Model和View做了雙向繫結：

在瀏覽器中，當用戶修改了表單的內容時，我們繫結的Model會自動更新：

在Vue中，使用雙向繫結非常容易，我們仍然先建立一個VM例項：、

$(function () {
    var vm = new Vue({
        el: '#vm',
        data: {
            email: '',
            name: ''
        }
    });
    window.vm = vm;
});
 

然後，編寫一個HTML FORM表單，並用v-model指令把某個<input>和Model的某個屬性作雙向繫結：

<form id="vm" action="#">
    <p><input v-model="email"></p>
    <p><input v-model="name"></p>
</form>

我們可以在表單中輸入內容，然後在瀏覽器console中用window.vm.$data檢視Model的內容，也可以用window.vm.name檢視Model的name屬性，它的值和FORM表單對應的<input>是一致的。
如果在瀏覽器console中用JavaScript更新Model，例如，執行window.vm.name='Bob'，表單對應的<input>內容就會立刻更新。
除了<input type="text">可以和字串型別的屬性繫結外，其他型別的<input>也可以和相應資料型別繫結：
多個checkbox可以和陣列繫結：

<label><input type="checkbox" v-model="language" value="zh"> Chinese</label>
<label><input type="checkbox" v-model="language" value="en"> English</label>
<label><input type="checkbox" v-model="language" value="fr"> French</label>
 

對應的Model為：

language: ['zh', 'en']

單個checkbox可以和boolean型別變數繫結：

<input type="checkbox" v-model="subscribe">

對應的Model為：

subscribe: true; // 根據checkbox是否選中為true/false

下拉框<select>繫結的是字串，但是要注意，繫結的是value而非使用者看到的文字：

<select v-model="city">
    <option value="bj">Beijing</option>
    <option value="sh">Shanghai</option>
    <option value="gz">Guangzhou</option>
</select>
 

對應的Model為：

city: 'bj' // 對應option的value

雙向繫結最大的好處是我們不再需要用jQuery去查詢表單的狀態，而是直接獲得了用JavaScript物件表示的Model。

處理事件：

當用戶提交表單時，傳統的做法是響應onsubmit事件，用jQuery獲取表單內容，檢查輸入是否有效，最後提交表單，或者用AJAX提交表單。
現在，獲取表單內容已經不需要了，因為雙向繫結直接讓我們獲得了表單內容，並且獲得了合適的資料型別。
響應onsubmit事件也可以放到VM中。我們在<form>元素上使用指令：

<form id="vm" v-on:submit.prevent="register">

其中，v-on:submit="register"指令就會自動監聽表單的submit事件，並呼叫register方法處理該事件。使用.prevent表示阻止事件冒泡，這樣，瀏覽器不再處理<form>的submit事件。
因為我們指定了事件處理函式是register，所以需要在建立VM時新增一個register函式：

var vm = new Vue({
    el: '#vm',
    data: {
        ...
    },
    methods: {
        register: function () {
            // 顯示JSON格式的Model:
            alert(JSON.stringify(this.$data));
            // TODO: AJAX POST...
        }
    }
});

在register()函式內部，我們可以用AJAX把JSON格式的Model傳送給伺服器，就完成了使用者註冊的功能。

注意：這裡的表單提交事件很巧妙，阻止了表單的預設行為，將表單提交事件轉到vue的medthods中處理。

摘自廖雪峰的：雙向繫結