<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>
