vue事件修饰符

修饰符概述

• .prevent阻止默认事件；
• .stop阻止冒泡；
• .capture添加事件侦听器时使用事件捕获模式；
• .self只当事件在该元素本身(比如不是子元素)触发时触发回调；
• .once事件只触发一次

.prevent阻止默认事件；

• 有一个a标签。里面有一个网址，当点击时给一个提示信息，点击确定后会默认跳转到网页；
  • 现在的需求是，阻止这个网页的跳转
  • 就是点击事件时给一个阻止默认事件.prevent;

  <a href="http:www.baidu.com" @click="showInfo">点我提示信息</a>
  ------------
  mettgods;{
     showInfo(){
     alert('同学你好。')
    }
  }
  

  方法一：一般点击事件是触发event事件，给这个事件加一个preventDefault。

  shoeInfo(e){
  e.preventDefault()
  alert('同学你好。')
  }
  

  方法二：但是在vue里面，直接在click后面加阻止；

   <a href="http:www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
  

  • 这个.prevent就是事件修饰符。