v-model 主要是用于表單上數(shù)據(jù)的雙向綁定
一：基本
1:主要用于 input牙甫，select，textarea棕所，component
2:修飾符：
? ??.lazy- 取代input監(jiān)聽change事件
? ??.number- 輸入字符串轉(zhuǎn)為數(shù)字
????.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 喷楣，每當輸入框內(nèi)容發(fā)生變化趟大，就會觸發(fā) oninput ，把最新的value傳遞給 mes铣焊。從而實? ????現(xiàn)了v-model
三：v-model用在組件上的時候
我們知道v-model可以實現(xiàn)數(shù)據(jù)的雙向綁定逊朽，但是，如果說這是一個復(fù)雜的輸入框曲伊，在項目中也經(jīng)常使用叽讳。此時我們我們就把這個1輸入框封裝成組件，那怎么利用v-mode讓父組件的值與子組件input框里的值雙向綁定起來坟募〉涸椋看下面的例子
1：父組件
? ? ? ? ? ? ? ? <InputBox v-model="mes"></InputBox>
? ? ? ? ? ? 根據(jù)上面講的v-model語法糖，所以 InputBox那行代碼也可以寫成
? ? ? ? ? ? <InputBox v-bind:value="value"? ?v-on:input="mes= $event.target.value"></InputBox>
2：子組件
所以說：1：接受一個value? prop? ? 2：在有新的值時觸發(fā)input事件并將新值作為參數(shù)? 懈糯。這樣涤妒，我們就可以看到子組件和父組件的值就可以聯(lián)動起來。但是我們看到v-model中的事件是input,如果碰到單選復(fù)選按鈕這種check事件赚哗，那我們就需要去自定義v-model,我們來看看第四節(jié)
四：v-model自定義她紫。
1：父組件還是一樣的寫
<InputCheckout v-model="foo"></InputCheckout>
但是單選復(fù)選框不會觸發(fā)input事件，只會觸發(fā)change事件蜂奸。所以在子組件我們需要自定義v-model枝冀。我們來看看代碼哈
2：
