VUE事件處理 v-on
阿新 • • 發佈：2020-07-27
VUE事件處理 v-on
事件處理方法
完整格式：
v-on:事件名="函式名" 或者 v-on:事件名="函式名(引數...)"
縮寫格式：
@事件 = "函式名" 或者 @事件名 = "函式名(引數...)"
注意：@ 後面沒有冒號。
event ：函式中的預設形參，代表原生的DOM事件，當呼叫的函式，有多個引數傳入的時候，需要使用原生DOM事件，則通過 $event 作為實參傳入。
作用：用於監聽 DOM 事件。
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件處理</title> </head> <body> <div id="app"> <h3>事件處理函式 v-on 或者 @</h3> <button v-on:click="say">Say {{msg}}</button> <!-- $event 代表的是原生的DOM事件 --> <button @click="warn('王佳偉',$event)">Warn</button> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { msg: '你好，王佳偉' }, // 定義事件處理函式 methods: { say: function (event) { // event 代表的是DOM的原生事件，vue會自動的而將它傳入進來。 alert(this.msg) alert(event.target.innerHTML) }, warn: function (name, event) { // 如果說函式有多個引數，而又需要使用原生事件，則需要使用$event作為引數傳入 alert(name + ' ' + event.target.tagName) } }, }) </script> </body> </html>