Vue.js: differenza tra v-model e v-bind

Sto imparando Vue con un corso online e l'istruttore mi ha dato un esercizio per creare un testo di input con un valore predefinito. L'ho completato usando v-model ma l'istruttore ha scelto v-bind: value e non capisco perché.

Qualcuno può darmi una semplice spiegazione sulla differenza tra questi due e quando è meglio usarli tutti?

Da qui - Ricorda:

<input v-model="something">

è essenzialmente lo stesso di:

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

oppure (sintassi abbreviata):

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

Quindi v-modelè un'associazione a due vie per gli input di modulo . Esso combina v-bind, che porta un valore js nella marcatura, e v-on:inputper aggiornare il valore js .

Usa v-modelquando puoi. Usa v-bind/ v-onquando devi :-) Spero che la tua risposta sia stata accettata.

v-model funziona con tutti i tipi di input HTML di base (text, textarea, number, radio, checkbox, select). Puoi usare v-modelconinput type=date se il modello memorizza le date come stringhe ISO (aaaa-mm-gg). Se vuoi usare oggetti data nel tuo modello (una buona idea non appena li manipolerai o li formatterai), fallo .

v-modelha qualche intelligenza in più di cui è bene essere consapevoli. Se si utilizza un IME (molte tastiere mobili o cinese / giapponese / coreano), il modello v non si aggiornerà fino al completamento di una parola (viene inserito uno spazio o l'utente lascia il campo). v-inputsparerà molto più frequentemente.

v-modeldispone inoltre di modificatori .lazy, .trim, .number, coperto di doc .

In parole semplici significa che i bindingv-model a due vie significano: se si modifica il valore di input, i dati associati verranno modificati e viceversa .

ma v-bind:valuesi chiama associazione unidirezionale che significa: è possibile modificare il valore di input modificando i dati associati ma non è possibile modificare i dati associati modificando il valore di input tramite l'elemento .

Dai un'occhiata a questo semplice esempio: https://jsfiddle.net/gs0kphvc/

v-model
è un'associazione di dati bidirezionale, viene utilizzata per associare l'elemento di input HTML quando si modifica il valore di input, quindi i dati limitati verranno modificati.

v-model viene utilizzato solo per gli elementi di input HTML

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

v-bind
è un'associazione di dati a senso unico, significa che puoi solo associare i dati all'elemento di input ma non puoi cambiare i dati limitati cambiando l'elemento di input. v-bind viene utilizzato per associare l'attributo 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/

Spero che questo ti aiuti con la comprensione di base

Ci sono casi in cui non vuoi usare v-model. Se hai due input e ognuno dipende l'uno dall'altro, potresti avere problemi referenziali circolari. Casi d'uso comuni sono se stai costruendo un calcolatore di contabilità.

In questi casi, non è una buona idea utilizzare né watcher né proprietà calcolate.

Invece, prendi il tuo v-modele dividerlo come indicato nella risposta sopra

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

In pratica, se stai disaccoppiando la tua logica in questo modo, probabilmente chiamerai un metodo.

Ecco come sarebbe in uno scenario del mondo reale:

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