Vue修饰符的总结归纳（Vue2和Vue3通用）

最新推荐文章于 2024-03-21 20:53:38 发布

小五Five

最新推荐文章于 2024-03-21 20:53:38 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_42373175/article/details/133379510

版权

vue 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

在Vue.js中，修饰符是一种简洁的语法糖，用于修改Vue指令的行为。这些修饰符可以让我们更简洁地处理一些常见场景，比如表单输入的延迟绑定、输入值的格式化等。了解和掌握Vue的修饰符，可以让我们在开发过程中更加高效和灵活。

一、v-model修饰符

v-model是Vue中的一个重要修饰符，用于实现双向数据绑定。除了基本的双向绑定功能，v-model还支持一些修饰符来改变其行为。

1. .lazy修饰符

.lazy修饰符用于实现输入框的延迟绑定。在默认情况下，当用户在输入框中输入时，Vue会立即更新数据。但使用.lazy修饰符后，只有当用户光标离开输入框后，Vue才会更新数据。

示例代码：

<template>  
  <input type="text" v-model.lazy="inputValue" placeholder="请输入内容">  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      inputValue: ''  
    }  
  }  
}  
</script>

在这个示例中，当用户在输入框中输入内容时，inputValue的值不会立即更新。只有当用户光标离开输入框后，inputValue才会更新到用户输入的值。

2 .number修饰符

.number修饰符用于将输入的值格式化为数字。当用户在输入框中输入数字时，Vue会自动将输入的值转换为Number类型。

示例代码：

<template>  
  <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会自动去除输入值的前后空格。

示例代码：

<template>  
  <input type="text" v-model.trim="inputValue" placeholder="请输入内容">  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      inputValue: ''  
    }  
  }  
}  
</script>

在这个示例中，当用户在输入框中输入内容时，Vue会自动去除输入值的前后空格，并将其赋值给inputValue。

二、事件修饰符

事件修饰符是Vue中用于改变事件处理器的行为的语法糖。通过使用事件修饰符，我们可以在不改变原有逻辑的情况下改变事件处理器的行为。

1. .stop修饰符

.stop修饰符用于阻止事件冒泡。当使用.stop修饰符时，事件处理器不会将事件冒泡到父元素，只会在当前元素上进行处理。

示例代码：

<template>  
  <div @click="handleParentClick">父元素<div @click.stop="handleChildClick">子元素</div></div>  
</template>  
  
<script>  
export default {  
  methods: {  
    handleParentClick() {  
      console.log('父元素被点击');  
    },  
    handleChildClick() {  
      console.log('子元素被点击');  
    }  
  }  
}  
</script>

在这个示例中，当子元素被点击时，只有handleChildClick会被调用，而handleParentClick不会被调用。这是因为.stop修饰符阻止了事件冒泡到父元素。

2. .prevent修饰符

.prevent修饰符用于阻止事件的默认行为。在默认情况下，某些事件（如提交表单、跳转页面等）会有默认行为。使用.prevent修饰符后，这些默认行为会被阻止。

示例代码：

<template>  
  <form @submit.prevent="handleSubmit">  
    <input type="text" v-model="formData" placeholder="Enter data...">  
    <button type="submit">Submit</button>  
  </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修饰符可以让事件处理器在捕获模式下触发，事件首先在父元素上触发，然后依次向下传递到目标元素。

示例代码：

<template>  
  <div @click="handleParentClick">父元素<div @click.capture="handleChildClick">子元素</div></div>  
</template>  
  
<script>  
export default {  
  methods: {  
    handleParentClick() {  
      console.log('父元素被点击');  
    },  
    handleChildClick() {  
      console.log('子元素被点击');  
    }  
  }  
}  
</script>

在这个示例中，当子元素被点击时，handleChildClick会被首先触发，然后才触发handleParentClick。这是因为.capture修饰符让事件处理器在捕获模式下触发，事件首先在父元素上触发，然后依次向下传递到目标元素。

4. .self修饰符

.self修饰符用于只在事件发生在目标元素自身时触发事件处理器。默认情况下，事件处理器会在事件发生在目标元素或其子元素时触发。使用.self修饰符可以让事件处理器只在事件发生在目标元素自身时触发。

示例代码：

<template>  
  <div @click.self="handleClick">点击我</div>  
</template>  
  
<script>  
export default {  
  methods: {  
    handleClick() {  
      console.log('只有当我自己被点击时才会触发');  
    }  
  }  
}  
</script>

在这个示例中，只有当div元素自身被点击时，handleClick才会被触发。这是因为.self修饰符限制了事件处理器的触发范围，只有当事件发生在目标元素自身时才会触发。

5. .once修饰符

.once修饰符用于让事件处理器只触发一次。默认情况下，事件处理器会持续触发直到被移除或再次绑定。使用.once修饰符可以让事件处理器只触发一次，在第一次触发后就会自动移除。

示例代码：

<template>  
  <button @click.once="handleClick">点击我</button>  
</template>  
  
<script>  
export default {  
  methods: {  
    handleClick() {  
      console.log('只会被点击一次');  
    }  
  }  
}  
</script>

在这个示例中，当按钮被点击时，handleClick只会被触发一次。在第一次触发后，事件处理器就会被移除，因此再次点击按钮时，handleClick不会被触发。这是因为.once修饰符限制了事件处理器的触发次数，只允许它被触发一次。

三、按键修饰符

Vue中的按键修饰符是Vue.js为按键事件提供的特殊语法，可以将特定的键盘事件绑定到相应的Vue方法上。

1. .enter修饰符

.enter修饰符用于当鼠标或键盘输入聚焦到元素上时触发事件处理器。在DOM更新后，当元素首次被添加到DOM中或者从DOM中被移除时，或者当聚焦状态更改时，该事件处理器会被触发。

示例代码：

<template>  
  <div @focus.enter="handleFocus">请聚焦我</div>  
</template>  
  
<script>  
export default {  
  methods: {  
    handleFocus() {  
      console.log('当元素被聚焦时触发');  
    }  
  }  
}  
</script>

在这个示例中，当用户将焦点移动到div元素上时，handleFocus方法会被调用。这是因为使用了.enter修饰符，使得当元素首次进入聚焦状态时触发事件处理器。

2. .tab修饰符

.tab修饰符用于在Tab键导航时触发事件处理器。在浏览器支持Tab键导航的情况下，可以使用该修饰符来处理Tab键的导航行为。

示例代码：

<template>  
  <div @tab="handleTab">Tab焦点</div>  
</template>  
  
<script>  
export default {  
  methods: {  
    handleTab() {  
      console.log('处理Tab键导航');  
    }  
  }  
}  
</script>

在这个示例中，当Tab键导航到div元素上时，handleTab方法会被调用。这是因为使用了.tab修饰符，使得在Tab键导航到元素时触发事件处理器。

3. .delete修饰符

.delete修饰符用于当元素从DOM中删除时触发事件处理器。在使用Vue的指令如v-if或v-show动态显示或隐藏元素时，该事件处理器会被触发。

示例代码：

<template>  
  <div v-if="show" @blur.delete="handleDelete">条件显示</div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      show: true  
    }  
  },  
  methods: {  
    handleDelete() {  
      console.log('元素从DOM中删除时触发');  
    }  
  }  
}  
</script>

在这个示例中，当div元素从DOM中删除时，handleDelete方法会被调用。这是因为使用了.delete修饰符，使得在元素删除时触发事件处理器。

4. .esc修饰符

.esc修饰符用于在按下Esc键时触发事件处理器。在浏览器中，按下Esc键会触发keyup.esc事件。

示例代码：

<template>  
  <div @keyup.esc="handleEsc">按下Esc键</div>  
</template>  
  
<script>  
export default {  
  methods: {  
    handleEsc() {  
      console.log('按下Esc键时触发');  
    }  
  }  
}  
</script>

在这个示例中，当用户在div元素上按下Esc键时，handleEsc方法会被调用。这是因为使用了.esc修饰符，使得在按下Esc键时触发事件处理器。

五、表单修饰符

1. .prevent修饰符

.prevent修饰符用于阻止浏览器的默认行为。在表单元素上，它主要用于阻止表单的自动提交。当使用如<button type="submit">Submit</button>这样的元素时，点击后表单会立即提交。使用.prevent修饰符可以阻止这种默认行为，以便在提交表单前执行额外的逻辑。

示例代码：

<template>  
  <form @submit.prevent="handleSubmit">  
    <input type="text" v-model="formData" placeholder="Enter data...">  
    <button type="submit">Submit</button>  
  </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修饰符可以延迟这个过程，只有在用户与表单控件发生交互时才进行渲染更新。

示例代码：

<template>  
  <form @submit="handleSubmit">  
    <input type="text" v-model.lazy="formData" placeholder="Enter data...">  
    <button type="submit">Submit</button>  
  </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修饰符的表单控件中输入文本时，文本会被自动转换为数字。

示例代码：

<template>  
  <form @submit="handleSubmit">  
    <input type="text" v-model.number="formData" placeholder="Enter number...">  
    <button type="submit">Submit</button>  
  </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修饰符用于在用户输入时自动移除字符串两端的空格。在表单控件上，它可以帮助用户避免不必要的空格输入。

示例代码：

<template>  
  <form @submit="handleSubmit">  
    <input type="text" v-model.trim="formData" placeholder="Enter text...">  
    <button type="submit">Submit</button>  
  </form>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      formData: ''  
    }  
  },  
  methods: {  
    handleSubmit(event) {  
      console.log('Form data:', this.formData) // 输出移除空格后的字符串  
    }  
  }  
}  
</script>

在这个示例中，使用.trim修饰符将自动移除输入框中的空格。无论用户在输入框中输入多少空格，最终的formData变量中只包含没有空格的字符串。这对于避免用户无意中输入多余的空格提供了一个方便的解决方案。

小五Five

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue修饰符的总结归纳（Vue2和Vue3通用）

在Vue.js中，修饰符是一种简洁的语法糖，用于修改Vue指令的行为。这些修饰符可以让我们更简洁地处理一些常见场景，比如表单输入的延迟绑定、输入值的格式化等。了解和掌握Vue的修饰符，可以让我们在开发过程中更加高效和灵活。
复制链接

扫一扫