5.vue事件处理

监听事件

我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName"

 <button @click="counter += 1">Add 1</button>

 data() {
     return {
         counter: 0
     }
 }

事件处理方法

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

 <button @click="greet">Greet</button>

 methods: {
     greet(event) {
         // `event` 是原生 DOM event
         if (event) {
             alert(event.target.tagName)
         }
     }
 }

内联处理器中的方法

这是官方的翻译称呼，其实我们可以直接叫他 "事件传递参数"

 <button @click="say('hi')">Say hi</button>
 <button @click="say('what')">Say what</button>

 methods: {
     say(message) {
         alert(message)
     }
 }