笔记大全

带你聊聊关于平时常用的 Vue 修饰符

更新时间：2023-11-06

简介

Vue.js 是一款绝佳的 JavaScript 框架，很多开发者选择 Vue 是因为它的易用性和灵活性。Vue 提供了一些基本的修饰符，用于操作和优化用户界面的交互。这些修饰符允许我们可以更加容易的处理各种输入事件。在这篇文章中，我们将学习 Vue 中一些常用的修饰符。

v-model 修饰符

v-model 是 Vue 中经常用到的指令之一，用于双向绑定数据。在表单元素的时候，会自动监听 input 或者 change 事件，来自动更新数据。v-model 还有两个常用的修饰符：

.lazy：它将 v-model 的更新推迟到 change 事件触发之后再进行。
.number：用于将输入值转为数字类型。

<template>
  <div>
    <input v-model.lazy="message">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

.prevent 修饰符

.prevent 修饰符用于取消默认行为，例如在表单中防止提交事件重载页面，实现前后端分离，提升用户体验。其用法与原生 DOM 一致，只需要在事件后加上 .prevent 即可。

<template>
  <form @submit.prevent="onSubmit">
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  methods: {
    onSubmit(event) {
      // 阻止默认提交表单行为
      event.preventDefault()
      // 发送请求
      // ...
    }
  }
}
</script>

.once 修饰符

.once 修饰符用于在事件触发后只执行一次事件处理程序，等同于给事件监听器添加了一次性事件绑定。

<template>
  <button @click.once="doSomething">Do Something</button>
</template>

<script>
export default {
  methods: {
    doSomething() {
      console.log('Do Something...')
    }
  }
}
</script>

.stop 修饰符

.stop 修饰符用于阻止事件传播，即停留在当前元素不再向上传播。其用法与原生 DOM 一致，只需要在事件后加上 .stop 即可。

<template>
  <div @click="outer">
    <div @click.stop="inner">Inner</div>
  </div>
</template>

<script>
export default {
  methods: {
    outer() {
      console.log('Outer...')
    },
    inner() {
      console.log('Inner...')
    }
  }
}
</script>

c语言编程笔录