vue的事件綁定

• 語法

v-on:事件名.修飾符 = 方法名() | 方法名 | 簡單的JS表達式
簡寫： @事件名.修飾符 = 方法名() | 方法名 | 簡單的JS表達式

事件名： click|keydown|keyup|mouseover|mouseout|自定義事件名
修飾符： .stop | .prevent | .once | .self | .left | .right | .middle | .up| .down | .keyCode | .keyAlias | .native | .passive

• 事件綁定類型

//單事件、單方法
v-on:事件名.修飾符 = "方法名()" | "方法名" | "簡單的JS表達式"

//單事件、多方法
v-on:事件名.修飾符 = "[方法名1(), 方法名2()]"

//多事件、多方法
v-on:事件名1.修飾符=方法名1 v-on:事件名2.修飾符=方法名2 
v-on = "{'事件名1':方法名1， '事件名2':方法名2}"

• 原理： 既不是屬性賦值，也不是事件監聽，完成的是事件的回調

<p id="p2" v-on:click="show()">vue事件解釋</p>

 //v-on會默認爲綁定事件提供一個默認函數，事件賦值只是將賦值的函數做爲默認函數的內部的回調函數進行執行
 //爲了讓事件和vue對象產生關聯
let pDom2=document.getElementById("p2");
pDom2.addEventListener("click",function(){
   show();
})

• 參數傳遞

• • 事件的參數傳遞: 遵循JS的方法傳參規則，同時可取vue實例倉庫的變量

  • 頁面方法綁定時的 參數 this：會被vue直接重寫爲指向於 window的對象

  • vue 將事件源對象 封裝成了 $event，事件源爲$event.target

<input type="button" value="傳遞參數event" v-on:click="printEvent($event)">