** 新学习新征程，我们一起踏上学习 vue.js的新长征
遇见 vue.js --------阿文的vue.js学习笔记（1）-----初识vue.js
遇见 vue.js --------阿文的vue.js学习笔记（2—1）----- 基本使用 [1]
遇见 vue.js --------阿文的vue.js学习笔记（2—2）----- 基本使用 [2]
… … …
遇见 vue.js --------阿文的vue.js学习笔记(目录)
关注我，我们一起学习进步。
**
既然说到事件处理，那肯定要回想起我们前面所学过的 v-on 绑定事件监听 (用来 监听 DOM 事件，并在触发时，运行一些 js 代码)
补充： 我们的v-on 可以简写成 @ ，这两者产生的效果是一样的
这里我们简单举个例子：有一个按钮，当点击的时候弹出一个“我被点击了”
当然有些时候，你会遇到它是直接将 js 代码写在 v-on 指令中的，但是当我们想要执行的 js 代码变多变复杂，这样写就是不可取的，所以我们一般都使用方法调用的形式，在下面的数据中创建一个方法，然后在上面的 v-on 指令中直接调用方法即可。
当我们需要在方法中传入参数的时候，就可以使用 内联处理器方法
简单示例：同样是弹出，只不过这次弹出的内容不再是死的，而是根据 v-on 后面调用方法时传入的参数来弹出。 当我们有时需要在内联语句处理器中访问原始的 DOM 事件的时候，就可以使用特殊变量 $event 来把它传入方法
简单示例：这里event.type 是来查看该事件的属性
其实这两种方式类似，只不过一种能传参，一种不能传参而已
事件修饰符能够简单的 处理一些DOM事件上的细节
我们的事件修饰符 是直接写在 绑定的指令后面 .事件修饰符
示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js"></script> <style> #b1{ background-color: greenyellow; height: 300px; width: 300px; } #b2{ background-color: red; height: 150px; width: 150px; } </style> </head> <body> <div id="a"> <div id="b1" v-on:click="fn2"> <div id="b2" v-on:click="fn1"></div> </div> </div> <script> new Vue({ el:"#a", data:{ }, methods:{ fn1:function(){ alert("内部被点击") }, fn2:function(){ alert("外部被点击") } } }) </script> </body> </html>执行结果： 我们点击内部的时候，除了内部函数 被执行外，外部的函数也被调用了，这就是发生了冒泡事件。
我们可以阻止冒泡 通过添加 .stop
简单示例： 每一次我们的submit 提交之后都会进行页面的刷新，重载。 但是像下面这样添加之后，就会将其阻止，不会再直接刷新了。 <form v-on:submit.prevent="onSubmit"></form>
当然除了上面常见的两种外，下面还补充几个：
.self 只作用在自己身上 .capture 添加事件监听器时使用事件捕获模式 once 只执行一次
当我们在监听键盘事件的时候，我们经常会需要去检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
举个例子： 我们创建一个输入框，然后当我们输入内容按下enter 之后会将输入的数据传入输入框前面的 信息当中，并且每次传入都会重置上一次输入的数据
按照我们以前的写法的话就需要用if 来做判断
代码如下： 这种时候我们也可以省略掉下面的 if 判断语句，直接在上面写作：<input v-on:keyup.13="mm1"> 执行出来的结果也是完全一样的。
当然我们的 Vue 也提供了一些常用的按键码的别名 ： .enter 回车键 .tab TAB键 .delete(捕获“删除”和“退格”键) .esc 退出键 .space 空格键 .up 上 .down 下 .left 左 .right 右
我们可以用如下的系统修饰符来实现仅在按下相应的系统修饰键时，再按其他的才会触发鼠标或键盘事件的监听器。
系统修饰键一共有四个：
.ctrl.alt.shift.meta简单举个例子：就在我们上面那个例子的基础上进行修改 <input v-on:keyup.alt.enter="mm2">
这样写之后，就意味着，我们需要在按下alt 的基础下再按下 enter 键并释放 enter 键之后，我们的 mm2 事件才会被触发。
** 关注 校园君有话说 公众号 ，回复 web前端 免费领取50G 前端学习资料 一份 ，我们一起学习进步吧。 **
