基礎用法

• 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>