Vue.js事件处理

事件处理​ 监听事件​

我们可以使用v-on指令 (简写为@) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler"或@click="handler"。

事件处理器 (handler) 的值可以是：

内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与onclick类似)。

方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

内联事件处理器​

内联事件处理器通常用于简单场景，例如：

js

const count = ref(0)

template

<button @click="count++">Add 1</button> <p>Count is: { { count }}</p>

在演练场中尝试一下

方法事件处理器​

随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此v-on也可以接受一个方法名或对某个方法的调用。

举例来说：

js

const name = ref('Vue.js') function greet(event) { alert(`Hello ${name.value}!`) // `event` 是 DOM 原生事件 if (event) { alert(event.target.tagName) } }

template

<!-- `greet` 是上面定义过的方法名 --> <button @click="greet">Greet</button>