如何理解v-model就是語法糖？

綁定表單控件和綁定普通控件並沒有二致。可是由於控件綁定經常涉及到雙向綁定，此時使用v-model讓它更加簡單。好比checkbox：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <input type="checkbox" v-bind:checked="checked">v-bind</input><br/>
  <label>{{ checked }}</label>
</div>
<script>
  var a= new Vue({
    el: '#app',
    data(){
      return {checked : true} 
    }
  }
)
</script>

把checked數據綁定到input的checked屬性上。然而，這樣的綁定都是單向的，就是說：

1. 若是checked數據修改了，那麼DOM屬性就會修改

2. 若是DOM屬性修改了，checked數據並不會修改

因此，當咱們點擊界面上的輸入控件時，儘管此控件會打鉤或者去掉打鉤，可是label的文字並不會更新。

因爲在vue2.0中，以前有的.sync修飾符原本能夠作雙向綁定，可是此特性已經被刪除，因此若是想要使用v-bind作到雙向綁定的話，能夠加入事件來監視變化，並更新checked數據便可：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <input type="checkbox" ref="c2"v-bind:checked="checked" @change="change">v-bind</input><br/>
<label for="checkbox">{{ checked }}</label>
</div>
<script>
  var a= new Vue({
    el: '#app',
    data(){
      return {checked : true} 
    },
    methods:{
      change(){
        this.checked = this.$refs.c2.checked
      }
    }
  }
)
</script>

這樣作也太麻煩了，鑑於雙向綁定也比較經常使用的，所以vue引入了一個指令v-model,可使用它簡化此工做：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <input type="checkbox" v-model="checked">v-model</input><br/>
  <label for="checkbox">{{ checked }}</label>
</div>
<script>
  var a= new Vue({
      el: '#app',
      data(){return {checked : true} }
    }
  )
</script>

能夠用v-model指令在控件上建立雙向數據綁定。正如咱們已經看到的v-model是v-bind和v-on的語法糖，可是確實很甜。

做者：劉傳君

建立過產品，創過業。好讀書，求甚解。
能夠經過 1000copy#gmail.com 聯繫到我

出品

bootstrap小書 https://www.gitbook.com/book/...
http小書 http://www.ituring.com.cn/boo...
Git小書 http://www.ituring.com.cn/boo...