关于 v-model 你需要知道的这一切!

159 篇文章 14 订阅
15 篇文章 2 订阅

作者:Michael Thiessen
译者:前端小智
来源:news

点赞再看,微信搜索**【大迁世界,B站关注前端小智】**这个没有大厂背景,但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。

image.png

Vue v-model是一个指令,它提供了inputform之间或两个组件之间的双向数据绑定。

这是Vue开发中的一个简单概念,但v-model的真正威力需要花些时间才能理解。

本文主要讲解v-model的不同用例,并学习如何在自己的项目中使用它。

v-model 是什么?

刚才讲过,``v-model`是一个我们可以在模板代码中使用的指令。指令是一个模板令牌,它告诉 Vue 我们想要如何处理 DOM。

v-model的情况下,它告诉Vue我们想要在template 中的值和data属性中的值之间创建一个双向数据绑定。

使用v-model的一个常见用例是在设计表单相关的一些元素时。我们可以使用它使input元素能够修改Vue实例中的数据。

<template>
  <div>
    <input 
      type='text'
      v-model='value'
    />
    <p> Value: {{ value }} </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 'Hello World'  
    }
  }
}
</script>

当我们在input中输入内容时,我们会看到我们的数据属性正在变化

1111.gif

v-model 和 v-bind 之间的区别?

v-bind指令通常会与v-model切换。两者的区别在于v-model提供了双向数据绑定。

在我们的例子中,这意味着如果我们的数据改变了,我们的input也会改变,如果我们的input改变了,我们的数据也会改变。

v-bind 只以一种方式绑定数据。

当我们想在自己的应用中创建一个清晰的单向数据流时,这是非常有用的。但是,在v-modelv-bind之间选择时必须小心。

v-model 的修饰符

Vue 提供了两个修饰符,允许我们更改v-model的功能。每一个都可以像这样加起来,甚至可以连接在一起。

<input 
  type='text'
  v-model.trim.lazy='value'
/>
.lazy

默认情况下,v-model在每个input事件上与Vue实例的状态(数据属性)同步。 这包括获得/失去焦点等。

.lazy修改器修改了我们的v-model,所以它只在更改事件之后同步。这减少了v-model试图与Vue实例同步的次数,在某些情况下,还可以提高性能。

.number

通常,即使输入的是数字类型,input也会自动将输入的值变为字符串。确保将我们的值作为数字处理的一种方法是使用.number修饰符。

根据Vue文档,如果input发生变化,并且parseFloat()无法解析新值,那么将返回输入的最后一个有效值。

<input 
  type='number'
  v-model.number='value'
/>
.trim

与大多数编程语言中的trim方法类似,.trim修饰符在返回值之前删除开头或结尾的空白。

在自定义组件中使用 v-model

在Vue中,数据绑定有两个主要步骤:

  1. 从父节点传递数据
  2. 从子实例发出事件以更新父实例

在自定义组件上使用v-model可以让我们传递一个 prop,用一个指令来处理一个事件。

<custom-text-input v-model="value" />

<!-- IS THE SAME AS -->

<custom-text-input 
   :modelValue="value"
   @update:modelValue="value = $event"
/>
这到底是什么意思?

使用v-model传递的值的默认名称是modelValue。但是,我们也可以像这样传递一个自定义名称。

<custom-text-input v-model:name="value" />

注意:当我们使用自定义模型名称时,发出的方法的名称将为update:name

image.png

在自定义组件中使用 v-model

在自定义组件中使用 v-mode ,需要做两件事:

  1. 在 props 中接收 v-model 的值。
  2. 当对应的值变化时,发出一个更新事件

ok,首先来声明一下:

export default {
  props: {
    modelValue: String,
  }
}

接下来,将 modelValue 绑定到需要的元素,当值变化时,我们就通过update:modelValue 发出新值。

这样就可以实现双向绑定了。

2222.gif

v-model 的使用技巧

上面介绍了如果在自定义组件中使用 v-model,现在来看看一些v-model指令更高级的用法。

对一个组件多次使用v-model

v-model并不局限于每个组件只能使用一个。要多次使用v-model,我们只需要确保唯一命名,并在子组件中正确访问它。

为下面的组件添加第二个 v-model,这里先命名为 lastName:

<template>
  <div>
    <custom-text-input 
      v-model='value' 
      v-model:lastName='lastName'
    />
    <p> Value: {{ value }} </p>
    <p> Last Name: {{ lastName }} </p>
  </div>
</template>

<script>
import CustomTextInput from './CustomTextInput.vue'

export default {
  components: {
    CustomTextInput,
  },
  data() {
    return {
      value: 'Matt',
      lastName: 'Maribojoc'
    }
  }
}
</script>

然后,我们内部的子组件:

<template>
  <div>
    <label> First Name </label>
    <input 
      type='text'
      :value='modelValue'
      placeholder='Input'
      @input='$emit("update:modelValue", $event.target.value)'
    />
    <label> Last Name </label>
    <input 
      type='text'
      :value='lastName'
      placeholder='Input'
      @input='$emit("update:lastName", $event.target.value)'
    />
  </div>
</template>

<script>
export default {
  props: {
    lastName: String,
    modelValue: String,
  }
}
</script>

运行后,可以看到两个 v-model 都可以正常工作:

3333.gif

自定义 v-model 的修饰符

Vue中内置了一些修饰符,但这些远远不够,所以有时我们需要自定义自己的修饰符。

假设我们要创建一个修饰符,以删除输入的文本中的所有空格。 我们称之为no-whitespace

<custom-text-input 
  v-model.no-whitespace='value' 
  v-model:lastName='lastName'
/>

在组件内,我们可以使用 props 来捕获修改器。自定义修饰符的名称是nameModifiers

props: {
  lastName: String,
  modelValue: String,
  modelModifiers: {
    default: () => ({})
  }
},

我们要做的第一件事是改变@input处理器来使用一个自定义方法。我们可以称它为emitValue,它接受正在编辑的属性和事件对象的名称。

<label> First Name </label>
<input 
      type='text'
      :value='modelValue'
      placeholder='Input'
      @input='emitValue("modelValue", $event)'
/>

emitValue方法中,在调用$emit之前,我们要检查修饰符。如果no-whitespace修饰符为true,则可以在将其发送给父对象之前修改该值。

emitValue(propName, evt) {
  let val = evt.target.value
  if (this.modelModifiers['no-whitespace']) {
    val = val.replace(/\s/g, '')
  }
  this.$emit(`update:${propName}`, val)
}

运行,完美:

4444.gif

总结

希望本文能教给大家一些有关Vue v-model的新知识。

在它的基本用例(如表单和input数据)中,v-model是一个非常简单的概念。然而,当我们创建自定义组件并处理更复杂的数据时,我们可以释放v-model的真正威力。

~完,我是刷碗智,我要去刷碗了,我们下期见!


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://learnvue.co/2021/01/everything-you-need-to-know-about-vue-v-model/

交流

文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@大迁世界

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值