原文地址
v-model 主要是用於表單上數據的雙向綁定
一：基本
1:主要用於 input，select，textarea，component
2:修飾符：
.lazy- 取代input監聽change事件
.number- 輸入字符串轉為數字
.trim- 輸入首尾空格過濾
二：語法糖
<input type="text" v-model="mes"> 此時mes值就與input的值進行雙向綁定
實際上上面的代碼是下面代碼的語法糖。
<input v-bind:value="mes" v-on:input="mes= $event.target.value"/>
要理解這行代碼，首先你要知道 input 元素本身有個 oninput 事件，這是 HTML5 新增加的，類似 onchange ，每當輸入框內容發生變化，就會觸發 oninput ，把最新的value傳遞給 mes。從而實 現了v-model
三：v-model用在組件上的時候
我們知道v-model可以實現數據的雙向綁定，但是，如果說這是一個復雜的輸入框，在項目中也經常使用。此時我們我們就把這個1輸入框封裝成組件，那怎么利用v-mode讓父組件的值與子組件input框里的值雙向綁定起來。看下面的例子
1：父組件
<InputBox v-model="mes"></InputBox>
根據上面講的v-model語法糖，所以 InputBox那行代碼也可以寫成
<InputBox v-bind:value="value" v-on:input="mes= $event.target.value"></InputBox>
2：子組件
所以說：1：接受一個value prop 2：在有新的值時觸發input事件並將新值作為參數 。這樣，我們就可以看到子組件和父組件的值就可以聯動起來。但是我們看到v-model中的事件是input,如果碰到單選復選按鈕這種check事件，那我們就需要去自定義v-model,我們來看看第四節
四：v-model自定義。
1：父組件還是一樣的寫
<InputCheckout v-model="foo"></InputCheckout>
但是單選復選框不會觸發input事件，只會觸發change事件。所以在子組件我們需要自定義v-model。我們來看看代碼哈
2：
