常用的事件修饰符

一、事件修饰符
1、.prevent(默认的行为阻止了)

 <a href="http://www.atguigu.com" @click.prevent="showInfo">点我阻止默认事件</a>

2、.stop（冒泡）

 <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我阻止冒泡</button>
        </div>

3、.capture（使用事件捕获模式）

 <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>

4、self(只有event.target是当前操作的元素才触发事件)

<div class="wrapper-box"   @click="wrapperClick">
     <!-- .self只关注自身事件，冒泡将会被忽略  -->
   <div class="father-box" @click.self="fatherClick">
     <div class="son-box" @click="sonClick"></div>
   </div>
</div>

5、.once(只触发一次)

<div class="wrapper-box"   @click.once="wrapperClick">
   <div class="father-box" @click="fatherClick">
      <div class="son-box" @click="sonClick"></div>
   </div>
 </div>

6、.trim（过滤空格）

<script setup>
    import { ref } from "vue";
     const count = ref(0);
     const showCount = function(){
        console.log(count.value)
     }
</script>
 <input v-model="count">
 <br/>
 <button @click="showCount">打印count</button>

7、.number（输入字符串转为数字）

<input v-model.number="count">
  <br/>
  <span>count的类型{{typeof count}}</span>

8、.native（监听组件根元素的原生事件）
9、passive（事件的默认行为立即执行，无需等待事件回调执行完毕）