vue事件-修饰符 / stop / prevent / once

3.5_vue指令-v-on修饰符

目的: 在事件后面.修饰符名 - 给事件带来更强大的功能

• 语法:
  • @事件名.修饰符=“methods里函数”
    • .stop - 阻止事件冒泡
    • .prevent - 阻止默认行为
    • .once - 程序运行期间, 只触发一次事件处理函数

<template>
  <div>
      <!-- 无传参，通过形参直接接收 -->
<a @click="oneFn" href="http://www.baidu.com">不要跳转百度</a>
<hr>
<!-- $event 是固定写法，既需要传递实参，又需要传递事件对象的时候使用 -->
<a @click="twoFn(10,$event)" href="http://www.baidu.com">不要跳转百度222</a>
<hr>

<!-- @事件名.修饰符="methods里的函数" -->
<!-- .stop  -  阻止事件冒泡 -->
<!-- .prevent  -  阻止默认行为 -->
<!-- .once  -  程序运行期间，只触发一次事件处理函数 -->
<a @click.prevent="" href="http://www.baidu.com">不要跳转百度33333</a>
<hr>


<button @click.once="btnFn">点击抽奖</button>
<hr>


<div @click="fatherFn"> 父元素
    <button @click.stop="sonFn">子元素</button>
</div>


  </div>
</template>

<script>    
export default {
// 函数 / 方法放 methods 中
        methods:{
            oneFn(e){
                // 通过事件对象阻止默认行为
                e.preventDefault()
            },
            twoFn(number,e){
                e.preventDefault()
                console.log(number);
                console.log(e);
            },
            btnFn(){
                alert("恭喜您抽取中五元玛莎拉蒂代金券")
            },
            fatherFn(){
                console.log('老子腿给你打断')
            },
            sonFn(){
                console.log('小子去泡妞')
            }
        }   
}
</script>

<style>

</style>