v model語法糖在元件中的使用

v-model 主要是用於表單上資料的雙向繫結

1:主要用於 input，select，textarea，component

2:修飾符：

.lazy- 取代input監聽change事件

.number- 輸入字串轉為數字

.trim- 輸入首尾空格過濾

此時mes值就與input的值進行雙向繫結

實際上上面的**是下面**的語法糖。

要理解這行**，首先你要知道 input 元素本身有個 oninput 事件，這是 html5 新增加的，類似 onchange ，每當輸入框內容發生變化，就會觸發 oninput ，把最新的value傳遞給 mes。從而實現了v-model

我們知道v-model可以實現資料的雙向繫結，但是，如果說這是乙個複雜的輸入框，在專案中也經常使用。此時我們我們就把這個1輸入框封裝成元件，那怎麼利用v-mode讓父元件的值與子元件input框裡的值雙向繫結起來。看下面的例子

1：父元件

根據上面講的v-model語法糖，所以 inputbox那行**也可以寫成

2：子元件

所以說：1：接受乙個value prop 2：在有新的值時觸發input事件並將新值作為引數。這樣，我們就可以看到子元件和父元件的值就可以聯動起來。但是我們看到v-model中的事件是input,如果碰到單選複選按鈕這種check事件，那我們就需要去自定義v-model,我們來看看第四節

1：父元件還是一樣的寫

但是單選核取方塊不會觸發input事件，只會觸發change事件。所以在子元件我們需要自定義v-model。我們來看看**哈

這樣就可以了