Heim > Artikel > Web-Frontend > Anhand von Codebeispielen bringen wir Ihnen das V-Modell bei (es lohnt sich, es zu sammeln)!
Dieser Artikel hilft Ihnen anhand von Codebeispielen, das V-Modell zu verstehen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
Vue v-model
ist eine Direktive, die eine Verbindung zwischen input
und form
oder zwischen zwei Komponenten in zwei Richtungen herstellt Datenbindung. [Verwandte Empfehlungen: vue.js-Tutorial]v-model
是一个指令,它提供了input
和form
之间或两个组件之间的双向数据绑定。【相关推荐:vue.js教程】
这是Vue开发中的一个简单概念,但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-bind
指令通常会与v-model
切换。两者的区别在于v-model
提供了双向数据绑定。
在我们的例子中,这意味着如果我们的数据改变了,我们的input
也会改变,如果我们的input
改变了,我们的数据也会改变。
而 v-bind
只以一种方式绑定数据。
当我们想在自己的应用中创建一个清晰的单向数据流时,这是非常有用的。但是,在v-model
和v-bind
之间选择时必须小心。
Vue 提供了两个修饰符,允许我们更改v-model
的功能。每一个都可以像这样加起来,甚至可以连接在一起。
<input type='text' v-model.trim.lazy='value' />
默认情况下,v-model
在每个input
事件上与Vue实例的状态(数据属性)同步。 这包括获得/失去焦点等。
.lazy
修改器修改了我们的v-model
,所以它只在更改事件之后同步。这减少了v-model试图与Vue实例同步的次数,在某些情况下,还可以提高性能。
通常,即使输入的是数字类型,input
也会自动将输入的值变为字符串。确保将我们的值作为数字处理的一种方法是使用.number
修饰符。
根据Vue文档,如果input
发生变化,并且parseFloat()
无法解析新值,那么将返回输入的最后一个有效值。
<input type='number' v-model.number='value' />
与大多数编程语言中的trim方法类似,.trim
修饰符在返回值之前删除开头或结尾的空白。
在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></custom-text-input>
注意:当我们使用自定义模型名称时,发出的方法的名称将为update:name
。
在自定义组件中使用 v-mode ,需要做两件事:
在 props 中接收 v-model
的值。
当对应的值变化时,发出一个更新事件
ok,首先来声明一下:
export default { props: { modelValue: String, } }
接下来,将 modelValue 绑定到需要的元素,当值变化时,我们就通过update:modelValue
v-model
zu verstehen. In diesem Artikel werden hauptsächlich die verschiedenen Anwendungsfälle von v-model
erläutert und Sie erfahren, wie Sie es in Ihren eigenen Projekten verwenden.
`v-model
eine Direktive, die wir im Vorlagencode verwenden können. Eine Direktive ist ein Vorlagen-Token, das Vue mitteilt, wie wir mit dem DOM umgehen möchten. 🎜Im Fall von v-model
teilt es Vue mit, dass wir zwischen dem Wert in der template
und dem Wert in den data
liegen möchten > Attribut Erstellen Sie eine bidirektionale Datenbindung. 🎜🎜Ein häufiger Anwendungsfall für die Verwendung von v-model
ist das Entwerfen einiger Elemente im Zusammenhang mit Formularen. Wir können dies verwenden, um dem input
-Element das Ändern von Daten in der Vue-Instanz zu ermöglichen. 🎜<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>🎜Wenn wir Inhalte in
input
eingeben, werden wir sehen, dass sich unsere Datenattribute ändern🎜🎜![Uploading...]()🎜🎜🎜v-bind
wechselt normalerweise mit v-model
. Der Unterschied zwischen den beiden besteht darin, dass v-model
eine bidirektionale Datenbindung bietet. 🎜🎜In unserem Fall bedeutet dies, dass sich auch unsere Eingabe
ändert, und wenn sich unsere Eingabe
ändert, ändern sich auch unsere Daten. 🎜🎜Und v-bind
bindet Daten nur auf eine Weise. 🎜🎜Dies ist sehr nützlich, wenn wir in unserer eigenen Anwendung einen klaren unidirektionalen Datenfluss erstellen möchten. Bei der Wahl zwischen v-model
und v-bind
ist jedoch Vorsicht geboten. 🎜V-Modell
ändern können. Jedes kann auf diese Weise addiert oder sogar miteinander verbunden werden. 🎜<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
bei jedem input
-Ereignisstatus mit der Vue-Instanz ( Datenattribute) Synchronisierung. Dazu gehört das Gewinnen/Verlieren des Fokus usw. 🎜🎜Der Modifikator .lazy
ändert unser V-Modell
, sodass es erst nach dem Änderungsereignis synchronisiert wird. Dies reduziert die Anzahl der Synchronisierungsversuche des V-Modells mit der Vue-Instanz und kann in einigen Fällen die Leistung verbessern. 🎜input
den Eingabewert automatisch in eine Zeichenfolge um, auch wenn die Eingabe ein numerischer Typ ist. Eine Möglichkeit, sicherzustellen, dass unsere Werte als Zahlen behandelt werden, besteht darin, den Modifikator .number
zu verwenden. 🎜🎜Wenn sich input
ändert und parseFloat()
den neuen Wert nicht analysieren kann, wird laut Vue-Dokumentation der letzte gültige Wert der Eingabe zurückgegeben. 🎜<custom-text-input v-model.no-whitespace='value' v-model:lastName='lastName' />
.trim
führende oder nachgestellte Leerzeichen. 🎜v-model
für benutzerdefinierte Komponenten verwenden Dies ermöglicht uns die Weitergabe eine Requisite und verwenden Sie eine Direktive, um ein Ereignis zu behandeln. 🎜props: { lastName: String, modelValue: String, modelModifiers: { default: () => ({}) } },
v-model
übergeben werden, ist modelValue
. Wir können jedoch auch einen benutzerdefinierten Namen wie diesen übergeben. 🎜<label> First Name </label> <input type='text' :value='modelValue' placeholder='Input' @input='emitValue("modelValue", $event)' />🎜Hinweis: Wenn wir einen benutzerdefinierten Modellnamen verwenden, lautet der Name der ausgegebenen Methode
update:name
. 🎜🎜🎜v-model
in Requisiten. 🎜emitValue(propName, evt) { let val = evt.target.value if (this.modelModifiers['no-whitespace']) { val = val.replace(/\s/g, '') } this.$emit(`update:${propName}`, val) }🎜Als nächstes binden wir den ModelValue an das erforderliche Element, wann Wenn sich der Wert ändert, geben wir den neuen Wert über
update:modelValue
aus. 🎜🎜Auf diese Weise kann eine Zwei-Wege-Bindung erreicht werden. 🎜🎜🎜🎜上面介绍了如果在自定义组件中使用 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
都可以正常工作:
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
的真正威力。
原文地址:https://learnvue.co/2021/01/everything-you-need-to-know-about-vue-v-model/
作者:Michael Thiessen
更多编程相关知识,请访问:编程视频!!
Das obige ist der detaillierte Inhalt vonAnhand von Codebeispielen bringen wir Ihnen das V-Modell bei (es lohnt sich, es zu sammeln)!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!