一.Vue的事件处理

1. 使用@xxx或者v:on:xxx来绑定事件，其中xxx是事件名。
2. 事件的回调函数必须写在methods上，并且不要用箭头函数，否则this指向不是Vue实例。
3. methods中配置的函数，都是被Vue管理的函数，this指向都是Vue

<button @click="showInfo">点我提示信息</button> //常用
//或者
<button v:on:click="showInfo">点我提示信息</button>

二.Vue的事件修饰符

Vue中的事件修饰符

1. prevent 阻止默认事件
2. stop 阻止事件冒泡
3. once 事件只触发一次
4. capture 阻止事件捕获
5. self 只有event.targer是当前操作的元素才触发
6. passive 事件的默认行为立即执行，无需等待事件回调执行完毕

//阻止默认事件(只会触发showInfo函数，并不会跳转到www.baid.com)
<a href="www.baidu.com" @click.prevent="showInfo">点我提示信息</a>

//阻止事件冒泡(点击div2只会触发当前的事件，并不会冒泡触发div1的事件)
<div @click="show">
   div1
   <div @click.stop="show">div2</div>
</div>

//事件只触发一次(只会触发一次点击事件，后续继续点击也不会再触发)
<div @click.once="show">div2</div>

//阻止事件捕获(点击div2先触发div1的事件，再触发div2的事件)
<div @click.capture="show">
   div1
   <div @click="show">div2</div>
</div>

//只有event.targer是当前操作的元素才触发(只有点击自身才会触发，通过冒泡也不会触发事件)
<div @click.self="show">
   div1
   <div @click="show">div2</div>
</div>

//事件的默认行为立即执行，无需等待事件回调执行完毕(不需要等待函数内容执行完，直接触发事件本来的效果)
<div @whell.passive="show">
   <div >div2</div>
   <div >div3</div>
   <div >div4</div>
   <div >div5</div>
</div>

未完待续。。。