v-model實現原理

v-model 是什么

只是一種數據綁定和事件監聽的語法糖

原生表單標簽元素中的v-model

v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數據作為數據來源（即將vue實例數據綁定到對應表單的值屬性中去）。

你應該通過 JavaScript 在組件的 data 選項中聲明初始值。

如input標簽：

 

 

 

 

v-model 在不同的 HTML 標簽上使用會監控不同的屬性和拋出不同的事件：

• input,text 和 textarea 元素使用 value 屬性和 input 事件；

• checkbox 和 radio 使用 checked 屬性和 change 事件；

• select 字段將 value 作為 prop 並將 change 作為事件。

自定義組件 v-model

在自定義的組件上 v-model 默認會利用名為 value 的 prop 和名為 input 的事件實現，但是對於不同的表單元素 value 屬性會用於不同的目的，

比如單選框、復選框表現為 checked。為了區別這些不同的表現特性 Vue 給組件提供了 model 配置屬性。model 是一個對象：提供 prop 屬性

指定組件 value 特性，event 指定值變化時觸發的事件。

具體實現：

 

 

 v-model修飾符

.lazy

onchange事件在失去焦點時觸發，input事件在用戶輸入時觸發

.number

.trim