关于前端:关于-vmodel-你需要知道的这一切

作者：Michael Thiessen
译者：前端小智
起源：news

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

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

这是 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 中输出内容时，咱们会看到咱们的数据属性正在变动

![上传中 …]()

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

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

在咱们的例子中，这意味着如果咱们的数据扭转了，咱们的 input 也会扭转，如果咱们的 input 扭转了，咱们的数据也会扭转。

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

当咱们想在本人的利用中创立一个清晰的单向数据流时，这是十分有用的。然而，在 v-model 和v-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。

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

在自定义组件中应用 v-mode，须要做两件事：

1. 在 props 中接管 v-model 的值。
2. 当对应的值变动时，收回一个更新事件

ok，首先来申明一下：

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

接下来，将 modelValue 绑定到须要的元素，当值变动时，咱们就通过update:modelValue 收回新值。

这样就能够实现双向绑定了。

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 都能够失常工作：

自定义 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)
}

运行，完满：

总结

心愿本文能教给大家一些无关 Vue v-model 的新常识。

在它的根本用例 (如表单和 input 数据) 中，v-model是一个非常简单的概念。然而，当咱们创立自定义组件并解决更简单的数据时，咱们能够开释 v-model 的真正威力。

~ 完，我是刷碗智，我要去刷碗了，咱们下期见！

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://learnvue.co/2021/01/e…

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。