vue指令之事件修饰符及v-on的使用

1,vue中用v-on绑定事件，用click事件举例：
v-on:click="outershow" 简写为：@click="outershow"

<div id="app">
 <div class="outer" @click="outershow">
       <div class="inner" @click="innershow">
            <input type="button" class="sinput" value="事件修饰符学习" @click="inputshow">
       </div>
 </div>  
 <a href="https://www.baidu.com" @click.prevent.once="ashow">有问题，先百度</a>
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{},
        methods:{
            outershow(){
                console.log("这个是outer的点击事件")
            },
            innershow(){
                console.log("这个是inner的点击事件")
            },
            inputshow(){
                console.log("这个是input的点击事件")
            },
            ashow(){
                console.log("这个是a链接的点击事件")
            }
        }
    })
    </script>          

2，事件修饰符
（1）,使用 .stop 阻止当前元素及子元素的事件冒泡

<div class="outer" @click="outershow">
    <div class="inner" @click="innershow">
         <input type="button" class="sinput" value="事件修饰符学习" @click.stop="inputshow">
    </div>
</div>

（2）,使用.prevent阻止元素的默认事件，比如a链接的默认跳转

<a href="https://www.baidu.com" @click.prevent="ashow">有问题，先百度</a>

（3），使用.capture 实现从外向内捕获触发事件的机制

 <div class="outer" @click.capture="outershow">
      <div class="inner" @click="innershow">
           <input type="button" class="sinput" value="事件修饰符学习" @click="inputshow">
      </div>
 </div>  

.capture作用于哪个父元素，执行子元素事件，从该父元素开始依次向内执行触发类型事件，如果该父元素外面还有父元素及触发类型事件，外面的父元素会执行冒泡事件
（4），使用.self 实现点击当前元素时，才会触发事件处理机制

 <div class="outer" @click="outershow">
      <div class="inner" @click.self="innershow">
           <input type="button" class="sinput" value="事件修饰符学习" @click="inputshow">
      </div>
 </div>  

（5），使用.once只触发一次

<a href="https://www.baidu.com" @click.prevent.once="ashow">有问题，先百度</a>