系列文章目录
TypeScript 从入门到进阶专栏
文章目录
- 系列文章目录
- 前言
- 一、事件修饰符(Event Modifiers)
- 1、.stop(阻止事件冒泡)
- 2、.prevent(阻止事件的默认行为)
- 3、.capture(使用事件捕获模式)
- 4、.self(只当事件在该元素本身(而不是子元素)触发时触发回调函数)
- 5、.once(只触发一次回调函数)
- 二、按键修饰符(Key Modifiers
- 1、.enter(按下回车键时触发)
- 2、.tab(按下tab键时触发)
- 3、.delete(按下删除或退格键时触发)
- 4、.esc(按下ESC键时触发)
- 5、.space(按下空格键时触发)
- 6、.up(按下上箭头键时触发)
- 7、.down(按下下箭头键时触发)
- 8、.left(按下左箭头键时触发)
- 9、.right(按下右箭头键时触发)
- 表单输入修饰符(Form Input Modifiers)
- 1、.lazy(用于将输入事件延迟到change事件之后触发)
- 2、.number(自动将输入值转为数字类型)
- 3、.trim(自动去除输入值两端的空白字符)
- 鼠标修饰符(Mouse Modifiers)
- 1、.left(只在鼠标左键点击时触发)
- 2、.right(只在鼠标右键点击时触发)
- 3、.middle(只在鼠标中键点击时触发)
- 3、.passive(指定事件监听器为被动模式,可以提升滚动性能)
前言
本文是为了系统性的了解vue3中的修饰符,方便开发时的使用,使用修饰符可以方便地对事件进行控制和处理,提升用户体验。
一、事件修饰符(Event Modifiers)
1、.stop(阻止事件冒泡)
修饰符
.stop
是用于阻止事件冒泡的。当一个具有.stop
修饰符的事件监听器被触发时,该事件将不再向上冒泡到父元素。这意味着如果一个父元素和子元素都有相同类型的事件监听器,并且点击了子元素,那么只会触发子元素的事件监听器,父元素的事件监听器将被忽略。
例如,以下代码中的点击事件只会触发handleClick
方法,而不会触发父元素的事件监听器。
<template>
<div @click="handleClick">
<button @click.stop="handleClick">Click me</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('Button clicked');
},
},
};
</script>
2、.prevent(阻止事件的默认行为)
.prevent是一个修饰符,用于事件处理函数中,阻止事件的默认行为。当事件触发时,浏览器会执行默认的操作,例如提交表单、打开链接等。而使用.prevent修饰符可以阻止这些默认的行为。
使用.prevent修饰符的方式是在事件处理函数的名称后面加上.prevent,例如:
<button @click.prevent="submitForm">提交表单</button>
在上述的代码中,当按钮被点击时,submitForm函数会被调用,同时会阻止表单的默认提交行为。
3、.capture(使用事件捕获模式)
.capture
是一个事件修饰符,用于监听一个元素的捕获阶段事件。
事件捕获是浏览器在事件传播过程中的第一个阶段,它从顶层元素向下传播到目标元素。而事件冒泡是事件传播的第二个阶段,它从目标元素向上冒泡到顶层元素。
使用.capture
修饰符可以让一个元素在事件捕获阶段监听某个事件,而不是在事件冒泡阶段。
例如,我们有一个父组件和一个子组件,父组件上有一个div
元素和一个子组件的插槽:
<template>
<div @click.capture="handleClick">
<slot></slot>
</div>
</template>
在父组件中,我们使用了.capture
修饰符来监听div
元素的点击事件。这意味着当我们在子组件中点击父组件的插槽时,事件会在父组件的div
元素上触发,先触发父组件的事件处理函数,然后再触发子组件的事件处理函数。
<template>
<parent-component>
<child-component @click="handleChildClick"></child-component>
</parent-component>
</template>
在子组件中,我们也有一个点击事件处理函数handleChildClick
,它会在子组件的div
元素上触发。但是因为我们使用了.capture
修饰符,所以父组件的点击事件处理函数handleClick
会在子组件的事件处理函数之前触发。
.capture
修饰符在某些特定的场景下非常有用,可以帮助我们更好地控制事件的触发顺序和处理逻辑。
4、.self(只当事件在该元素本身(而不是子元素)触发时触发回调函数)
修饰符
.self
用于限制事件只能在触发事件的元素本身上触发,而不是在子元素上触发。这意味着只有当事件直接在绑定事件的元素上触发时,才会执行事件处理函数。
例如,我们有一个父元素和一个子元素,父元素绑定了一个点击事件,子元素是父元素的一个子元素。使用 .self
修饰符可以确保点击子元素时不会触发父元素的点击事件,只有当点击父元素本身时才会触发。
<template>
<div @click.self="handleClick">
<div>
Click Me
</div>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log("Clicked on the element itself");
}
}
}
</script>
在上面的代码中,只有当点击 “Click Me” 文本所在的 div 元素时,才会触发 handleClick 方法并打印出信息。如果点击子元素 div,则不会触发点击事件。
5、.once(只触发一次回调函数)
修饰符
.once
用于绑定一个只能触发一次的事件监听器。
例如:
<template>
<button @click.once="onClick">Click me</button>
</template>
<script>
export default {
methods: {
onClick() {
console.log('Button clicked');
}
}
}
</script>
在上面的例子中,当按钮被点击时,onClick
方法只会执行一次,之后再点击按钮将不再触发该方法。这就是.once
修饰符的作用。
二、按键修饰符(Key Modifiers
1、.enter(按下回车键时触发)
.enter 是指在事件处理中,只有在按下回车键时才触发事件。
使用 .enter 修饰符可以方便地处理键盘事件,当用户在输入框中按下回车键时,可以触发特定的操作。
例如,在一个表单中,用户在输入框中输入完内容后按下回车键,可以提交表单数据。
使用 .enter 修饰符的语法如下:
<input v-on:keyup.enter="submitForm">
上述代码中,v-on:keyup.enter 表示当用户在输入框中按下回车键时,会触发 submitForm 方法。
除了可以在 v-on 指令中使用 .enter 修饰符外,还可以在 v-model 指令中使用,例如:
<input v-model.lazy.enter="message">
上述代码中,v-model.lazy.enter 表示当用户在输入框中输入内容并按下回车键时,会将输入的内容绑定到 message 变量中。
2、.tab(按下tab键时触发)
使用
.tab
修饰符可以让 Vue 组件在用户按下 Tab键时触发相应的事件处理函数。这在处理键盘导航或者表单中的焦点切换时非常有用。
以下是一个示例,演示了如何使用 .tab
修饰符监听 Tab 键事件:
<template>
<div>
<input ref="input1" v-on:keydown.tab="onTab">
<input ref="input2" v-on:keydown.tab="onTab">
</div>
</template>
<script>
export default {
methods: {
onTab(event) {
if (event.target === this.$refs.input1) {
// 当按下 Tab 键时,焦点从 input1 切换到 input2
this.$refs.input2.focus();
} else if (event.target === this.$refs.input2) {
// 当按下 Tab 键时,焦点从 input2 切换到 input1
this.$refs.input1.focus();
}
}
}
}
</script>
在上述示例中,我们给两个 input 元素绑定了相同的 v-on:keydown.tab
指令,并在事件处理函数中根据当前的焦点位置切换焦点到另一个 input 元素上。当用户按下 Tab 键时,Vue 会自动调用对应的事件处理函数。
通过使用 .tab
修饰符,我们可以更方便地处理键盘导航和焦点切换,从而提升用户体验。
3、.delete(按下删除或退格键时触发)
.delete
修饰符监听删除或退格键的按下事件。.delete
修饰符是针对键盘事件的修饰符之一。
下面是一个示例,演示了如何在Vue 3中使用.delete
修饰符来触发事件:
<template>
<div @keydown.delete="deleteItem">Delete an item</div>
</template>
<script>
export default {
methods: {
deleteItem() {
// 在这里执行删除逻辑
console.log('Delete key pressed');
}
}
}
</script>
在这个示例中,我们在<div>
元素上使用了@keydown.delete
事件监听器,它会在按下删除或退格键时触发deleteItem
方法。在deleteItem
方法中,你可以执行你想要的删除操作。
请注意,.delete
修饰符适用于Vue 3中的其他键盘事件修饰符,例如.enter
、.tab
等。
4、.esc(按下ESC键时触发)
.esc
按键修饰符来监听Esc键的按下事件。
例如,在模板中,可以将@keydown.esc
绑定到一个方法上,当用户按下Esc键时,该方法会被调用。
<template>
<div>
<input type="text" @keydown.esc="handleEscKey" />
</div>
</template>
<script>
export default {
methods: {
handleEscKey() {
// 处理Esc键按下事件的逻辑
}
}
}
</script>
在上面的例子中,当用户在<input>
输入框中按下Esc键时,会调用handleEscKey
方法来处理按键事件。你可以在该方法中添加你想执行的逻辑。
5、.space(按下空格键时触发)
.space
是一个按键修饰符,用于检测空格键的按下事件。可以用于监听按钮的按下事件,并在特定场景下执行相应的操作。
以下是使用.space
按键修饰符的示例:
<template>
<div>
<button @keydown.space="handleSpace">按下空格键</button>
</div>
</template>
<script>
export default {
methods: {
handleSpace() {
console.log('空格键被按下了');
}
}
}
</script>
在上面的示例中,当用户按下空格键时,handleSpace
方法会被调用,并在控制台中打印出"空格键被按下了"的消息。
请注意,.space
只能检测到按下空格键的事件,如果需要检测空格键的释放事件,可以使用.space.up
。
6、.up(按下上箭头键时触发)
使用
.up
按键修饰符来捕获上方向键的按下事件。这可以用于处理上方向键的按下事件,例如在下拉菜单中选择上一个选项。
你可以在Vue模板中的事件处理器中使用.up
按键修饰符,如下所示:
<template>
<div @keydown.up="handleUpArrow"></div>
</template>
在上面的例子中,handleUpArrow
函数将在按下上方向键时触发。
7、.down(按下下箭头键时触发)
.down修饰符用于指定在按下键时触发事件的条件。
例如,将按键修饰符.down应用于v-on指令,表示只有在同时按下键盘上的Down箭头键时才触发事件。
<template>
<div>
<input type="text" v-on:keydown.down="handleKeyDown" />
</div>
</template>
<script>
export default {
methods: {
handleKeyDown(event) {
console.log("Down Arrow Key Pressed");
},
},
};
</script>
在上述示例中,当按下键盘上的Down箭头键时,handleKeyDown方法将被调用,并在控制台中打印"Down Arrow Key Pressed"。
8、.left(按下左箭头键时触发)
按键修饰符可以用于监听特定的键盘事件。左箭头键的修饰符是
.left
。
使用方式如下:
<template>
<div @keydown.left="handleLeftKey"></div>
</template>
<script>
export default {
methods: {
handleLeftKey(event) {
// 处理左箭头键的逻辑
}
}
}
</script>
在上面的示例中,我们在<div>
元素上使用了@keydown.left
事件监听器,当用户按下左箭头键时,会触发handleLeftKey
方法。你可以在handleLeftKey
方法中编写适当的逻辑来处理左箭头键事件。
9、.right(按下右箭头键时触发)
按键修饰符用于监听按键事件并进行相应的操作。使用
.right
按键修饰符可以监听右箭头键的按下事件。
以下是一个示例:
<template>
<div @keydown.right="handleKeyDown">
Press the right arrow key
</div>
</template>
<script>
export default {
methods: {
handleKeyDown(event) {
if (event.code === 'ArrowRight') {
// 在这里执行相应的操作
}
}
}
}
</script>
在上面的示例中,当右箭头键被按下时,handleKeyDown
方法会被调用,并且只有当按下的键是右箭头键时,才会执行相应的操作。
表单输入修饰符(Form Input Modifiers)
1、.lazy(用于将输入事件延迟到change事件之后触发)
表单输入修饰符.lazy用于将输入事件延迟到change事件之后触发,而不是在每次输入时触发。这可以减少不必要的输入事件触发次数,提升性能。
使用.lazy
修饰符的示例:
<input v-model.lazy="message" />
在上述示例中,v-model.lazy
绑定了message
数据,并且在每次输入时不会立即更新message
的值,而是在change
事件触发时更新。这意味着用户需要离开输入框或者按下回车键才会触发数据的更新。
.lazy
修饰符适用于一些场景,例如在输入框内容较多或者输入频率较高时,可以减少不必要的输入事件触发,提高性能。但是需要注意的是,由于输入事件延迟触发,可能会导致输入框的值与数据绑定的值存在一定的延迟。
在Vue 2中使用.lazy
修饰符时,是通过v-model.lazy
来实现的,而在Vue 3中,v-model
已经内置了.lazy
修饰符,所以只需要使用v-model
即可。
2、.number(自动将输入值转为数字类型)
.number
修饰符来将表单输入的值转换为数字类型。
使用.number
修饰符的方式如下所示:
<input v-model.number="myNumber" type="text">
在上述示例中,通过v-model.number
指令绑定一个数据属性myNumber
来实现双向绑定。当用户在输入框中输入一个字符串时,Vue会自动将其转换为数字类型,并将结果保存在myNumber
属性中。
需要注意的是,如果用户输入的值无法转换为数字类型,Vue会将其视为无效的输入。
3、.trim(自动去除输入值两端的空白字符)
.trim
修饰符来去除表单输入框中的前导和尾随空格。这个修饰符可以与v-model
指令一起使用,以确保用户输入的值不包含空格。
例如,假设我们有一个输入框,我们需要去除前导和尾随空格。我们可以通过在v-model
后面加上.trim
修饰符来实现:
<template>
<input v-model.trim="text" type="text" placeholder="请输入文本" />
</template>
<script>
export default {
data() {
return {
text: '',
};
},
};
</script>
现在,无论用户在输入框中输入的值是否包含空格,text
的值都将自动去除前导和尾随空格。
请注意,.trim
修饰符只能应用于v-model
指令,它不适用于其他指令或绑定。
鼠标修饰符(Mouse Modifiers)
1、.left(只在鼠标左键点击时触发)
.left
是一个鼠标修饰符,用于监听鼠标左键的点击事件。
例如,以下代码中的@click.left
会在鼠标左键点击时触发事件处理函数:
<template>
<button @click.left="handleClick">点击我</button>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('鼠标左键点击');
}
}
}
</script>
当用户点击按钮时,会在控制台输出"鼠标左键点击"。这是因为.left
修饰符限定了只有在鼠标左键点击时才触发事件处理函数。
2、.right(只在鼠标右键点击时触发)
在Vue 3中,你可以使用.right
鼠标修饰符来指定只有右键点击事件才会触发相应的事件处理程序。这个修饰符可以用于v-on
指令中。
例如,你可以这样使用它:
<button v-on:click.right="handleRightClick">右键点击</button>
在上面的示例中,只有右键点击按钮时,才会触发handleRightClick
方法。
3、.middle(只在鼠标中键点击时触发)
鼠标修饰符是指在特定的事件处理函数中,使用不同的鼠标按键触发事件。对于中键按钮,可以使用
.middle
修饰符。
例如,当你需要在鼠标中键点击时触发一个事件处理函数,你可以这样写:
<button @click.middle="handleMiddleClick">中键点击</button>
在上面的例子中,当用户在按钮上点击中键时,handleMiddleClick
函数将被调用。
3、.passive(指定事件监听器为被动模式,可以提升滚动性能)
鼠标修饰符中的
passive
修饰符用于改善页面的滚动性能。传统上,当一个滚动事件被触发时,浏览器将等待所有的事件处理程序完成后再执行滚动操作。但是,使用passive
修饰符可以告诉浏览器,事件处理程序不会调用preventDefault()
来阻止滚动行为,从而使得浏览器可以在滚动操作即将发生时立即进行滚动处理,提高滚动的流畅度和响应性能。
使用passive
修饰符非常简单,只需在事件监听的时候添加passive
修饰符即可。例如:
<template>
<div @scroll.passive="handleScroll">Scrollable content</div>
</template>
<script>
export default {
methods: {
handleScroll() {
// 处理滚动事件的代码
}
}
}
</script>
在上述示例中,当div
元素发生滚动事件时,会调用handleScroll
方法。并且使用了passive
修饰符,告诉浏览器该事件处理程序不会阻止滚动行为。
总而言之,passive
修饰符可以帮助优化滚动性能,特别是在处理滚动事件时,使用passive
修饰符可以提高滚动的流畅度和响应性能。