vue中事件修饰符

vue中提供几种事件修饰：

1、.stop ：阻止冒泡

    
    
    
    Document
    
    
        .inner{
            height: 150px;
            background-color: darkcyan;
        }
        .outer{
            height: 200px;
            background-color: red;
        }
    



    

        
       

        
       
       
       
    


    var vm = new Vue({
        el:"#app",
        data:{},
        methods:{
            divHandler:function(){
                console.log("触发了 inner ")
            },
            btnHandler:function(){
                console.log("触发了btn")
            }
        }
    })

2、.prevent ：阻止默认行为

    
    
    
    Document
    
    
        .inner{
            height: 150px;
            background-color: darkcyan;
        }
        .outer{
            height: 200px;
            background-color: red;
        }
    



    

         
       有问题,先去百度
    


    var vm = new Vue({
        el:"#app",
        data:{},
        methods:{
            linkClick:function(){
                console.log("触发了 link")
            },
        }
    })

3、.capture ：实现捕获触发机制

    
    
    
    Document
    
    
        .inner{
            height: 150px;
            background-color: darkcyan;
        }
        .outer{
            height: 200px;
            background-color: red;
        }
    



    

        
       

        
       
    


    var vm = new Vue({
        el:"#app",
        data:{},
        methods:{
            divHandler:function(){
                console.log("触发了 inner ")
            },
            btnHandler:function(){
                console.log("触发了btn")
            },
        }
    })

4、.self ：只有点击自身时才触发事件

    
    
    
    Document
    
    
        .inner{
            height: 150px;
            background-color: darkcyan;
        }
        .outer{
            height: 200px;
            background-color: red;
        }
    



    

       
       

        
       
    


    var vm = new Vue({
        el:"#app",
        data:{},
        methods:{
            divHandler:function(){
                console.log("触发了 inner ")
            },
            btnHandler:function(){
                console.log("触发了btn")
            },
        }
    })

5、once ：事件只执行一次

    
    
    
    Document
    
    
        .inner{
            height: 150px;
            background-color: darkcyan;
        }
        .outer{
            height: 200px;
            background-color: red;
        }
    



    

        
        有问题,先去百度
    


    var vm = new Vue({
        el:"#app",
        data:{},
        methods:{
            linkClick:function(){
                console.log("触发了 link")
            },
        }
    })

我们发现.stop与.self的作用似乎相似,那么他们两有什么区别吗？ 答案当然是有(自问自答 - -！)

请各位大佬向下滑动鼠标

    
    
    
    Document
    
    
        .inner {
            height: 150px;
            background-color: darkcyan;
        }

        .outer {
            height: 200px;
            background-color: red;
        }
    



    

        
        

            

                
                
            
        

        

            

                
                 
            
        
    


    var vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            divHandler: function () {
                console.log("触发了 inner ")
            },
            div2Handler: function () {
                console.log('触发了 outer')
            },
            btnHandler: function () {
                console.log("触发了btn")
            },
        }
    })

如有不正确或者不完善的，恳请各位大佬批评指正,在此感谢！