vue中v-model,vue-model原理
本文主要介绍Vue # 8203V-model相关知识总结，帮助你更好的理解和学习使用vue框架，感兴趣的朋友可以了解一下。
V-model是Vue的一个指令，提供输入和表单数据之间或者两个组件之间的双向数据绑定。
这是Vue开发中一个简单的概念，但是v-model的真正威力需要一段时间才能理解。
本教程结束时，您将了解v-model的所有不同用例，并学习如何在自己的项目中使用它。
你准备好了吗？
我也是。让我们写代码。
什么是v-model?
正如我们刚刚讨论的，v-model是一个我们可以在模板代码中使用的指令。该指令是一个模板标记，它告诉Vue我们想对DOM做什么。
V-model告诉Vue，我们希望在模板中的值和数据属性中的值之间创建一个双向数据绑定。
使用v-model的一个常见用例是在设计表单和输入时。我们可以使用它让DOM输入元素修改Vue实例中的数据。
让我们看一个在文本输入中使用v-model的简单例子。
模板
差异
投入
type=text
v-model=值
/
p值：{{ value }} /p
/div
/模板
脚本
导出默认值{
data() {
返回{
值：“你好，世界”
}
}
}
/脚本
当我们输入文本输入时，我们会看到我们的数据属性发生了变化。
v-model和v-bind的区别？
v-bind指令通常与v-model一起切换。
两者的区别在于v-model提供了双向数据绑定。
在我们的例子中，这意味着如果我们的数据改变，我们的输入也会改变，如果我们的输入改变，我们的数据也会改变。
但是，v-bind只以一种方式绑定数据。
当您在应用程序中创建一个清晰的单向数据流时，这非常有用。但是，在v-model和v-bind之间进行选择时，您必须小心。
v-model的修饰符
Vue提供了两个修改器，允许我们改变v-model的功能。
每一个都可以这样加起来，甚至连在一起。
投入
type=text
v-model.trim.lazy=value
/
.lazy
默认情况下，在每个输入事件上，v-model与Vue实例的状态(数据属性)同步。这包括获得、失去焦点等等。
Lazy modifier修改了我们的v-model，所以它只在改变事件后同步。
这减少了v-model尝试与Vue实例同步的次数。3354在某些情况下，它还可以提高性能。
.number
通常，我们的输入会自动将输入转换为字符串—即使我们输入的是数字。
确保值被视为数字的一种方法是使用。数字修饰符。
根据Vue文档，如果输入发生变化并且parseFloat()无法解析新值，将返回输入的最后一个有效值。
投入
type=number
v-model.number=value
/
.trim
与大多数编程语言中的trim方法类似。trim修饰符在返回值之前删除开头或结尾的空白。
在自定义组件中使用v-model
好了，现在我们知道了form/input内部的v-model的基础知识，接下来我们来看一个v-model 3354的有趣用法，创建组件之间的双向数据绑定。
在Vue中，数据绑定有两个主要步骤：
从父节点传递数据
从子组件发出事件以更新父组件。
在定制组件上使用v-model允许我们传递一个prop并用一个指令处理一个事件。
custom-text-input v-model= value /
！-是一样的-
自定义文本输入
:模型值=值
@ update:model value= value=$ event
/
好吧，这到底是什么意思？
让我们继续使用v-model表单的示例，并使用一个名为CustomTextInput.vue的自定义文本输入
使用v-model传递的值的默认名称是modelValue——。我们将在示例中使用这个名称。
但是，我们可以像这样传递一个自定义的模型名。
custom-text-input v-model:name= value /
注意：当我们使用定制模型名称时，发出的方法的名称将被更新：name
这里有一张来自Vue文档的图片来总结一下。
使用自定义组件中的v-model
我们已经设置了父组件，所以让我们从子组件访问它。
在CustomTextInput.vue中，我们必须做两件事：
接受我们的v-model价值作为支柱
当我们的输入发生变化时，就会触发一个更新事件。
OK ——我们先在脚本中声明它为prop。
导出默认值{
道具：{
模型值：字符串，
}
}
接下来，让我们创建我们的模板，将值设置为modelValue prop，每当有输入事件时，我们都会通过update发出一个新值：modelValue。
模板
差异
标签名/标签
投入
type=text
placeholder=Input
:value=modelValue
@ input= $ emit( update:model value ，$event.target.value)
/
/div
/模板
使用v-model
好吧！
我们已经介绍了一个使用v-model在两个组件之间绑定数据的基本示例。
让我们看看使用v-model指令的一些更高级的方法。
对组件多次使用v-model。
V-model不限于每个组件只使用一次。
为了多次使用v-model，我们只需要确保每个prop都有唯一的名称，并且可以在它的子组件中正确地访问它。
让我们在姓氏中添加第二个v-model。
在我们的父组件中：
模板
差异
自定义文本输入
v-model=值
虚拟模型：姓氏=姓氏
/
p值：{{ value }} /p
p姓氏：{{姓氏}} /p
/div
/模板
脚本
从“”导入CustomTextInput。/CustomTextInput.vue
导出默认值{
组件：{
CustomTextInput，
},
data() {
返回{
值：马特，
姓氏：“Maribojoc”
}
}
}
/脚本
然后，在子组件内部：
模板
差异
标签名/标签
投入
type=text
:value=modelValue
placeholder=Input
@ input= $ emit( update:model value ，$event.target.value)
/
标签姓氏/标签
投入
type=text
:value=姓氏
placeholder=Input
@input=$emit(update:lastName ，$event.target.value)
/
/div
/模板
脚本
导出默认值{
道具：{
姓氏：字符串，
模型值：字符串，
}
}
/脚本
V-model的自定义修饰符
正如我们所讨论的，Vue内置了一些修改器。但是总有一天，我们会想要添加我们自己的。
假设我们想要创建一个修饰符来删除输入中的所有空格。我们称之为没有空间。
自定义文本输入
v-model.no-whitespace=value
虚拟模型：姓氏=姓氏
/
在我们的输入组件中，我们可以使用prop来捕获修饰符。自定义修饰符的名称是nameModifiers。
道具：{
姓氏：字符串，
模型值：字符串，
模型修改器：{
默认值：()=({})
}
}
好了，我们要做的第一件事是将@input处理器改为使用自定义方法。我们可以称它为emitValue，它将接受正在编辑的属性和事件对象的名称。
标签名/标签
投入
type=text
:value=modelValue
placeholder=Input
@input=emitValue(modelValue ，$event)
/
在emitValue方法中，在调用$emit之前，我们必须检查修饰符。如果no-whitespace修饰符为true，您可以在将值发送给父对象之前修改它。
emitValue(propName，evt) {
设val=evt.target.value
if(this . model modifiers[ no-white space ]){
val=val.replace(/\s/g，)
}
这个。$emit(`update:${propName} `，val)
}
结论
我希望你知道一些关于v-model的新东西。
在其基本用例中(比如表单和输入数据)，v-model是一个非常简单的概念。但是，当我们开始创建自定义组件，处理更复杂的数据时，才能真正理解v-model。
以上是Vue v-model总结的详细内容。更多关于Vue v-model的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。