一.如果在内联语句中想要访问原生的DOM事件，可以使用特殊变量$event将其传入方法之中。
1.html代码
<button v-on:click="warn('form can not be submitted yet.',$event)">Submit</button>
2.js代码
methods:{warn:function(message,event){if(event)event.preventDefault()alert(message)}}
二.事件修饰符
1.v-on:click.stop="doThis"
作用：阻止点击事件继续传播,阻止事件冒泡
冒泡：当事情发生之后，因为事件源本身并没有处理事件的能力(处理事件的函数为绑定在事件源)，所以事件从外向里或者从里向外开始传播，直到到达了能够处理这个事件的代码之中。
防止冒泡事件的写法就是，在点击事件上加上.stop,这样子节点就不会捕获到父节点的触发事件。相当于event.preventDefault()
2.v-on:submit.prevent="onSubmit"
取消事件的预设行为，却不阻止事件的进一步传播，类似于event.preventDefault()
例子：form表单的提交 网页的超链接等等
3.v-on:click.self="dothis"
只有当event.target是当前元素自身才触发的函数只触发自己范围内的事件，不包含子元素
4.v-on:click.once
点击事件只会触发一次
5.v-on:click.capture="dothis"
事件使用捕获模式，内部元素的触发事件先处理，再交由内部元素处理
事件捕获：网景公司提出的事件流，我们称之为事件捕获流，事件捕获流的思想是不太具体的
DOM节点优先接受到事件，指向性明确的DMO节点最后接收到。太抽象了，看代码：
<div> <button><p>事件捕获顺序</p></button></div>
在点击事件被触发的时候，首先接受到的是<div></div>,如果此时<div></div>中有做事件处理，就会先处理,然后是<button></button>,最后才到<p></p>
来源：CSDN
作者：和你一起去世界尽头
链接：https://blog.csdn.net/nutaoyao/article/details/103897403