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