作者：MichaelThiessen译者：前端小智来源：新闻有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。Vuev-model是一个指令，它提供输入和表单之间或两个组件之间的双向数据绑定。这是Vue开发中的一个简单概念，但v-model的真正威力需要一些时间才能理解。本文重点讲解v-model的不同用例，并学习如何在自己的项目中使用它。什么是v模型？正如我之前所说，`v-model是一个我们可以在模板代码中使用的指令。指令是一个模板标记，它告诉Vue我们要如何处理DOM。对于v-model，它告诉Vue我们要在模板中的值和数据属性中的值之间创建双向数据绑定。使用v-model的一个常见用例是在设计一些与表单相关的元素时。我们可以使用它来使输入元素能够修改Vue实例中的数据。当我们在输入中输入内容时，我们会看到我们的数据属性正在发生变化！[正在上传...]()v-model和v-bind的区别？v-bind指令通常与v-model切换。两者的区别在于v-model提供了双向数据绑定。在我们的例子中，这意味着如果我们的数据发生变化，我们的输入也会发生变化，如果我们的输入发生变化，我们的数据也会发生变化。而v-bind仅以一种方式绑定数据。当我们想在我们的应用程序中创建一个清晰的单向数据流时，这很有用。但是，在v-model和v-bind之间进行选择时必须小心。v-model的修饰符Vue提供了两个修饰符，允许我们更改v-model的功能。每一个都可以这样加起来，甚至连在一起。.lazy默认情况下，v-model在每个输入事件上与Vue实例的状态（数据属性）同步。这包括获得/失去焦点等。.lazy修饰符修改了我们的v-model，因此它仅在change事件之后同步。这减少了v-model尝试与Vue实例同步的次数，并在某些情况下提高了性能。.nu??mber一般情况下，即使输入的是数字类型，input也会自动将输入的值转换成字符串。确保我们的值被视为数字的一种方法是使用.number修饰符。根据Vue文档，如果输入发生变化，并且parseFloat()无法解析新值，那么将返回输入的最后一个有效值。.trim与大多数编程语言中的trim方法类似，.trim修饰符在返回值之前删除前导或尾随空格。在自定义组件中使用v-model在Vue中，数据绑定有两个主要步骤：从父节点传递数据从子实例发出事件以更新父实例在自定义组件上使用v-model允许我们传递一个prop，使用一个处理事件的指令。这到底是什么意思？使用v-model传递的值的默认名称是modelValue。但是，我们也可以像这样传递自定义名称。注意：当我们使用自定义模型名称时，发出的方法名称将是update:name。在自定义组件中使用v-model要在自定义组件中使用v-mode，需要做两件事：在props中接收v-model的值。当相应的值发生变化时，发送一个update事件ok，首先声明：exportdefault{props:{modelValue:String,}}接下来，将modelValue绑定到需要的元素上，当值发生变化时，我们通过update:modelValueemitsthenewvalue.这会启用双向绑定。v-model的使用技巧上面介绍了如何在自定义组件中使用v-model，下面我们来看看v-model指令的一些更高级的用法。对一个组件v-model多次使用v-model并不局限于每个组件一次。要多次使用v-model，我们只需要确保其命名唯一并在子组件中正确访问它即可。为以下组件添加第二个v-model，命名为lastName:Value:{{value}}
LastName:{{lastName}}
<脚本＆gt;exportdefault{props:{lastName:String,modelValue:String,}}运行后可以看到两个v-models都可以正常工作：自定义的v-model修饰符是Vue内置的一些修饰符，但是这些还远远不够，所以有时候我们需要自定义自己的修饰符假设我们想创建一个修饰符来去除输入文本中的所有空格。我们称之为no-whitespace:在组件内部，我们可以使用props来捕获修饰符。自定义修饰符的名称是nameModifiersprops:{lastName:String,modelValue:String,modelModifiers:{default:()=>({})}}，我们要做的第一件事是更改@input处理程序以使用自定义方法。我们可以将其称为emitValue，它接受正在编辑的属性的名称和事件对象。在emitValue方法中，调用Before$emit，我们检查修饰符。如果no-whitespace修饰符为真，则可以在将值发送给父级之前对其进行修改。emitValue(propName,evt){letval=evt.target.valueif(this.modelModifiers['no-whitespace']){val=val.replace(/\s/g,'')}this.$emit(`update:${propName}`,val)}运行，完美：希望这篇文章能教给大家一些关于Vuev-model的新知识。在其基本用例（例如表单和输入数据）中，v-model是一个非常简单的概念。然而，当我们创建自定义组件并处理更复杂的数据时，我们可以释放v-model的真正力量。~最后，我是知婉知，我去洗碗了，下次见！代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://learnvue.co/2021/01/e...交流有梦想，有干货，微信搜索【大千世界】关注这位大清早还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。
