作者：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中，数据绑定有两个次要步骤：
- 从父节点传递数据
- 从子实例收回事件以更新父实例
在自定义组件上应用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 ，须要做两件事：
- 在 props 中接管
v-model的值。 - 当对应的值变动时，收回一个更新事件
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 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。