在vue中, 我们所用的修饰符其实就是一种语法糖,比如说表单判断为空、输入的是否为数字number类型,用这些修饰符可加快我们的开发效率
一、v-model修饰符
v-model 就是其中的一个重要的修饰符,利用 MVVM实现双向绑定;
1、.lazy修饰符
lazy是懒惰的意思,用这个修饰符可以实现输入框的延迟绑定,平时默认的情况下,vue会马上更新,如果我们添加了.lazy修饰符后,只有鼠标光标离开输入框之后,vue才会更新
demo
<template>
<input type="text" v-model.lazy="name" placeholder="请输入昵称">
</template>
<script>
export default {
data() {
return {
name: ''
}
}
}
</script>
2、.number修饰符
number是数字的意思,加上 .number 修饰符的意思是 把我们输入的值格式化为数字,用户输入数字的时候,vue会自动把输入的值转换为number类型;加入输的不是数字类型,vue会把他转换为 NaN
demo
<template>
<input type="text" v-model.number="number" placeholder="请输入数字">
</template>
<script>
export default {
data() {
return {
number: ''
}
}
}
</script>
3、.trim修饰符
trim是减少的意思;是用来去除输入值的空格,如果我们在输入框输入一个空内容的时候,加上这个修饰符,vue会自动输出前后的空格
demo
<template>
<input type="text" v-model.trim="center" placeholder="请输入内容">
</template>
<script>
export default {
data() {
return {
center: ''
}
}
}
</script>
二、表单修饰符
1、.prevent修饰符
prevent 是阻止、阻碍的意思;.prevent修饰符是用来阻止默认行为的,一般用在表单上,阻止表单的默认自动提交;eg: <button type="primary" >登录</button>,这样的按钮,点击表单会立即提交,使用.prevent修饰符可以阻止这种默认行为;
demo
这个demo中,使用.prevent修饰符阻止了表单的默认提交行为。如果用户在输入框中输入文本并点击提交按钮时,login方法会被调用,然后在控制台打印表单数据。我们还需要在方法内调用event.preventDefault()来阻止默认行为,因为.prevent修饰符只阻止事件处理程序,不会阻止默认行为。
<template>
<form @submit.prevent="login">
<input type="text" v-model="formList" placeholder="Enter data...">
<button type="submit">Submit</button>
</form>
</template>
<script>
export default {
data() {
return {
formList: ''
}
},
methods: {
login(event) {
// 阻止表单默认提交行为
event.preventDefault()
console.log('Form data:', this.formList)
}
}
}
</script>
2、.lazy修饰符
lazy是懒的意思;.lazy
修饰符在默认情况下,当表单控件的绑定发生改变时,Vue会立即更新并触发一个重新渲染。使用.lazy
修饰符可以延迟这个过程,只有在用户与表单控件发生交互时才进行渲染更新。
demo
.lazy修饰符延迟了输入框的数据绑定。当用户在输入框中输入文本并提交表单时,login方法会被调用,然后在控制台打印表单数据。
<template>
<form @submit="login">
<input type="text" v-model.lazy="formList" placeholder="Enter data...">
<button type="submit">Submit</button>
</form>
</template>
<script>
export default {
data() {
return {
formList: ''
}
},
methods: {
login(event) {
console.log('Form data:', this.formList)
}
}
}
</script>
3、.number修饰符
number是数字的意思;.number
修饰符用于将输入的值转换为数字类型。当用户在绑定了.number
修饰符的表单控件中输入文本时,文本会被自动转换为数字。
demo
<template>
<form @submit="login">
<input type="text" v-model.number="formList" placeholder="Enter number...">
<button type="submit">Submit</button>
</form>
</template>
<script>
export default {
data() {
return {
formList: ''
}
},
methods: {
login(event) {
console.log('Form data:', Number(this.formList)) // 输出数字类型
}
}
}
</script>
4、.trim修饰符
.trim
修饰符是在用户输入时自动移除字符串两端的空格,在form表单控件上,它可以帮助用户避免不必要的空格输入。
demo
.trim
修饰符将自动移除输入框中的空格。用户在输入框中输入多少空格,最终的formList
变量中只包含没有空格的字符串。
<template>
<form @submit="login">
<input type="text" v-model.trim="formList" placeholder="Enter text...">
<button type="submit">Submit</button>
</form>
</template>
<script>
export default {
data() {
return {
formList: ''
}
},
methods: {
login(event) {
console.log('111111:', this.formList) // 输出移除空格后的字符串
}
}
}
</script>
三、事件修饰符
1、.stop修饰符
stop是停止的意思 ;.stop修饰符用于阻止事件冒泡。使用.stop修饰符时,事件处理器不会将事件冒泡到父元素,只会在当前元素上进行处理。
demo
<template>
<div @click="Parent">父元素<div @click.stop="Child">子元素</div></div>
</template>
<script>
export default {
methods: {
Parent() {
console.log('点击Parent');
},
Child() {
console.log('点击Child');
}
}
}
</script>
2、.prevent修饰符
prevent也是阻止默认事件;.prevent修饰符用于阻止事件的默认行为。在默认情况下,某些事件(如提交表单、跳转页面等)会有默认行为,使用.prevent修饰符后,这些默认行为会被阻止。
demo
<template>
<form @submit.prevent="Submit">
<input type="text" v-model="formList" placeholder="Enter data...">
<button type="submit">Submit</button>
</form>
</template>
<script>
export default {
data() {
return {
formList: ''
}
},
methods: {
Submit(event) {
// 表单数据,
console.log('Form data:', this.formList)
}
}
}
</script>
3、.once修饰符
once是一次的意思;.once修饰符用于让事件处理器只触发一次。默认情况下,事件处理器会持续触发直到被移除或再次绑定。使用.once修饰符可以让事件处理器只触发一次,在第一次触发后就会自动移除。
demo
<template>
<button @click.once="login">55555</button>
</template>
<script>
export default {
methods: {
login() {
console.log('点击一次');
}
}
}
</script>
4、.capture修饰符
capture是捕获、夺取的意思;.capture修饰符用于在捕获模式下触发事件处理器。默认情况下,事件处理器在冒泡模式下触发,也就是说事件首先在目标元素上触发,然后依次冒泡到父元素。使用.capture修饰符可以让事件处理器在捕获模式下触发,事件首先在父元素上触发,然后依次向下传递到目标元素。
demo
<template>
<div @click="Parent">父元素<div @click.capture="Child">子元素</div></div>
</template>
<script>
export default {
methods: {
Parent() {
console.log('父元素被点击');
},
Child() {
console.log('子元素被点击');
}
}
}
</script>
5、.self修饰符
self 是自己本人的意思;.self修饰符用于只在事件发生在目标元素自身时触发事件处理器。默认情况下,事件处理器会在事件发生在目标元素或其子元素时触发。使用.self修饰符可以让事件处理器只在事件发生在目标元素自身时触发。
demo
<template>
<div @click.self="login">5555</div>
</template>
<script>
export default {
methods: {
login() {
console.log('我自己被点击时才会触发');
}
}
}
</script>
四、按键修饰符
1、.enter修饰符
enter 是进入、报名、登记;.enter
修饰符用于当鼠标或键盘输入聚焦到元素上时触发事件处理器。在DOM更新后,当元素首次被添加到DOM中或者从DOM中被移除时,或者当聚焦状态更改时,该事件处理器会被触发。
demo
<template>
<div @focus.enter="Focus">请聚焦我</div>
</template>
<script>
export default {
methods: {
Focus() {
console.log('当元素被聚焦时触发');
}
}
}
</script>
2、.delete修饰符
delete 是删除的意思; .delete
修饰符用于当元素从DOM中删除时触发事件处理器。在使用Vue的指令如v-if
或v-show
动态显示或隐藏元素时,该事件处理器会被触发。
demo
<template>
<div v-if="show" @blur.delete="Delete">条件显示</div>
</template>
<script>
export default {
data() {
return {
show: true
}
},
methods: {
Delete() {
console.log('元素从DOM中删除时触发');
}
}
}
</script>
3、.tab修饰符
tab 是制表格、空格的意思;.tab
修饰符用于在Tab键导航时触发事件处理器。在浏览器支持Tab键导航的情况下,可以使用该修饰符来处理Tab键的导航行为。
demo
<template>
<div @tab="Tab">Tab</div>
</template>
<script>
export default {
methods: {
Tab() {
console.log('点击Tab键');
}
}
}
</script>
4、.esc修饰符
esc 退出;.esc
修饰符用于在按下Esc键时触发事件处理器。在浏览器中,按下Esc键会触发keyup.esc
事件。
demo
<template>
<div @keyup.esc="Esc">点击Esc键</div>
</template>
<script>
export default {
methods: {
Esc() {
console.log('点击Esc键');
}
}
}
</script>