Vue学习笔记二

Vue学习笔记二

事件修饰符

统一的js代码

new Vue({
       
    el: "#app",    
    data: {
           
        msg: ""    },    
    methods: {
          
        div1Handler(){
             
            alert('div');       
            },        
        btnHandler(){
             
            alert('btn');        
            },        
        linkClick(){
             
            alert('jump');      
            }   
    }
  })

.stop事件

<div class="inner" @click="div1Handler">    
<!-- 使用.stop阻止冒泡事件 -->    
    <input type="button" value="戳他" @click.stop="btnHandler"/>
</div>

.prevent事件

<!-- 使用.prevent阻止默认行为 -->
<a href="https://www.baidu.com" @click.prevent="linkClick">百度</a>

.capture事件

<!-- 使用.capture实现捕获触发，从外到里 -->
<div class="inner" @click.capture="div1Handler">    
    <input type="button" value="戳他" @click="btnHandler"/>
</div>

.self事件

<!-- 使用.self只有点击自己的时候才触发事件，只会阻止自己冒泡行为的发生，不会阻止其他的冒泡行为 --><div class="inner" @click.self