vue事件修饰符

 
 

  
  <!-- 阻止单击事件冒泡 -->
 
 
 
 

  
  <a v-on:click.stop="doThis">
  
  </a>
 
 
 
 

  
  

 
 
 
 

 
 

  
  <!-- 提交事件不再重载页面 -->
 
 
 
 

  
  <form v-on:submit.prevent="onSubmit">
  
  </form>
 
 
 
 

  
  

 
 
 
 

  
  <!-- 修饰符可以串联  -->
 
 
 
 

  
  <a v-on:click.stop.prevent="doThat">
  
  </a>
 
 
 
 

  
  

 
 
 
 

 
 

  
  <!-- 只有修饰符 -->
 
 
 
 

  
  <form v-on:submit.prevent>
  
  </form>
 
 
 
 

  
  

 
 
 
 

 
 

  
  <!-- 添加事件侦听器时使用事件捕获模式 -->
 
 
 
 

  
  <div v-on:click.capture="doThis">...
  
  </div>
 
 
 
 


 
 
 
 

  
  <!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
 
 
 
 

  
  <div v-on:click.self="doThat">...
  
  </div>
 
 
 
 

  
  

 
 
 
 

  
  

 
 
 
 

  
  使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击。

 
 
 
 

  
  

 
 
 
 

  
  
  
  
   
   

    
    <!-- 点击事件将只会触发一次 -->
   
   
   
   

    
    <a v-on:click.once="doThis">
    
    </a>