vue事件修饰符

<template>
  <div class="about">
    <!-- v-model修饰符 -->
    <!--.lazy 在默认情况下，输入框的值与数据同步，添加.lazy事件只有光标离开input框才会更新数据  -->
    <input type="text" name="" id="" v-model.lazy="value1" />
    <p>{{ value1 }}</p>
    <!-- .trim 过滤首尾空格 -->
    <input type="text" name="" id="" v-model.trim="value2" />
    <p>{{ value2 }}</p>
    <!-- .number 将用户输入的类型转为数值类型，可以输入字符串但是value3不会获取字符串 -->
    <input type="text" name="" id="" v-model.number="value3" />
    <p>{{ value3 }}</p>
    <!-- 事件修饰符 -->
    <!-- .stop阻止事件冒泡 -->
    <button @click.stop="onTest1">阻止事件冒泡</button>
    <!-- .prevent 阻止默认行为，比如表单的提交、a标签的跳转 -->
    <a @click.prevent="onTest2" href="www.baidu.com">阻止默认事件</a>
    <!-- .self 变相的阻止冒泡事件 -->
    <button @click.self="onTest3">变相阻止冒泡事件</button>
    <!-- .once 只执行一次事件-->
    <button @click.self="onTest4">变相阻止冒泡事件</button>
    <!-- .capture 事件的完整机制是捕获-目标-冒泡，事件触发是目标往外冒泡-->
    <!-- .sync 对prop进行双向绑定-->
    <!-- .keyCode监听按键的指令-->
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    let value1 = ref("");
    let value2 = ref("");
    let value3 = ref(0);
    const onTest1 = () => {
      window.console.log("阻止事件冒泡");
    };
    const onTest2 = () => {
      window.console.log("阻止默认事件");
    };
    const onTest3 = () => {
      window.console.log("变相的阻止冒泡事件");
    };
    const onTest4 = () => {
      window.console.log("只执行一次事件");
    };
    return {
      value1,
      value2,
      value3,
      onTest1,
      onTest2,
      onTest3,
      onTest4,
    };
  },
});
</script>