À travers des exemples de code, nous vous apprendrons le v-model (à collectionner) !

Cet article vous aidera à comprendre le v-model à travers des exemples de code. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Vue v-model est une directive qui fournit une liaison de données bidirectionnelle entre input et form ou entre deux composants Certainement. [Recommandations associées : Tutoriel vue.js]

Il s'agit d'un concept simple dans le développement de Vue, mais la véritable puissance de v-model prend un certain temps à comprendre.

Cet article explique principalement les différents cas d'utilisation de v-model et apprenez à l'utiliser dans vos propres projets.

Qu'est-ce que le v-model ?

Comme mentionné tout à l'heure, `v-model est une directive que nous pouvons utiliser dans le code d'un modèle. Une directive est un jeton de modèle qui indique à Vue comment nous voulons gérer le DOM.

Dans le cas de v-model, cela indique à Vue que nous voulons créer une liaison de données bidirectionnelle entre la valeur de template et la valeur de l'attribut data.

Un cas d'utilisation courant de l'utilisation de v-model est la conception de certains éléments liés au formulaire. Nous pouvons l'utiliser pour permettre à l'élément input de modifier les données dans l'instance 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>

Lorsque nous entrons du contenu dans input, nous verrons que nos attributs de données changent

 ![Téléchargement...]()

Quelle est la différence entre v-model et v-bind ? La commande

v-bind bascule généralement avec v-model. La différence entre les deux est que v-model fournit une liaison de données bidirectionnelle.

Dans notre cas, cela signifie que si nos données changent, nos input changeront, et si nos input changent, nos données changeront aussi.

et v-bind ne lient les données que d'une seule manière.

Ceci est très utile lorsque nous souhaitons créer un flux de données unidirectionnel clair dans notre propre application. Il faut cependant être prudent lors du choix entre v-model et v-bind.

Modificateurs du v-model

Vue fournit deux modificateurs qui nous permettent de modifier la fonctionnalité de v-model. Chacun peut être additionné comme ceci ou même connecté entre eux.

<input 
  type=&#39;text&#39;
  v-model.trim.lazy=&#39;value&#39;
/>

.lazy

Par défaut, v-model se synchronise avec l'état (propriétés des données) de l'instance Vue à chaque événement input. Cela inclut le gain/la perte de concentration, etc. Le modificateur

.lazy modifie notre v-model afin qu'il ne se synchronise qu'après l'événement de changement. Cela réduit le nombre de tentatives de synchronisation du v-model avec l'instance Vue et, dans certains cas, peut améliorer les performances.

.number

Habituellement, même si l'entrée est de type numérique, input changera automatiquement la valeur saisie en chaîne. Une façon de garantir que nos valeurs sont traitées comme des nombres est d'utiliser le modificateur .number.

Selon la documentation Vue, si input change et parseFloat() ne peut pas analyser la nouvelle valeur, alors la dernière valeur valide de l'entrée sera renvoyée.

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

.trim

Semblable à la méthode trim dans la plupart des langages de programmation, le modificateur .trim supprime les espaces de début ou de fin avant de renvoyer la valeur.

Utilisation de v-model dans des composants personnalisés

Dans Vue, il y a deux étapes principales pour la liaison de données :

• Transmis à partir des données du nœud parent

• Émettre des événements depuis l'instance enfant pour mettre à jour l'instance parent

Utiliser v-model sur un composant personnalisé nous permet de passer un prop, Utiliser un commande pour gérer un événement.

<custom-text-input v-model="value" />

<!-- IS THE SAME AS -->

<custom-text-input 
   :modelValue="value"
   @update:modelValue="value = $event"
/>

Qu'est-ce que cela signifie exactement ?

Le nom par défaut d'une valeur transmise à l'aide de v-model est modelValue. Cependant, nous pouvons également transmettre un nom personnalisé comme celui-ci.

<custom-text-input></custom-text-input>

Remarque : Lorsque nous utilisons un nom de modèle personnalisé, le nom de la méthode émise sera update:name.

Utilisation du v-model dans des composants personnalisés

Pour utiliser le v-mode dans des composants personnalisés, vous devez faire deux choses. :

• reçoit la valeur de v-model en accessoires.

• Lorsque la valeur correspondante change, un événement de mise à jour est émis

ok, déclarons d'abord :

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

Continuer Suivant , lions le modelValue à l'élément requis Lorsque la valeur change, nous émettons la nouvelle valeur via update:modelValue.

De cette façon, une liaison bidirectionnelle peut être obtenue.

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 都可以正常工作：

自定义 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['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

更多编程相关知识，请访问：编程视频！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!