Vue.js - Différence entre v-model et v-bind

Question

Je suis en train d'apprendre Vue avec un cours en ligne et l'instructeur m'a donné un exercice pour faire une entrée de texte avec une valeur par défaut. Je l'ai réalisé en utilisant v-model mais, l'instructeur a choisi v-bind:value et je ne comprends pas pourquoi.

Quelqu'un peut-il me donner une explication simple sur la différence entre les deux et quand il est préférable d'utiliser chacun d'eux ?

Answer 1

De aquí - Rappelez-vous :

<input v-model="something">

est essentiellement la même chose que :

<input
   v-bind:value="something"
   v-on:input="something = $event.target.value"
>

ou (syntaxe abrégée) :

<input
   :value="something"
   @input="something = $event.target.value"
>

Alors v-model est un liaison bidirectionnelle pour les entrées de formulaire . Il combine v-bind qui apporte une valeur js dans le balisage, et v-on:input a mettre à jour la valeur js .

Utilisez v-model quand vous le pouvez. Utilisez v-bind / v-on quand il le faut :-) J'espère que votre réponse a été acceptée.

v-model fonctionne avec tous les types de saisie HTML de base (texte, zone de texte, nombre, radio, case à cocher, sélection). Vous pouvez utiliser v-model con input type=date si votre modèle stocke les dates sous forme de chaînes ISO (yyyy-mm-dd). Si vous voulez utiliser des objets date dans votre modèle (une bonne idée dès que vous allez les manipuler ou les formater), faites ceci .

v-model a des capacités supplémentaires dont il est bon d'être conscient. Si vous utilisez un IME (beaucoup de claviers mobiles, ou chinois/japonais/coréen), v-model ne sera pas mis à jour tant qu'un mot n'est pas complet (un espace est saisi ou l'utilisateur quitte le champ). v-input se déclencheront beaucoup plus fréquemment.

v-model a également des modificateurs .lazy , .trim , .number couvert par le doc .

Answer 2

En termes simples v-model est pour fixations à double sens signifie : si vous modifiez la valeur d'entrée, les données liées seront modifiées et vice versa. .

mais v-bind:value s'appelle liaison à sens unique c'est-à-dire : vous pouvez changer la valeur d'entrée en changeant les données liées mais vous ne pouvez pas changer les données liées en changeant la valeur d'entrée à travers l'élément. .

Regardez cet exemple simple : https://jsfiddle.net/gs0kphvc/

Answer 3

Modèle en V
Il s'agit d'une liaison de données bidirectionnelle, utilisée pour lier l'élément d'entrée html lorsque vous changez la valeur d'entrée, les données liées seront modifiées.

v-model est utilisé uniquement pour les éléments d'entrée HTML

ex: <input type="text" v-model="name" > 

v-bind
Il s'agit d'une liaison de données à sens unique, ce qui signifie que vous pouvez seulement lier les données à l'élément d'entrée mais que vous ne pouvez pas changer les données liées à l'élément d'entrée. v-bind est utilisé pour lier l'attribut html
ex :
<input type="text" v-bind:class="abc" v-bind:value="">

<a v-bind:href="home/abc" > click me </a>

Answer 4

V-model est destiné aux liaisons bidirectionnelles, ce qui signifie que si vous modifiez la valeur d'entrée, les données liées seront modifiées et vice versa. Mais v-bind:value est appelé liaison à sens unique, ce qui signifie que vous pouvez changer la valeur d'entrée en changeant les données liées, mais vous ne pouvez pas changer les données liées en changeant la valeur d'entrée à travers l'élément.

v-model est destiné à être utilisé avec des éléments de formulaire. Il vous permet de lier l'élément de formulaire (par exemple, une entrée de texte) avec l'objet de données dans votre instance Vue.

Ejemplo: https://jsfiddle.net/jamesbrndwgn/j2yb9zt1/1/

v-bind est destiné à être utilisé avec des composants pour créer des props personnalisés. Cela vous permet de transmettre des données à un composant. Comme l'accessoire est réactif, si les données transmises au composant changent, le composant reflétera ce changement.

Example: https://jsfiddle.net/jamesbrndwgn/ws5kad1c/3/

J'espère que cela vous aidera à comprendre les principes de base.

Answer 5

Il y a des cas où vous ne voulez pas utiliser v-model . Si vous avez deux entrées, et qu'elles dépendent l'une de l'autre, vous pouvez avoir des problèmes de référence circulaire. Le cas le plus courant est celui d'une calculatrice de comptabilité.

Dans ces cas, ce n'est pas une bonne idée d'utiliser des surveillants ou des propriétés calculées.

Au lieu de cela, prenez votre v-model et le diviser comme indiqué dans la réponse ci-dessus

<input
   :value="something"
   @input="something = $event.target.value"
>

En pratique, si vous découplez votre logique de cette manière, vous appellerez probablement une méthode.

Voilà à quoi cela ressemblerait dans un scénario réel :

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input :value="extendedCost" @input="_onInputExtendedCost" />
  <p> {{ extendedCost }}
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: function(){
      return {
        extendedCost: 0,
      }
    },
    methods: {
      _onInputExtendedCost: function($event) {
        this.extendedCost = parseInt($event.target.value);
        // Go update other inputs here
    }
  }
  });
</script>