Vue.js: diferencia entre v-model y v-bind

Estoy aprendiendo Vue con un curso en línea y el instructor me dio un ejercicio para hacer un texto de entrada con un valor predeterminado. Lo completé usando v-model pero, el instructor eligió v-bind: value y no entiendo por qué.

¿Alguien puede darme una explicación simple sobre la diferencia entre estos dos y cuándo es mejor usar cada uno?

Desde aquí - Recuerda:

<input v-model="something">

es esencialmente lo mismo que:

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

o (sintaxis abreviada):

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

Entonces, v-modeles un enlace bidireccional para entradas de formulario . Se combina v-bind, lo que aporta un valor js al marcado, y v-on:inputpara actualizar el valor js .

Úselo v-modelcuando pueda. Use v-bind/ v-oncuando debe :-) Espero que su respuesta haya sido aceptada.

v-model funciona con todos los tipos básicos de entrada HTML (texto, área de texto, número, radio, casilla de verificación, seleccionar). Puede usar v-modelcon input type=datesi su modelo almacena fechas como cadenas ISO (aaaa-mm-dd). Si desea usar objetos de fecha en su modelo (una buena idea tan pronto como los vaya a manipular o formatear), haga esto .

v-modeltiene algunos conocimientos adicionales que es bueno tener en cuenta. Si está utilizando un IME (muchos teclados móviles, o chino / japonés / coreano), v-model no se actualizará hasta que se complete una palabra (se ingrese un espacio o el usuario abandone el campo). v-inputdisparará con mucha más frecuencia.

v-modeltambién tiene modificadores .lazy, .trim, .number, cubierto en el doc .

En palabras simples v-modeles para enlaces bidireccionales : si cambia el valor de entrada, los datos enlazados se cambiarán y viceversa .

pero v-bind:valuese llama enlace unidireccional que significa: puede cambiar el valor de entrada cambiando los datos enlazados, pero no puede cambiar los datos enlazados cambiando el valor de entrada a través del elemento .

mira este sencillo ejemplo: https://jsfiddle.net/gs0kphvc/

v-model
es un enlace de datos bidireccional, se usa para vincular el elemento de entrada html cuando cambia el valor de entrada, luego los datos delimitados serán cambiados.

v-model se usa solo para elementos de entrada HTML

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

v-bind
es un enlace de datos unidireccional, significa que solo puede enlazar datos al elemento de entrada pero no puede cambiar el elemento de entrada que cambia los datos delimitados. v-bind se usa para enlazar el atributo html, por
ejemplo:
<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/

Espero que esto te ayude con la comprensión básica

Hay casos en los que no quieres usar v-model. Si tiene dos entradas y cada una depende de la otra, es posible que tenga problemas de referencia circulares. Los casos de uso comunes son si está construyendo una calculadora contable.

En estos casos, no es una buena idea usar observadores ni propiedades calculadas.

En su lugar, tome su v-modely divídalo como la respuesta anterior indica

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

En la práctica, si está desacoplando su lógica de esta manera, probablemente llamará a un método.

Así es como se vería en un escenario del mundo real:

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