事件修饰符
官方说明：在事件处理程序中调用 `event.preventDefault()` 或 `event.stopPropagation()` 是非常常见的需求。
尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
1 .stop 阻止事件冒泡 相当于调用了event.stopPropagation()方法：
<button @click.stop ="stop">阻止事件冒泡</button>
2prevent 阻止默认行为，相当于调用了event.preventDefault()方法，比如表单的提交、a标签的跳转
<a @click.prevent="prevent" >阻止默认行为</a>
<from @submit.prevent="prevent">阻止默认行为</from>
3.self事件修饰符
只有元素本身触发时才触发方法，就是只有点击元素本身才会触发。比如一个div里面有个按钮，div和按钮都有事件，我们点击按钮，div绑定的方法也会触发，如果div的click加上self，只有点击到div的时候才会触发：
<div @click.self="self">点击元素本身才会触发</div>
4.once事件只会被触发一次
<button @click.once="once" >事件只会被触发一次</button>
5.native事件修饰符
给自定义组件添加@click，那么在我们点击这个组件的时候，这个回调是不会执行的，因为自定义组件内部并没有$emit这个cilck事件，对于内置的dom元素，例如：div、button...等，vue会自动绑定系统事件，但普通的自定义组件需要自己处理，这时我们就可以的 .native 就派上用场了，它会在在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签看待。
<My-child @click="a"></My-child> //不执行
<My-child @click.native="a"></My-child> //执行
v
