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

J'apprends Vue avec un cours en ligne et l'instructeur m'a donné un exercice pour faire un texte d'entrée avec une valeur par défaut. Je l'ai terminé 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 ces deux et quand il vaut mieux les utiliser chacun?

D' ici - N'oubliez pas:

<input v-model="something">

est essentiellement le même 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"
>

Il en v-modelva de même pour une liaison bidirectionnelle pour les entrées de formulaire . Il combine v-bind, ce qui apporte une valeur js dans le balisage, et v-on:inputpour mettre à jour la valeur js .

Utilisez v-modelquand vous le pouvez. Utilisez v-bind/ v-onquand vous devez :-) J'espère que votre réponse a été acceptée.

v-model fonctionne avec tous les types d'entrée HTML de base (texte, zone de texte, nombre, radio, case à cocher, sélectionnez). Vous pouvez utiliser v-modelavec input type=datesi votre modèle stocke les dates sous forme de chaînes ISO (aaaa-mm-jj). Si vous souhaitez utiliser des objets de date dans votre modèle (une bonne idée dès que vous allez les manipuler ou les formater), faites-le .

v-modela quelques astuces supplémentaires dont il est bon d'être conscient. Si vous utilisez un IME (beaucoup de claviers mobiles ou chinois / japonais / coréen), le v-model ne sera pas mis à jour tant qu'un mot n'est pas terminé (un espace est entré ou l'utilisateur quitte le champ). v-inputse déclenchera beaucoup plus fréquemment.

v-modela également des modificateurs .lazy, .trim, .number, couvert dans la doc .

En mots simples v-modelest de deux voies fixations signifie: si vous modifiez la valeur d' entrée, les données liées sera modifiée et vice - versa .

mais v-bind:valueest appelé liaison unidirectionnelle, ce qui signifie: vous pouvez modifier la valeur d'entrée en modifiant les données liées, mais vous ne pouvez pas modifier les données liées en modifiant la valeur d'entrée via l'élément .

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

v-model
c'est une liaison de données bidirectionnelle, il est utilisé pour lier l'élément d'entrée html lorsque vous modifiez la valeur d'entrée, puis les données limité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
est une liaison de données à sens unique, ce qui signifie que vous ne pouvez lier des données qu'à l'élément d'entrée mais ne pouvez pas modifier les données bornées en modifiant 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>

v-model is for two way bindings means: if you change input value, the bound data will be changed and vice versa. but v-bind:value is called one way binding that means: you can change input value by changing bound data but you can't change bound data by changing input value through the element.

v-model is intended to be used with form elements. It allows you to tie the form 
 element (e.g. a text input) with the data object in your Vue instance.

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

v-bind is intended to be used with components to create custom props. This allows you to pass data to a component. As the prop is reactive, if the data that’s passed to the component changes then the component will reflect this change

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

J'espère que cela vous aidera à comprendre les bases

Il y a des cas où vous ne voulez pas utiliser v-model . Si vous avez deux entrées et que chacune dépend l'une de l'autre, vous pourriez avoir des problèmes référentiels circulaires. Les cas d'utilisation courants sont si vous créez une calculatrice comptable.

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

Au lieu de cela, prenez votre v-modelet divisez-le comme indiqué ci-dessus

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

En pratique, si vous découplez votre logique de cette façon, vous appellerez probablement une méthode.

Voici à 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>