关于javascript:关于Vue-vmodel你需要知道的一切

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

这在 Vue 开发中是一个简略的概念，然而 v -model 的真正威力须要一些工夫能力了解。

到本教程完结时，你将理解 v -model 的所有不同用例，并学习如何在本人的我的项目中应用它。

筹备好了吗?

我也是。让咱们编写代码。

什么是 v -model?

正如咱们方才探讨的，v-model 是一个咱们能够在模板代码中应用的指令。指令是一个模板令牌，它通知 Vue 咱们想要如何解决 DOM。

v-model 通知 Vue 咱们想要在模板中的值和数据属性中的值之间创立一个双向数据绑定。

应用 v -model 的一个常见用例是在设计 form 和 input 时。咱们能够应用它使 DOM input 元素可能批改 Vue 实例中的数据。

让咱们看一个在文本输出上应用 v -model 的简略示例。

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

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

当咱们在文本输出中输出时，咱们会看到咱们的 data 属性产生了变动。

v-model 和 v -bind 的区别?

v-bind 指令通常会与 v -model 切换。

两者的区别在于 v -model 提供了双向数据绑定。

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

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

当你在你的利用中创立一个清晰的单向数据流时，这是十分有用的。然而，在 v -model 和 v -bind 之间抉择时必须小心。

v-model 的修饰符

Vue 提供了两个修饰符，容许咱们更改 v -model 的性能。

每一个都能够像这样加起来，甚至能够连贯在一起。

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

.lazy

默认状况下，v-model 在每个输出事件上与 Vue 实例 (数据属性) 的状态同步。这包含失去，失去焦点等等。

lazy 修饰符批改了咱们的 v -model，所以它只在更改事件之后同步。

这缩小了 v -model 试图与 Vue 实例同步的次数——在某些状况下，还能够进步性能。

.number

通常，咱们的输出将主动将输出转为字符串—即便咱们将输出是数字。

确保将值作为数字解决的一种办法是应用. number 修饰符。

依据 Vue 文档，如果输出发生变化，并且 parseFloat()无奈解析新值，那么将返回输出的最初一个有效值。

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

.trim

与大多数编程语言中的 trim 办法相似，.trim 修饰符在返回值之前删除结尾或结尾的空白。

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

好了，当初咱们曾经理解了 form/input 外部的 v -model 的基本知识，让咱们看看 v -model 的一个乏味用法——在组件之间创立双向数据绑定。

在 Vue 中，数据绑定有两个次要步骤:

从父节点传递数据

从子组件收回事件以更新父组件

在自定义组件上应用 v -model 能够让咱们传递一个 prop，用一个指令来解决一个事件。

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

好吧，这到底是什么意思?

让咱们持续应用 v -model 表单的例子，并应用名为 CustomTextInput.vue 的自定义文本输出。

应用 v -model 传递的值的默认名称是 modelValue——咱们将在示例中应用这个名称。

然而，咱们能够像这样传递一个定制的模型名称。

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

留神: 当咱们应用自定义模型名称时，所收回办法的名称将被更新:name

上面是来自 Vue 文档的一张图来总结它。

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

咱们曾经设置好了父组件，所以让咱们从子组件拜访它。

在 CustomTextInput.vue 中，咱们必须做两件事:

• 承受咱们的 v -model 值作为 prop
• 当咱们的输出发生变化时，触发一个更新事件

好的——让咱们首先在脚本中申明它是 prop。

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

接下来，让咱们创立咱们的模板，将值设置为 modelValue prop，只有有输出事件，咱们就通过 update:modelValue 收回新值。

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

应用 v -model

好吧!

咱们曾经介绍了一个应用 v -model 在两个组件之间绑定数据的根本示例。

让咱们看一些应用 v -model 指令的更高级的办法。

对一个组件屡次应用 v -model

v-model 并不局限于每个组件只能应用一次。

要屡次应用 v -model，咱们只须要确保为每个 prop 惟一命名，并在子组件中正确拜访它。

让咱们在 lastName 中增加第二个 v -model。

在咱们的父组件中：

<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 的自定义修饰符

正如咱们所探讨的，Vue 中内置了一些修饰符。但总有一天，咱们会想要增加咱们本人的。

假如咱们想要创立一个修饰符来删除输出中的所有空格。咱们称之为无空格。

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

在咱们的输出组件中，咱们能够应用 prop 来捕捉修饰符。自定义修饰符的名称是 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)
}

论断

心愿你晓得了一些无关 v -model 的新常识。

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

欢送关注我的公众号，如果你有喜爱的外文技术文章，能够通过公众号留言举荐给我。