Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。本文为大家介绍了使用vue.js处理事件的方法，希望对大家有一定的帮助。
当您使用Vue构建动态网站时，您很可能希望它能够响应事件。
例如，如果用户单击按钮，提交表单，甚至只是移动鼠标，您可能希望您的Vue网站以某种方式做出响应。
使用Vue处理事件
我们可以通过将v-on指令添加到相关DOM元素来拦截事件。假设我们要处理对按钮元素的点击-我们可以在Vue模板中添加以下内容：
<button v-on:click="clickHandler"></button>
请注意，我们在指令中添加了一个参数，该v-on参数将是我们要处理的事件的名称（在本例中为click）。
然后，我们将表达式绑定到指令，该指令通常是您要用于处理事件的方法。在这种情况下，我们称之为clickHandler。
提示：该v-on指令具有一个方便的速记形式@，可以代替以下形式使用v-on:：<button @click="clickHandler"></button>。
可以处理的事件类型
除了click之外，还可以处理哪些DOM事件？
Vue可以处理任何类型的web或移动本机事件（以及我们稍后将讨论的自定义事件），包括：
-
submit
-
keyup
-
drag
-
scroll
最常见的DOM事件的列表
事件处理方法
如
本文来源gao!daima.com搞$代!码#网#
果将方法绑定到事件处理指令，我们现在可以运行一些自定义代码。
在本示例中，让我们保持简单，只将一条消息记录到控制台，但是您还可以做一些更有趣的事情，例如显示/隐藏另一个元素，增加计数器等。
<div id="app"> <button v-on:click="clickHanlder"></button> </div>
new Vue({
el: "#app",
methods: {
clickHandler () {
console.log("You clicked the button!");
}
}
})
事件对象
事件对象将传递给事件处理程序，从而为如何响应事件打开了更多前端的相关知识请关注搞代码网vue.js 教程栏目。
以上就是使用vue.js处理事件的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：使用vue.js处理事件
