v-model的實現(xiàn)原理

基礎(chǔ)用法

• v-model 本質(zhì)上不過是語法糖，可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會根據(jù)控件類型自動選取正確的方法來更新元素。它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對一些極端場景進行一些特殊處理。v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數(shù)據(jù)作為數(shù)據(jù)來源。你應(yīng)該通過 JavaScript 在組件的 data 選項中聲明初始值。
• v-model 在內(nèi)部為不同的輸入元素使用不同的屬性并拋出不同的事件：
  • text 和 textarea 元素使用 value 屬性和 input 事件；
  • checkbox 和 radio 使用 checked 屬性和 change 事件；
  • select 字段將 value 作為 prop 并將 change 作為事件。

實現(xiàn)原理

• v-model只不過是一個語法糖而已,真正的實現(xiàn)靠的還是

  • v-bind:綁定響應(yīng)式數(shù)據(jù)
  • 觸發(fā)oninput 事件并傳遞數(shù)據(jù)

  例如：

  <input v-model="searchText">

  等價于：

  <inputv-bind:value="searchText"v-on:input="searchText = $event.target.value" > <!-- 自html5開始,input每次輸入都會觸發(fā)oninput事件， 所以輸入時input的內(nèi)容會綁定到searchText中，于是searchText的值就被改變; $event 指代當(dāng)前觸發(fā)的事件對象; $event.target 指代當(dāng)前觸發(fā)的事件對象的dom; $event.target.value 就是當(dāng)前dom的value值; 在@input方法中，value => searchText; 在:value中,searchText => value; -->

總結(jié)

以上是生活随笔為你收集整理的v-model的实现原理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。