事件处理

监听事件

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

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

xxxxxxxxxx
data() {
    return {
        counter: 0
    }
}

事件处理方法

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

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

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

内联处理器中的方法

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

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

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