如何理解v-model的實質爲語法糖

vue的v-model爲表單的完成提供了極大的便利，可以進行數據綁定，例如將input框的值和span值綁定，只要重新輸入顯示值會立即更改。下面我們來分析這一命令是如何實現的。在官方文檔中解釋這一名令實際僅是一個語法糖。那麼首先我們來看看語法糖的概念：

語法糖：指計算機語言中添加的某種語法，這種語法對語言的功能並沒有影響，但是更方便程序員使用。通常來說使用語法糖能夠增加程序的可讀性，從而減少程序代碼出錯的機會。

再來看看v-model的官方文檔

也就是v-modle實際爲語法糖。v-model=”something”則表示將value值綁定在something上，當值發生改變時觸發綁定的oninput事件。oninput事件綁定的函數是將觸發oninput事件的目標（該input）的value值賦值給something這個變量。所以：

• something即是實時的value值，每一次value值得更改都會觸發something改變
• 如果有別的控件綁定something那麼input的value值改變改控件的值顯示，因此實現了雙向綁定

接下來我們看一個例子，改例子中利用v-model實現textarea的剩餘字數統計：
先來看不用v-model實現的版本

 <p>{{text}}<p>
 <div class="item" id="text">
    <label>簡述：</label>
    <textarea maxlength="300" v-model="text"  ></textarea>
</div>

 <div id="icount">
    <p id="spann">您還可以輸入{{wordc}}字</p>
 </div>

以下是script部分代碼

data () {
      return {
        text: '',
        wordc: '300'
      }
    },
    methods: {
      mycou: function (event) {
        var a = this.text.length
        this.wordc = 300 - a
      }
    }

效果圖