JavaScript在浏览器中以单线程模式运行，页面加载后，一旦页面上所有的JavaScript代码被执行完后，就只能依赖触发事件来执行JavaScript代码。浏览器在接收到用户的鼠标或键盘输入后，会自动在对应的DOM节点上触发相应的事件。如果该节点已经绑定了对应的JavaScript处理函数，该函数就会自动调用。
在我们平常经常能看到这样的一些例子：
- 当用户点击鼠标时
- 当页面加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交HTML表单时
- 当用户触发按键时
在使用Vue开发项目时，我们同样逃脱不了一些事件，那么这一节我们就一起来看看怎么在Vue中给元素或组件绑定一些事件。在学习Vue中的相关知识之前，咱们先简单的回忆一些JavaScript相关的知识。
JavaScript中事件相关知识
在JavaScript中任何一个DOM元素都有其自身存在的事件对象。事件对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置和鼠标按钮的状态等。事件通常与函数结合使用，函数不会在事件发生前被执行。
在JavaScript中常见的事件句柄（Event Handlers）主要有：
| 属性名 | 描述(对应事件发生在何时...) | 属性名 | 描述(对应事件发生在何时...) |
onabort | 图像的加载被中断 | onblur | 元素失去焦点 |
onchange | 域的内容被改变 | onclick | 当用户点击某个对象时调用的事件名柄 |
ondblclick | 当用户双击某个对象时调用的事件句柄 | onerror | 在加载文档或图像时发生错误 |
onfocus | 元素获得焦点 | onkeydown | 某个键盘按键被按下 |
onkeypress | 某个键盘按键被按下并松开 | onkeyup | 某个键盘按键被松开 |
onload | 一张页面或一幅图像完成加载 | onmousemove | 鼠标按钮被按下 |
onmousemove | 鼠标被移动 | onmouseout | 鼠标从某个元素移开 |
onmouseover | 鼠标移动到某元素之上 | onmouseup | 鼠标铵键被松开 |
onreset | 重置按钮被点击 | onresize | 窗口或框架被重新调整大小 |
onselect | 文本被选中 | onsubmit | 确认按钮被点击 |
onunload | 用户退出页面 |
1 2点击我
3 4 // JavaScript5 function clickEvent() {6 alert('点我，我就出来了')7 }
这个时候效果如下：
但在我们的JavaScript文件中，对于onclick通过使用click来替换，比如上面的示例，我们换成这样的代码：
1 2点击我
3 4 // JavaScript 5 6 function clickEvent() { 7 alert('点我，我就出来了') 8 } 9 10 let ele = document.querySelector('h1')11 12 ele.addEventListener('click', clickEvent, false)
他们得到的效果是一样的。
有关于这方面的知识，建议阅读下面的一些文章：
Vue中的 v-on
事件是每个框架都绕不过去的话题，实现的方式各有千秋，在Vue中，我们通过v-on的指令来进行事件监听。在Vue中绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
从v2.4.0开始v-on同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。
用在普通元素上时，只能监听 原生DOM事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
在监听原生DOM事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个$event属性：v-on:click="handle('ok', $event)"。
先来看一个简单的示例，比如文章开头的示例，我们在Vue中应该怎么写。
// JavaScriptvar app = new Vue({ el: '#app', methods: { clickMe: function() { alert("点击我，我就出来了!(^_^)") } }, data: { }})点击我
看到的效果如下：
从效果上看，和JavaScript中的原生效果是一样的。咱们回到Vue的世界中来。
在Vue的模板中，我们使用了v-on，并且绑定了一个click事件（v-on:click），然后给这个click事件绑定了一个事件clickMe。而这个clickMe在Vue中，我们一般是放在methods: {}中，也就是说clickMe这个函数写在methods中。至于methods起什么作用，咱们先不说，后面我们会有一节内容专门来介绍这个知识点。
看到v-on:click="clickMe"，大家可能会看到我们在HTML中的onclock="clickEvent"。是不是非常的相似。从外表现象看，他们写法不一样，但是起到的结果是一致的。在Vue中，我们还可以使用@click来替代v-on:click。那么他们起到的作用是一样的。
在Vue中，对于v-on的使用方式，除了上面的示例展示之外，还有下面这些使用方式：
在子组件上监听自定义事件（当子组件触发my-event时将调用事件处理器）：
从上面的简单示例中，可以看出Vue在事件处理的过程中自带了一些修饰符：
.stop：调用event.stopPropagation().prevent：调用event.preventDefault().capture：添加事件侦听器时使用capture模式.self：只当事件是从侦听器绑定的元素本身触发时才触发回调.{keyCode | keyAlias}：只当事件是从特定键触发时才触发回调.native：监听组件根元素的原生事件.once：只触发一次回调.left：只当点击鼠标左键时触发，（v2.2.0+ 才具有）.right：只当点击鼠标右键时触发，（v2.2.0+ 才具有）.middle：只当点击鼠标中键时触发，（v2.2.0+ 才具有）.passive：以{passive: true}模式添加侦听器，（v2.3.0+ 才具有）
Vue的官网对事件的处理和组件的自定义的事件都有详细的介绍。如果感兴趣的话，可以查看相应的内容：
v-on示例
我们来做一个简单的效果，就是一个计数器，这个效果很简单，点击+数字往下加，点击-数字往下减。在Vue中，我们的模板中有三个元素，两个按钮，一个显示数字的容器，第一个按钮做加的计算，第二个按钮做减的计数。简单的结构如下所示：
{ { count }}
两个按钮上都绑定了一个click事件，点击按钮分别触发increase和reduce两个函数，前者做加法，后者做减法。另外一个元素中我们有一个值{ { count }}。每次点击按钮这个{ { count }}都会做相应的变化。如果你接触过前面的内容，知道{ {}}在Vue中是属性文本插值，如果你没有接触过，可以阅读上一篇文章《》。
模板有了之后，需要添加对应的功能。
let app = new Vue({ el: '#app', methods: { increase: function() { this.count++ }, reduce: function() { this.count-- } }, data: { count: 0 }})
在Vue中，我们在methods中声明了两个函数，分别是increase（加法）和reduce（减法）。另外需要在数据源中声明count。对于这么简单的效果，我们也可以直接在v-on中处理完：
实际上，许多事件处理的逻辑都很复杂，所以直接把JavaScript代码写在v-on指令中是不可行的。因此v-on接收一个定义的方法才更适合我们平常的开发模式。比如我们一开始看到的示例。
上面看到的示例都是click的事件，其实其他的事件也是一样的使用方式，比如我们要实现一个mousemove的效果，那么我们可以使用v-on:mousemove=""或者使用@mousemove即可。如果你感兴趣的话，可以自己动手一试。
总结
这篇文章主要学习了Vue中的v-on指令。这个指令是用来给DOM元素绑定事件，通过这个指令，咱们可以很好的在Vue中的DOM绑定事件，实现一些功能性的操作。比如文章中的示例，点击加号按钮做加法计数。同时，Vue中对一些事件还提供了一些修饰符的功能，比如.stop用来阻止事件冒泡之类的。
在Vue我们可以直接在v-on写一些简单的功能，也可以使用一些内联的功能，但对于一些复杂的功能，还是需要借助Vue的methods的特性，将事件对应的功能都放置在methods: {}中。这样更易于维护，也可以写一些复杂的功能。