表單輸入綁定
vue的核心：聲明式的指令和數據的雙向綁定。
那麽聲明式的指令，已經給大家介紹完了。接下來我們來研究一下什麽是數據的雙向綁定?
另外，大家一定要知道vue的設計模式：MVVM
M是Model的簡寫，V是View的簡寫，VM就是ViewModel。
單向綁定和雙向綁定的區別？
單向綁定非常簡單，就是把Model綁定到View，當我們用JavaScript代碼更新Model時，View就會自動更新。
有單向綁定，就有雙向綁定。
如果用戶更新了View，Model的數據也自動被更新了，這種情況就是雙向綁定。
什麽情況下用戶可以更新View呢？填寫表單就是一個最直接的例子。當用戶填寫表單時，View的狀態就被更新了，如果此時MVVM框架可以自動更新Model的狀態，那就相當於我們把Model和View做了雙向綁定。
其實單項數據也有雙向綁定的意思，不過頁面變動後數據的變化不會發生自動更新。
我們可以這樣認為：雙向數據綁定=單向數據綁定+UI事件監聽。
我們先看個vue中雙向數據綁定的例子：
<body> <div id="app"> <input type="text" v-model="meg"> <p>{{data}}</p> </div> <script> var app = new Vue({ el:‘#app‘, data :{ meg:‘‘ } }) </script> </body>
再簡單不過了，效果顯示，當我們在input輸入框中輸入內容的時候，下面p標簽同步顯示內容。這就是最典型的雙向數據綁定的例子。vue裏使用v-model實現此想法。
那麽我們看一下v-model的實現原理是怎樣的呢？
首先大家一定要知道，官網上介紹的。
通過官網的介紹，我們知道v-mode指令是v-bind:vlaue 和v-on:input的結合體。
看個例子吧，同時給大家介紹了計算屬性getter的用法。
<!-- <input type="text" v-model = ‘usernameValue‘>--> <!-- 等價於： --> <input type="text" v-bind:value=‘usernameValue‘ @input=‘inputHandler‘> <button @click=‘commitHandler‘>提交</button> <!-- ref 被用來給元素或子組件註冊引用信息。引用信息將會註冊在父組件的 $refs 對象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實例 --> <div class="list" ref = ‘item‘></div>
var set = new Vue({
el:‘#set‘,
data:{
username:‘‘,
txt:‘‘
},
methods:{
commitHandler(){
this.$refs.item.innerHTML = this.usernameValue;
},
inputHandler(e){
this.usernameValue = e.target.value;
}
},
computed:{
usernameValue:{
get(){
return this.username;
},
set(newValue){
this.username = newValue;
}
}
}
看完上個例子之後，相信大家對v-model實現雙向數據綁定和計算屬性的setter方法一定有個新的認識了。
接下來我們看看v-model的一些基礎用法！
v-model
v-model 指令在表單 <input> 及 <textarea> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。
v-model只適用在表單控件中
比如：表單文本、多行文本、復選框、單選按鈕、多選按鈕、選擇框。內容太多，就不給大家一一闡述了。大家一定要去閱讀vue的官網文檔
https://cn.vuejs.org/v2/guide/forms.html
表單輸入綁定