v-model實現原理
阿新 • • 發佈：2021-11-08
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