前言

使用過vue的小伙伴都會感覺，哇，這個框架對開發者這么友好，簡直都要笑出聲了。

確實，使用過vue的框架做開發的人都會感覺到，以前寫一大堆操作dom，bom的東西，現在用不著了，對開發者來說更容易去注重對操作邏輯的思考和實現，省了不少事兒呢！！！

我是直接從原生js，jq的開發用過度到使用vue，對這個框架也是喜愛有加，閑來無事，去看了看它的一些實現原理。

vue是一個mvvm框架，即數據雙向綁定，即當數據發生變化的時候，視圖也就發生變化，當視圖發生變化的時候，數據也會跟著同步變化。這也算是vue的精髓之處了。值得注意的是，我們所說的數據雙向綁定，一定是對于UI控件來說的，非UI控件不會涉及到數據雙向綁定。 單向數據綁定是使用狀態管理工具（如redux）的前提。

下面來介紹一下vue的一個非常"牛逼"的功能，數據雙向綁定，也就是我們在項目里用到的v-model指令。

v-model在vue官方文檔上是介紹在"表單輸入綁定"那一節。

對于表單，大家肯定用得都已經超級熟練了，對于<input>、<textarea>和<select>標簽在項目里面使用都已經沒話說了

官方提到的v-model是一個語法糖，為什么這么說呢？下面看個例子：

<div id="test1"><input v-model="input"><span>input: {{ input }}</span></div>

如上，是一個簡單的使用v-model的雙向綁定，我們在改變input這個變量的值，即在輸入框中去寫內容的時候，在span標簽內的插值(mustache)會同步更新我們剛剛輸入的值

其實上面的也可以這樣寫：

<div id="test1"><input v-on:input="input = $event.target.value" v-bind:value='input'><span>input: {{ input }}</span></div>

好了，前面