vue事件对象

<button @click="getEventDom(e);">getEventDom</button>  
<script>  
    var vue = new Vue({  
        el: "#app",  
        methods: {  
            getEventDom: function(e) {  
                event.preventDefault();  
                console.log(e);  
            }  
        }  
    });  
</script> 

事件修饰符

.stop
.prevent
.capture
.self
.once
.passive

1、事件冒泡（事件不会向上传递） 按上例中原生事件对象，要组织冒泡事件需要用到.preventDefault()，然而使用事件修饰符，仅需@click.stop即可。

<div @click="say">
parent
<div @click.stop="say">child</div>//阻止冒泡
</div>

2、阻止默认事件（不触发默认事件）

<a href="http://www.baidu.com" @click.prevent="say">百度</a>//阻止默认行为

3、指定元素触发（不包括子元素）

<a @click.stop.self.prevent="say" href="http://www.baidu.com" style="border: 10px s
olid red">
  <span>2</span>
  <span>1</span>
</a>

4、事件捕获方式（父->子）

<div @click='say'>parent
<div @click='say1'>
    child
</div>
</div>

5、绑定事件一次（触发后移除事件）

<div @click.once='say'>say</div>

6、.capture事件默认是双向的，先捕获，在冒泡

(二).注意：

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

（三).vue2.3 新增

Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。这个 .passive 修饰符尤其能够提升移动端的性能。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

注意：

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

原文链接：https://blog.csdn.net/gao_xu_520/article/details/80363260

使用情况

【注意】 普通组件绑定事件不能添加.native, 添加后事件失效

当父组件调用自定义组件时，直接在自定义组件中使用原生事件，原生事件后就需要加上.native。
还有一个方法，就是自定义组件$emit一个事件给父组件

<div id="app">
    <child @click.native="handleClick"></child>
</div>

// 子组件
 Vue.component('child',{
           template: '<button><div>miya</div></button>', 
       })

const app = new Vue({
    el: '#app',
	methods: {
        handleClick: function() {
            alert("click")
        }
    }
})

当使用库组件中的form，提交submit也需要加.native

组件
<div>
	<lost name="body"></slot>
	<input type="submit" @click="handleOk"></input>
</div>
<--! .prevent 阻止默认提交事件 --->

调用组件
<my-model>
	<Form slot="body" v-model="formDate" @submit.native.prevent>
		<FormItem>...</FormItem>
	</Form>
</my-model>

比如element，这个时候使用按键修饰符需要加上.native， 不然无效

<el-input v-model="account" placeholder="请输入账号" @keyup.enter.native="search">
</el-input>

// 使用原生事件名只有加上.native才会其效果, 比如 mousedown, mouseenter, mouseleave等
// 常用键盘事件名
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right

• stop
  阻止事件冒泡
  给事件名称添加.stop事件修饰符后可以阻止事件冒泡，即仅会触发当前元素的事件，不会触发其父元素的相同事件
  
• prevent
  阻止默认事件

<!-- 阻止默认事件 -->
<a href="https://www.baidu.com" @click.prevent="aClick()">跳转到百度</a>

• capture
  添加事件时使用捕获模式，即由外到内进行事件触发
  应用场景较少
• self
  当事件在该元素本身触发使才触发回掉
• once
  只触发一次回调