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。
欢送关注我的公众号，如果你有喜爱的外文技术文章，能够通过公众号留言举荐给我。