Vue 事件
Vue 中的事件处理是通过v-on指令，这样我们就可以在单击按钮时发生一些事情。
事件处理是指 HTML 元素被设置为在特定事件发生时运行特定代码。
Vue 中的事件易于使用，并使我们的页面真正具有响应能力。
Vue方法是可以设置为在事件发生时运行的代码。
和v-on修饰语您可以更详细地描述如何对事件做出反应。
开始事件
让我们从一个示例开始，展示如何单击按钮来计算森林中的驼鹿数量。
我们需要：
- 一个按钮
v-on在 <button> 标签上监听“click”事件- 增加驼鹿数量的代码
- Vue实例中保存驼鹿数量的属性（变量）
- 双花括号
{{}}显示驼鹿数量的增加
示例
单击按钮可数出森林中多一只驼鹿。每次单击按钮时，计数属性都会增加。
<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指令允许我们创建响应用户操作的页面。
Vuev-on其工作原理是告诉浏览器要监听什么事件，以及当该事件发生时要做什么。
方法
如果我们想在事件发生时运行更复杂的代码，我们可以将代码放在 Vue 方法中，并从 HTML 属性引用该方法，如下所示：
<p v-on:click="changeColor">Click me</p>
事件修饰符
此外v-on和 Vue 方法，我们可以使用称为事件修饰符修改事件，使其仅在页面加载后发生一次，或者修改“提交”等事件以防止提交表单。
了解更多
正如我们所看到的，在 Vue 中使用事件需要学习三种技术：
- Vue
v-on指令 - Vue 方法
- Vue
v-on修饰语
单击“下一步”继续本教程并了解有关这些事件处理技术的更多信息。
Vue练习
截取页面反馈部分，让我们更快修复内容！也可以直接跳过填写反馈内容!