v-model的實現原理

基礎用法

• v-model 本質上不過是語法糖，可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數據作為數據來源。你應該通過 JavaScript 在組件的 data 選項中聲明初始值。

• v-model 在內部為不同的輸入元素使用不同的屬性並拋出不同的事件：

  • text 和 textarea 元素使用 value 屬性和 input 事件；
  • checkbox 和 radio 使用 checked 屬性和 change 事件；
  • select 字段將 value 作為 prop 並將 change 作為事件。

實現原理

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

  • v-bind:綁定響應式數據

  • 觸發oninput 事件並傳遞數據

• 舉例如下：

  <input v-model="sth" />
  //  等同於
  <input :value="sth" @input="sth = $event.target.value" /> //自html5開始,input每次輸入都會觸發oninput事件，所以輸入時input的內容會綁定到sth中，於是sth的值就被改變;
  //$event 指代當前觸發的事件對象;
  //$event.target 指代當前觸發的事件對象的dom;
  //$event.target.value 就是當前dom的value值;
  //在@input方法中，value => sth;
  //在:value中,sth => value;

   

• v-model是雙向綁定,即表單可以拿到vue中的數據,表單中的數據也可以傳到vue中
  而v-bind:value 只能是表單拿到vue的數據,vue無法拿到表單的數據
  個人理解,有瑕疵以后補充

• v-bind

  • 縮寫：:
  • 預期：any (with argument) | Object (without argument)
  • 參數：attrOrProp (optional)
  • 修飾符：
    
    • .prop - 被用於綁定 DOM 屬性。
    • .camel - (2.1.0+) 將 kebab-case 特性名轉換為 camelCase.
    • .sync (2.3.0+) 語法糖，會擴展成一個更新父組件綁定值的 v-on 偵聽器。
  • 用法：
    動態地綁定一個或多個特性，或一個組件 prop 到表達式。
    在綁定 class 或 style 特性時，支持其它類型的值，如數組或對象。可以通過下面的教程鏈接查看詳情。
    在綁定 prop 時，prop 必須在子組件中聲明。可以用修飾符指定不同的綁定類型。
    沒有參數時，可以綁定到一個包含鍵值對的對象。注意此時 class 和 style 綁定不支持數組和對象。

  v-on

  • 縮寫：@
  • 預期：Function | Inline Statement | Object
  • 參數：event
  • 修飾符：
    
    • .stop - 調用 event.stopPropagation()。
    • .prevent - 調用 event.preventDefault()。
    • .capture - 添加事件偵聽器時使用 capture 模式。
    • .self - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
    • .{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調。
    • .native - 監聽組件根元素的原生事件。
    • .once - 只觸發一次回調。
    • .left - (2.2.0) 只當點擊鼠標左鍵時觸發。
    • .right - (2.2.0) 只當點擊鼠標右鍵時觸發。
    • .middle - (2.2.0) 只當點擊鼠標中鍵時觸發。
    • .passive - (2.3.0) 以 { passive: true } 模式添加偵聽器
  • 用法：
    綁定事件監聽器。事件類型由參數指定。表達式可以是一個方法的名字或一個內聯語句，如果沒有修飾符也可以省略。
    從 2.4.0 開始，v-on 同樣支持不帶參數綁定一個事件/監聽器鍵值對的對象。注意當使用對象語法時，是不支持任何修飾器的。
    用在普通元素上時，只能監聽 原生 DOM 事件。用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件。
    在監聽原生 DOM 事件時，方法以事件為唯一的參數。如果使用內聯語句，語句可以訪問一個 $event 屬性：v-on:click="handle('ok', $event)"。

• Vue.js為兩個最為常用的指令提供了特別的縮寫：

  v-bind縮寫

  <!--完整語法-->
  <a v-bind:href="url">測試</a>
  <!--縮寫-->
  <a :href="url">測試</a>

  v-on縮寫

  <!--完整語法-->
  <a v-on:click="doSomething">修改</a>
  <!--縮寫-->
  <a @click="doSomething">修改</a>