suchen

Heim >Web-Frontend >View.js >Anhand von Codebeispielen bringen wir Ihnen das V-Modell bei (es lohnt sich, es zu sammeln)!

Anhand von Codebeispielen bringen wir Ihnen das V-Modell bei (es lohnt sich, es zu sammeln)!

青灯夜游
青灯夜游nach vorne
2021-04-26 18:42:052855Durchsuche

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.

Anhand von Codebeispielen bringen wir Ihnen das V-Modell bei (es lohnt sich, es zu sammeln)!

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 是什么？

刚才讲过，`v-model是一个我们可以在模板代码中使用的指令。指令是一个模板令牌，它告诉 Vue 我们想要如何处理 DOM。

在v-model的情况下，它告诉Vue我们想要在template 中的值和data属性中的值之间创建一个双向数据绑定。

使用v-model的一个常见用例是在设计表单相关的一些元素时。我们可以使用它使input元素能够修改Vue实例中的数据。

<template>
  <div>
    <input 
      type=&#39;text&#39;
      v-model=&#39;value&#39;
    />
    <p> Value: {{ value }} </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: &#39;Hello World&#39;  
    }
  }
}
</script>

当我们在input中输入内容时，我们会看到我们的数据属性正在变化

![上传中...]()

Anhand von Codebeispielen bringen wir Ihnen das V-Modell bei (es lohnt sich, es zu sammeln)!

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=&#39;text&#39;
  v-model.trim.lazy=&#39;value&#39;
/>

.lazy

默认情况下，v-model在每个input事件上与Vue实例的状态（数据属性）同步。 这包括获得/失去焦点等。

.lazy修改器修改了我们的v-model，所以它只在更改事件之后同步。这减少了v-model试图与Vue实例同步的次数，在某些情况下，还可以提高性能。

.number

通常，即使输入的是数字类型，input也会自动将输入的值变为字符串。确保将我们的值作为数字处理的一种方法是使用.number修饰符。

根据Vue文档，如果input发生变化，并且parseFloat()无法解析新值，那么将返回输入的最后一个有效值。

<input 
  type=&#39;number&#39;
  v-model.number=&#39;value&#39;
/>

.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></custom-text-input>

注意：当我们使用自定义模型名称时，发出的方法的名称将为update:name。

Anhand von Codebeispielen bringen wir Ihnen das V-Modell bei (es lohnt sich, es zu sammeln)!

在自定义组件中使用 v-model

在自定义组件中使用 v-mode ，需要做两件事：

  • 在 props 中接收 v-model 的值。

  • 当对应的值变化时，发出一个更新事件

ok，首先来声明一下：

export default {
  props: {
    modelValue: String,
  }
}

接下来，将 modelValue 绑定到需要的元素，当值变化时，我们就通过update:modelValue

Dies ist ein einfaches Konzept in der Vue-Entwicklung, aber es Es dauert einige Zeit, die wahre Leistungsfähigkeit von 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.

Was ist das V-Modell?

Anhand von Codebeispielen bringen wir Ihnen das V-Modell bei (es lohnt sich, es zu sammeln)!Wie gerade erwähnt, ist `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 dataliegen 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=&#39;value&#39; 
      v-model:lastName=&#39;lastName&#39;
    />
    <p> Value: {{ value }} </p>
    <p> Last Name: {{ lastName }} </p>
  </div>
</template>

<script>
import CustomTextInput from &#39;./CustomTextInput.vue&#39;

export default {
  components: {
    CustomTextInput,
  },
  data() {
    return {
      value: &#39;Matt&#39;,
      lastName: &#39;Maribojoc&#39;
    }
  }
}
</script>
🎜Wenn wir Inhalte in input eingeben, werden wir sehen, dass sich unsere Datenattribute ändern🎜🎜![Uploading...]()🎜🎜Anhand von Codebeispielen bringen wir Ihnen das V-Modell bei (es lohnt sich, es zu sammeln)!🎜

v-model und v Was ist der Unterschied? zwischen -binden?

🎜Der Befehl 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. 🎜

Modifikatoren des V-Modells

🎜Vue bietet zwei Modifikatoren, mit denen wir die Funktionalität von V-Modell ändern können. Jedes kann auf diese Weise addiert oder sogar miteinander verbunden werden. 🎜
<template>
  <div>
    <label> First Name </label>
    <input 
      type=&#39;text&#39;
      :value=&#39;modelValue&#39;
      placeholder=&#39;Input&#39;
      @input=&#39;$emit("update:modelValue", $event.target.value)&#39;
    />
    <label> Last Name </label>
    <input 
      type=&#39;text&#39;
      :value=&#39;lastName&#39;
      placeholder=&#39;Input&#39;
      @input=&#39;$emit("update:lastName", $event.target.value)&#39;
    />
  </div>
</template>

<script>
export default {
  props: {
    lastName: String,
    modelValue: String,
  }
}
</script>

.lazy

🎜Standardmäßig interagiert 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. 🎜

.number

🎜Normalerweise wandelt 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=&#39;value&#39; 
  v-model:lastName=&#39;lastName&#39;
/>

.trim

🎜Ähnlich wie die Trim-Methode in den meisten Programmiersprachen entfernt der Modifikator .trim führende oder nachgestellte Leerzeichen. 🎜

V-Modell in benutzerdefinierten Komponenten verwenden

🎜In Vue gibt es zwei Hauptschritte für die Datenbindung: 🎜
  • 🎜Daten übergeben vom übergeordneten Knoten🎜
  • 🎜Ereignisse von untergeordneten Instanzen ausgeben, um übergeordnete Instanzen zu aktualisieren🎜
🎜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: () => ({})
  }
},

Was genau bedeutet das?

🎜Der Standardname für Werte, die mit v-model übergeben werden, ist modelValue. Wir können jedoch auch einen benutzerdefinierten Namen wie diesen übergeben. 🎜
<label> First Name </label>
<input 
      type=&#39;text&#39;
      :value=&#39;modelValue&#39;
      placeholder=&#39;Input&#39;
      @input=&#39;emitValue("modelValue", $event)&#39;
/>
🎜Hinweis: Wenn wir einen benutzerdefinierten Modellnamen verwenden, lautet der Name der ausgegebenen Methode update:name. 🎜🎜Anhand von Codebeispielen bringen wir Ihnen das V-Modell bei (es lohnt sich, es zu sammeln)!🎜

V-Modell in benutzerdefinierten Komponenten verwenden

🎜Um den V-Modus in benutzerdefinierten Komponenten zu verwenden, müssen Sie zwei Dinge tun: 🎜
  • 🎜Erhalten Sie den Wert von v-model in Requisiten. 🎜
  • 🎜Wenn sich der entsprechende Wert ändert, wird ein Aktualisierungsereignis ausgegeben🎜
🎜OK, zuerst deklarieren wir: 🎜
emitValue(propName, evt) {
  let val = evt.target.value
  if (this.modelModifiers[&#39;no-whitespace&#39;]) {
    val = val.replace(/\s/g, &#39;&#39;)
  }
  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并不局限于每个组件只能使用一个。要多次使用v-model，我们只需要确保唯一命名，并在子组件中正确访问它。

为下面的组件添加第二个 v-model，这里先命名为 lastName:

<template>
  <div>
    <custom-text-input 
      v-model=&#39;value&#39; 
      v-model:lastName=&#39;lastName&#39;
    />
    <p> Value: {{ value }} </p>
    <p> Last Name: {{ lastName }} </p>
  </div>
</template>

<script>
import CustomTextInput from &#39;./CustomTextInput.vue&#39;

export default {
  components: {
    CustomTextInput,
  },
  data() {
    return {
      value: &#39;Matt&#39;,
      lastName: &#39;Maribojoc&#39;
    }
  }
}
</script>

然后，我们内部的子组件:

<template>
  <div>
    <label> First Name </label>
    <input 
      type=&#39;text&#39;
      :value=&#39;modelValue&#39;
      placeholder=&#39;Input&#39;
      @input=&#39;$emit("update:modelValue", $event.target.value)&#39;
    />
    <label> Last Name </label>
    <input 
      type=&#39;text&#39;
      :value=&#39;lastName&#39;
      placeholder=&#39;Input&#39;
      @input=&#39;$emit("update:lastName", $event.target.value)&#39;
    />
  </div>
</template>

<script>
export default {
  props: {
    lastName: String,
    modelValue: String,
  }
}
</script>

运行后，可以看到两个 v-model 都可以正常工作：

Anhand von Codebeispielen bringen wir Ihnen das V-Modell bei (es lohnt sich, es zu sammeln)!

自定义 v-model 的修饰符

Vue中内置了一些修饰符，但这些远远不够，所以有时我们需要自定义自己的修饰符。

假设我们要创建一个修饰符，以删除输入的文本中的所有空格。 我们称之为no-whitespace ：

<custom-text-input 
  v-model.no-whitespace=&#39;value&#39; 
  v-model:lastName=&#39;lastName&#39;
/>

在组件内，我们可以使用 props 来捕获修改器。自定义修饰符的名称是nameModifiers

props: {
  lastName: String,
  modelValue: String,
  modelModifiers: {
    default: () => ({})
  }
},

我们要做的第一件事是改变@input处理器来使用一个自定义方法。我们可以称它为emitValue，它接受正在编辑的属性和事件对象的名称。

<label> First Name </label>
<input 
      type=&#39;text&#39;
      :value=&#39;modelValue&#39;
      placeholder=&#39;Input&#39;
      @input=&#39;emitValue("modelValue", $event)&#39;
/>

在emitValue方法中，在调用$emit之前，我们要检查修饰符。如果no-whitespace修饰符为true，则可以在将其发送给父对象之前修改该值。

emitValue(propName, evt) {
  let val = evt.target.value
  if (this.modelModifiers[&#39;no-whitespace&#39;]) {
    val = val.replace(/\s/g, &#39;&#39;)
  }
  this.$emit(`update:${propName}`, val)
}

运行，完美：

Anhand von Codebeispielen bringen wir Ihnen das V-Modell bei (es lohnt sich, es zu sammeln)!

总结

希望本文能教给大家一些有关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!

Stellungnahme：
Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Welche Methoden gibt es zum Übergeben von Werten in Vue-Komponenten?Nächster Artikel：Welche Methoden gibt es zum Übergeben von Werten in Vue-Komponenten?

In Verbindung stehende Artikel

Mehr sehen