vue中的修饰符

1.prevent:阻止默认事件(常用)

2.stop:阻止事件冒泡(常用)

3.once:事件只触发一次(常用)

4.capture:使用事件的捕获模式

5.self:只有event.target是当前操作的元素时才触发事件

6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕

  <div>
    <h2>欢迎{{name}}同学前来浏览</h2>

    <!-- prevent 阻止默认事件(常用) -->
    <a href="https://www.bilibili.com" @click.prevent="showInfo">点我提示信息</a>

    <!-- 阻止事件冒泡(常用) -->
    <div class="demo1" @click="showInfo">
      <button @click.stop="showInfo">点我提示信息</button>
    </div>

    <!-- once 事件只触发一次(常用) -->
    <button @click.once="showInfo">点我提示信息</button>

    <!-- 使用事件的捕获模式 -->
    <div class="box1" @click="showMsg(1)">
      div1
      <div class="box2" @click="showMsg(2)">
        div2
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      name:'张飞'
    }
  },
  // 配置项
  methods:{
    showInfo(e){
      // 如果使用箭头函数实例对象会变成window
      alert('你好你好')
      // console.log(this)//此处的this是vue的实例对象
    },
    showMsg(msg){
      console.log(msg)
    }

  }

}
</script>

<style>
*{
  margin-top: 20px;
}
.demo1{
  height:50px;
  background-color: skyblue;
}
.box1{
  padding: 5px;
  background-color: skyblue;
}
.box2{
  padding: 5px;
  background-color: orange;
}
</style>