上一篇文章讲解“vue.js指令v-for”，本篇文章讲解“vue.js指令v-on”。

---

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

1. v-on指令

浏览器访问：

v-on后加“:”加事件名来给元素绑定事件，这里的“click”可以是任何js原生支持的事件，“=”后面跟着对应的方法名。

---

2. v-on简写

v-on可以简写为@。

---

3. 内联js语句

当一些逻辑比较简单的时候，可以不在methods中定义方法，而是在模板的事件绑定中直接在“=”后写上逻辑。

将加1的操作改为内联js语句。

浏览器访问：

---

4. $event

代表绑定事件元素的event对象。

注意：这只是原生html标签是上$event才表示event，如果是自定义组件是不同的。

浏览器访问：

---

5. 事件修饰符

简单的说就是可以在模板中是用v-on的时候，通过在"v-on"后加".xxx"，实现event.preventDefault()或event.stopPropagation()等常见操作。

事件修饰符有5个：

.stop：阻止事件冒泡。

.prevent：阻止浏览器默认行为，比如页面滚动等。

.capture：翻转事件传播方向，本来事件是按照最内元素到外元素执行的，叫事件冒泡，capture正好相反，让元素从外到内传播事件。

.self：元素只在绑定的元素上执行。

.once：绑定的事件只执行一次，之后失效。

---

6. 键盘修饰符

在监听键盘事件时，我们经常需要监测常见的键值。Vue允许为v-on在监听键盘事件时添加关键修饰符：

记住所有的keyCode比较困难，所以Vue为最常用的按键提供了别名：

全部的按键别名：

---

7. 按钮修饰符（鼠标）

用来响应每一个鼠标按键。全部的修饰符：.left/.right/.middle。

---

8. 修饰键(鼠标+键盘)

组合键的用法：

注意

1. 从事件修饰符开始，了解即可，用的时候现找。

Vue.js连载为卓象程序员原创，转载请联系卓象程序员

关注卓象程序员，定期发布技术文章

下一篇讲解“vue.js指令v-model”