Vue 事件
Vue 中的事件处理是通过 v-on 指令完成的，这样我们就可以在例如点击按钮时触发一些操作。
事件处理是指为 HTML 元素设置在发生特定事件时运行特定代码。
Vue 中的事件使用起来非常简单，并且可以使我们的页面真正响应。
Vue 的**方法**是在事件发生时可以设置运行的代码。
使用 v-on **修饰符**，您可以更详细地描述如何响应事件。
开始事件处理
让我们从一个例子开始，演示如何通过点击按钮来统计森林中的驼鹿数量。
我们需要
- 一个按钮
v-on在 <button> 标签上监听 'click' 事件- 增加驼鹿数量的代码
- Vue 实例中的一个属性（变量）来存储驼鹿的数量
- 双大括号
{{}}来显示增加的驼鹿数量
示例
点击按钮，森林里的驼鹿数量增加一只。每次点击按钮，count 属性都会增加。
<div id="app">
<img src="img_moose.jpg">
<p>{{ "Moose count: " + count }}</p>
<button v-on:click="count++">Count moose</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
count: 0
}
}
})
app.mount('#app')
</script>
自己动手试一试 »
注意： Vue 的一个好处是 <p> 标签中的驼鹿数量会自动更新。使用纯 JavaScript，我们需要通过额外的代码行来更新用户看到的数字。
活动
有很多事件可以用作触发代码运行的触发器，其中最常见的有：'click'、'mouseover'、'mouseout'、'keydown' 和 'input'。
有关可用的事件列表，您可以访问我们的 HTML DOM 事件页面。
'v-on'
v-on 指令允许我们创建能够响应用户操作的页面。
Vue 的 v-on 通过告诉浏览器要监听哪个事件以及发生该事件时要做什么来工作。
方法
如果我们想在事件发生时运行更复杂的代码，我们可以将代码放在 Vue 方法中，并像这样从 HTML 属性中引用该方法
<p v-on:click="changeColor">Click me</p>
事件修饰符
除了 v-on 和 Vue 方法之外，我们还可以使用称为**事件修饰符**的东西来修改事件，例如使其在页面加载后仅发生一次，或者修改 'submit' 等事件以防止表单被提交。
了解更多
正如我们所见，要学习如何使用 Vue 中的事件，我们需要了解三种技术
- Vue
v-on指令 - Vue 方法
- Vue
v-on修饰符
点击“下一页”继续本教程，了解更多关于这些事件处理技术的内容。
