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">点击我</p>
事件修饰符
除了 v-on 和 Vue 方法，我们还可以使用称为 **事件修饰符** 的东西来修改事件，例如，使其在页面加载后只发生一次，或者修改 'submit' 事件以阻止表单提交。
了解更多
正如我们所见，要使用 Vue 中的事件，我们需要学习三种技术：
- Vue 的
v-on指令 - Vue 方法
- Vue 的
v-on修饰符
点击“下一页”继续本教程，了解更多关于事件处理的这些技术。
