-
Vue修饰符的总结归纳（Vue2和Vue3通用）
目录
在Vue.js中，修饰符是一种简洁的语法糖，用于修改Vue指令的行为。这些修饰符可以让我们更简洁地处理一些常见场景，比如表单输入的延迟绑定、输入值的格式化等。了解和掌握Vue的修饰符，可以让我们在开发过程中更加高效和灵活。
一、v-model修饰符
v-model是Vue中的一个重要修饰符，用于实现双向数据绑定。除了基本的双向绑定功能，v-model还支持一些修饰符来改变其行为。
1. .lazy修饰符
.lazy修饰符用于实现输入框的延迟绑定。在默认情况下，当用户在输入框中输入时，Vue会立即更新数据。但使用.lazy修饰符后，只有当用户光标离开输入框后，Vue才会更新数据。
示例代码：
- <input type="text" v-model.lazy="inputValue" placeholder="请输入内容">
- template>
- <script>
- export default {
- data() {
- return {
- inputValue: ''
- }
- }
- }
- script>
在这个示例中，当用户在输入框中输入内容时，inputValue的值不会立即更新。只有当用户光标离开输入框后，inputValue才会更新到用户输入的值。
2 .number修饰符
.number修饰符用于将输入的值格式化为数字。当用户在输入框中输入数字时，Vue会自动将输入的值转换为Number类型。
示例代码：
- <input type="text" v-model.number="inputValue" placeholder="请输入数字">
- template>
- <script>
- export default {
- data() {
- return {
- inputValue: ''
- }
- }
- }
- script>
在这个示例中，当用户在输入框中输入数字时，Vue会自动将输入的值转换为Number类型，并将其赋值给inputValue。如果用户输入的不是数字，那么Vue会将其转换为NaN。
3 .trim修饰符
.trim修饰符用于去除输入值的空格。当用户在输入框中输入内容时，Vue会自动去除输入值的前后空格。
示例代码：
- <input type="text" v-model.trim="inputValue" placeholder="请输入内容">
- template>
- <script>
- export default {
- data() {
- return {
- inputValue: ''
- }
- }
- }
- script>
在这个示例中，当用户在输入框中输入内容时，Vue会自动去除输入值的前后空格，并将其赋值给inputValue。
二、事件修饰符
事件修饰符是Vue中用于改变事件处理器的行为的语法糖。通过使用事件修饰符，我们可以在不改变原有逻辑的情况下改变事件处理器的行为。
1. .stop修饰符
.stop修饰符用于阻止事件冒泡。当使用.stop修饰符时，事件处理器不会将事件冒泡到父元素，只会在当前元素上进行处理。
示例代码：
- <div @click="handleParentClick">父元素<div @click.stop="handleChildClick">子元素div>div>
- <script>
- export default {
- methods: {
- handleParentClick() {
- console.log('父元素被点击');
- },
- handleChildClick() {
- console.log('子元素被点击');
- }
- }
- }
- script>
在这个示例中，当子元素被点击时，只有handleChildClick会被调用，而handleParentClick不会被调用。这是因为.stop修饰符阻止了事件冒泡到父元素。
2. .prevent修饰符
.prevent修饰符用于阻止事件的默认行为。在默认情况下，某些事件（如提交表单、跳转页面等）会有默认行为。使用.prevent修饰符后，这些默认行为会被阻止。
示例代码：
- <form @submit.prevent="handleSubmit">
- <input type="text" v-model="formData" placeholder="Enter data...">
- <button type="submit">Submitbutton>
- form>
- template>
- <script>
- export default {
- data() {
- return {
- formData: ''
- }
- },
- methods: {
- handleSubmit(event) {
- // 在此处处理表单数据，例如发送到服务器
- console.log('Form data:', this.formData)
- }
- }
- }
- script>
在这个示例中，当用户点击提交按钮并触发
submit事件时，Vue将调用handleSubmit方法。由于使用了.prevent修饰符，浏览器的默认提交行为（通常会导致页面刷新）被阻止了。这样，你可以在事件处理器中处理表单数据（例如，通过AJAX发送到服务器），而不会导致页面刷新。3. .capture修饰符
.capture修饰符用于在捕获模式下触发事件处理器。默认情况下，事件处理器在冒泡模式下触发，也就是说事件首先在目标元素上触发，然后依次冒泡到父元素。使用.capture修饰符可以让事件处理器在捕获模式下触发，事件首先在父元素上触发，然后依次向下传递到目标元素。
示例代码：
- <div @click="handleParentClick">父元素<div @click.capture="handleChildClick">子元素div>div>
- <script>
- export default {
- methods: {
- handleParentClick() {
- console.log('父元素被点击');
- },
- handleChildClick() {
- console.log('子元素被点击');
- }
- }
- }
- script>
在这个示例中，当子元素被点击时，handleChildClick会被首先触发，然后才触发handleParentClick。这是因为.capture修饰符让事件处理器在捕获模式下触发，事件首先在父元素上触发，然后依次向下传递到目标元素。
4. .self修饰符
.self修饰符用于只在事件发生在目标元素自身时触发事件处理器。默认情况下，事件处理器会在事件发生在目标元素或其子元素时触发。使用.self修饰符可以让事件处理器只在事件发生在目标元素自身时触发。
示例代码：
- <div @click.self="handleClick">点击我div>
- <script>
- export default {
- methods: {
- handleClick() {
- console.log('只有当我自己被点击时才会触发');
- }
- }
- }
- script>
在这个示例中，只有当div元素自身被点击时，handleClick才会被触发。这是因为.self修饰符限制了事件处理器的触发范围，只有当事件发生在目标元素自身时才会触发。
5. .once修饰符
.once修饰符用于让事件处理器只触发一次。默认情况下，事件处理器会持续触发直到被移除或再次绑定。使用.once修饰符可以让事件处理器只触发一次，在第一次触发后就会自动移除。
示例代码：
- <button @click.once="handleClick">点击我button>
- <script>
- export default {
- methods: {
- handleClick() {
- console.log('只会被点击一次');
- }
- }
- }
- script>
在这个示例中，当按钮被点击时，handleClick只会被触发一次。在第一次触发后，事件处理器就会被移除，因此再次点击按钮时，handleClick不会被触发。这是因为.once修饰符限制了事件处理器的触发次数，只允许它被触发一次。
三、按键修饰符
Vue中的按键修饰符是Vue.js为按键事件提供的特殊语法，可以将特定的键盘事件绑定到相应的Vue方法上。
1. .enter修饰符
.enter修饰符用于当鼠标或键盘输入聚焦到元素上时触发事件处理器。在DOM更新后，当元素首次被添加到DOM中或者从DOM中被移除时，或者当聚焦状态更改时，该事件处理器会被触发。示例代码：
- <div @focus.enter="handleFocus">请聚焦我div>
- <script>
- export default {
- methods: {
- handleFocus() {
- console.log('当元素被聚焦时触发');
- }
- }
- }
- script>
在这个示例中，当用户将焦点移动到div元素上时，handleFocus方法会被调用。这是因为使用了.enter修饰符，使得当元素首次进入聚焦状态时触发事件处理器。
2. .tab修饰符
.tab修饰符用于在Tab键导航时触发事件处理器。在浏览器支持Tab键导航的情况下，可以使用该修饰符来处理Tab键的导航行为。示例代码：
- <div @tab="handleTab">Tab焦点div>
- <script>
- export default {
- methods: {
- handleTab() {
- console.log('处理Tab键导航');
- }
- }
- }
- script>
在这个示例中，当Tab键导航到div元素上时，handleTab方法会被调用。这是因为使用了.tab修饰符，使得在Tab键导航到元素时触发事件处理器。
3. .delete修饰符
.delete修饰符用于当元素从DOM中删除时触发事件处理器。在使用Vue的指令如v-if或v-show动态显示或隐藏元素时，该事件处理器会被触发。示例代码：
- <div v-if="show" @blur.delete="handleDelete">条件显示div>
- <script>
- export default {
- data() {
- return {
- show: true
- }
- },
- methods: {
- handleDelete() {
- console.log('元素从DOM中删除时触发');
- }
- }
- }
- script>
在这个示例中，当div元素从DOM中删除时，handleDelete方法会被调用。这是因为使用了.delete修饰符，使得在元素删除时触发事件处理器。
4. .esc修饰符
.esc修饰符用于在按下Esc键时触发事件处理器。在浏览器中，按下Esc键会触发keyup.esc事件。示例代码：
- <div @keyup.esc="handleEsc">按下Esc键div>
- <script>
- export default {
- methods: {
- handleEsc() {
- console.log('按下Esc键时触发');
- }
- }
- }
- script>
在这个示例中，当用户在div元素上按下Esc键时，handleEsc方法会被调用。这是因为使用了.esc修饰符，使得在按下Esc键时触发事件处理器。
五、表单修饰符
1. .prevent修饰符
.prevent修饰符用于阻止浏览器的默认行为。在表单元素上，它主要用于阻止表单的自动提交。当使用如这样的元素时，点击后表单会立即提交。使用.prevent修饰符可以阻止这种默认行为，以便在提交表单前执行额外的逻辑。示例代码：
- <form @submit.prevent="handleSubmit">
- <input type="text" v-model="formData" placeholder="Enter data...">
- <button type="submit">Submitbutton>
- form>
- template>
- <script>
- export default {
- data() {
- return {
- formData: ''
- }
- },
- methods: {
- handleSubmit(event) {
- // 阻止表单默认提交行为
- event.preventDefault()
- console.log('Form data:', this.formData)
- }
- }
- }
- script>
在这个示例中，使用
.prevent修饰符阻止了表单的默认提交行为。当用户在输入框中输入文本并点击提交按钮时，handleSubmit方法会被调用，然后在控制台输出表单数据。注意，我们还需要在方法内调用event.preventDefault()来阻止默认行为，因为.prevent修饰符只阻止事件处理程序，不会阻止默认行为。2. .lazy修饰符
.lazy修饰符用于延迟初始化表单控件的绑定。在默认情况下，当表单控件的绑定发生改变时，Vue会立即更新并触发一个重新渲染。使用.lazy修饰符可以延迟这个过程，只有在用户与表单控件发生交互时才进行渲染更新。示例代码：
- <form @submit="handleSubmit">
- <input type="text" v-model.lazy="formData" placeholder="Enter data...">
- <button type="submit">Submitbutton>
- form>
- template>
- <script>
- export default {
- data() {
- return {
- formData: ''
- }
- },
- methods: {
- handleSubmit(event) {
- console.log('Form data:', this.formData)
- }
- }
- }
- script>
在这个示例中，使用
.lazy修饰符延迟了输入框的数据绑定。当用户在输入框中输入文本并提交表单时，handleSubmit方法会被调用，然后在控制台输出表单数据。注意，只有在用户与输入框发生交互（例如，输入文本或失去焦点）时，输入框的值才会被更新到formData变量中。这种修饰符对于减少不必要的重新渲染非常有用，特别是对于那些输入框的值不会立即改变的情况。3. .number修饰符
.number修饰符用于将输入的值转换为数字类型。当用户在绑定了.number修饰符的表单控件中输入文本时，文本会被自动转换为数字。示例代码：
- <form @submit="handleSubmit">
- <input type="text" v-model.number="formData" placeholder="Enter number...">
- <button type="submit">Submitbutton>
- form>
- template>
- <script>
- export default {
- data() {
- return {
- formData: ''
- }
- },
- methods: {
- handleSubmit(event) {
- console.log('Form data:', Number(this.formData)) // 输出数字类型
- }
- }
- }
- script>
在这个示例中，使用
.number修饰符将输入框的值转换为数字类型。当用户在输入框中输入文本并提交表单时，handleSubmit方法会被调用，然后在控制台输出转换后的数字值。注意，即使输入的是非数字文本，使用.number修饰符也可以确保formData变量中的值被转换为数字。4. .trim修饰符
.trim修饰符用于在用户输入时自动移除字符串两端的空格。在表单控件上，它可以帮助用户避免不必要的空格输入。示例代码：
- <form @submit="handleSubmit">
- <input type="text" v-model.trim="formData" placeholder="Enter text...">
- <button type="submit">Submitbutton>
- form>
- template>
- <script>
- export default {
- data() {
- return {
- formData: ''
- }
- },
- methods: {
- handleSubmit(event) {
- console.log('Form data:', this.formData) // 输出移除空格后的字符串
- }
- }
- }
- script>
在这个示例中，使用
.trim修饰符将自动移除输入框中的空格。无论用户在输入框中输入多少空格，最终的formData变量中只包含没有空格的字符串。这对于避免用户无意中输入多余的空格提供了一个方便的解决方案。 -
相关阅读:
自动编码器
从零学习 InfiniBand-network架构（七） ——IB协议中数据如何传输
Flutter循序渐进==＞与基金mysql数据库交互
JavaWeb开发之Servlet&Request&Response
【Android笔记31】Android中数据存储之SQLite数据库（Cursor、execSQL、rawQuery）
使用Feign远程调用快速入门
【数据结构与算法】stack栈的介绍和实现、使用栈来实现中缀表达式求值
VS中cmake多配置构建设置
[计算机网络实验]头歌 实验二 以太网帧、IP报文分析（含部分分析）
RocketMQ源码阅读（十二）Consumer-消息拉取
- 原文地址：https://blog.csdn.net/weixin_42373175/article/details/133379510
