基础
学习VUE,百分百用完双向绑定之后，就用到了事件绑定 v-on指令，简写 @，触发之后就产生页面响应。
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
在绑定事件后面可以直接进行数据的更新，或者里面放一个函数方法。
<div id="example-2">
<!-- `greet` 是在下面定义的方法名 -->
<button @click="greet">Greet</button>
</div>
里面对应的函数方法，默认会将原生dom事件也默认的带上。当然，也可以自己增加参数，使用 $event 作为原生dom事件的参数传入。
<button v-on:click="warn('Form cannot be submitted yet.'，$event)">
Submit
</button>
捕获与冒泡
在使用事件修饰符之前，先说下 事件流的响应过程。举例下面
<html>
<body>
<div id="外层元素" onclick="alert('我在外面')">
<div id="中层元素" onclick="alert('我在中间')">
<div id="内层元素" onclick="alert('我在里面')">这里面有内容</div>
</div>
</div>
</body>
</html>
对应的浏览器中的DOM结构是
最开始浏览器只是一个事件对应一个元素。比如点了 内层元素就内层元素响应，点了外层就外层元素响应。后来认为仅仅支持一个单一事件是不够的，到IE4之后提出了事件流的概念，一个元素支持多个事件，执行过程如下：
而且这个事件流还按照执行当前执行的状态起了好几个名字：事件捕获阶段、处于目标阶段、事件冒泡阶段。就好像我要吃箱子里面的苹果，原来说吃第二层箱子里面的苹果，就只吃第二层箱子里面的苹果。
关于事件流处理的过程，世纪初最开始是分两派的，网景主张捕获流：我打开最外层发现苹果我就吃，打开第二层发现苹果我在吃，打开最内层发现有苹果我再吃。
微软主张冒泡流：我先逐层打开，数清楚苹果我在从里到外吃（举例不恰当哈）。
（最开始阶段网景捕获只是向下查找事件的过程，微软只有向上查找的过程。）
不过在DOM2之后，W3C统一了标准，同时支持了捕获流和冒泡流，在增加事件监听的时候，addEventListener的第三个参数就是为捕获流和冒泡流准备的，默认是false,在冒泡阶段处理事件，参数变成true的意思就是在捕获阶段就处理该事件。
目前浏览器默认都采用了冒泡流，上面举例内容中，点击 这里面有内容 的部分，会一次弹框“我在里面”，“我在中间”，“我在外面”跟你实际显示在哪里没关系，跟dom树结果有关系。
元素默认行为
DOM中很多事件都存在默认行为，列举一些常用的：
- a :点击后会跳转页面
- submit: 点击form中的提交表单
- 右键点击：会产生菜单
- 鼠标滚轮： 网页会滚动，滚动条会动
- button: PC版本不做任何事情，手机浏览器中在form里就变成submit
- ……
事件修饰符
了解冒泡流、捕获流、默认行为之后，vue事件流相关事件修饰就好理解了。正常事件处理程序中，event.preventDefault() 来阻止默认行为，使用event.stopPropagation()来阻止事件传播，在捕获阶段就阻止向下，冒泡阶段就阻止向上。
VUE为了解决上面问题，提供了事件修饰符，目前有的有以下.stop .prevent .capture .self .once .passive,具体的含义如下：
<!-- .stop阻止单击事件继续冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- .capture 点击事件实在捕获阶段执行 -->
<div v-on:click.capture="doThis">...</div>
<!-- .self 只有点击当前自己的时候才执行，捕获和冒泡经过他都不执行，不过他本身产生的捕获和冒泡还是存在的-->
<div v-on:click.self="doThat">...</div>
<!-- .once点击事件将只会触发一次,触发一次之后，后面事件就不存在了。类似于事件使用addEventListener增加的，执行过一次之后，自动removeEventListener了 -->
<form v-on:submit.once="onSubmit"></form>
<!-- .prevent 阻止默认行为。比如提交不在重载，右键不产生菜单 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- .passive 表示默认行为立即执行，不用看prevent了 -->
<div v-on:scroll.passive="onScroll">...</div>
上面的这些事件修饰符是可以连用的。
拦截默认.prevent和执行默认.passive
这里有疑惑，既然默认会执行，为啥还要来个.passive的默认执行呢？
这是因为浏览器每次在执行默认事件之前，都会等监听事件开始执行才能看到有没有拦截，如果没拦截，我再执行，即使监听事件是个空函数，也是需要事件的。针对单次的行为，体现不出来差别。如果是那种短时间内执行很多次的话，就可能会造成页面卡顿。比如，页面滚动，移动手机浏览器上的手指滑动。在实际运行中，90%的默认事件其实都是不阻止的，也就是说，大部分事件，浏览器都白等监听器了。所以，passive监听器诞生了。（这个监听器是在chrome51版本之后添加的）
知道作用发现他们是相反的，也就是说他们不能同时使用，浏览器会报错哦。
按键修饰符
看名字就知道了，vue的监听键盘鼠标事件的修饰符了。很简单，如下
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
对应支持的事件是 .enter .tab .delete .esc .space .up .down .left .right
上述按键在组合键点击的时候也会触发，想要单纯一点的话，就再来一个修饰符 .exact。
鼠标点击的话也可以进一步限制为：.left .right .middle
原生修饰符.native
这个修饰符主要使用在自定义组件上，例如给组件添加一个@click事件，默认会当作一个绑定事件，等待组件内部一个 this.$emit(“click”)的方法向外传递的时候使用。如果我们单纯的就只是想单击这个组件的话，就可以加上 .native来将组件变成一个普通的html。这个熟悉在其他地方就没什么大用了好像，毕竟其他地方本来就是普通的html,是可以响应这些事件的。举例：
<div id = "app">
<my-component @click="say"></my-component>
</div>
Vue.component('my-component', {
template: "<button>按钮</button>",
})
new Vue({
el:"#app",
methods:{
i_said(){
say("点了按钮");
}
}
})
这里点击就组件，就没有什么用，对于组件来说，@click不是一个点击事件。
如果将点击事件直接放在组件内部，本身普通html元素就是可以响应的。
<div id = "app">
<my-component @click.native="say"></my-component>
</div>
Vue.component('my-component', {
template: "<button>按钮</button>",
})
new Vue({
el:"#app",
methods:{
say(){
alert("点了按钮");
}
}
})
文末
那天在看一个事件修饰符的面试题的时候，觉得恍惚，所以重新复习记录下，供后续学习。
可以