如何理解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...