Vue.js - Diferença entre o modelo v e o v-bind

Estou aprendendo o Vue com um curso on-line e o instrutor me deu um exercício para criar um texto de entrada com um valor padrão. Concluí usando o modelo v, mas o instrutor escolheu v-bind: value e não entendo o porquê.

Alguém pode me dar uma explicação simples sobre a diferença entre esses dois e quando é melhor usar cada um?

A partir daqui - Lembre-se:

<input v-model="something">

é essencialmente o mesmo que:

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

ou (sintaxe abreviada):

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

Assim v-modelé uma ligação bidirecional para entradas de formulário . Ele combina v-bind, o que traz um valor js para a marcação e v-on:inputpara atualizar o valor js .

Use v-modelquando puder. Use v-bind/ v-onquando precisar :-) Espero que sua resposta tenha sido aceita.

v-model funciona com todos os tipos básicos de entrada HTML (texto, área de texto, número, rádio, caixa de seleção, selecione). Você pode usar v-modelcom input type=datese suas lojas modelo datas como strings ISO (AAAA-MM-DD). Se você deseja usar objetos de data em seu modelo (uma boa idéia assim que você os manipular ou formatar), faça isso .

v-modeltem algumas esperanças extras que é bom estar ciente. Se você estiver usando um IME (muitos teclados móveis ou chinês / japonês / coreano), o modelo v não será atualizado até que uma palavra seja concluída (um espaço é inserido ou o usuário sai do campo). v-inputdisparará com muito mais frequência.

v-modeltambém tem modificadores .lazy, .trim, .number, coberto na doc .

Em palavras simples, v-modelpara ligações de duas vias significa: se você alterar o valor de entrada, os dados de ligação serão alterados e vice-versa .

mas v-bind:valueé chamado de uma forma vinculativa que isso significa: você pode alterar o valor de entrada, alterando dados vinculados, mas não pode alterar dados vinculados ao alterar valor de entrada através do elemento .

confira este exemplo simples: https://jsfiddle.net/gs0kphvc/

v-model
: é uma ligação de dados bidirecional, é usado para ligar o elemento de entrada html quando você altera o valor de entrada; os dados limitados serão alterados.

O modelo v é usado apenas para elementos de entrada HTML

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

v-bind
é uma ligação de dados unidirecional, significa que você só pode vincular dados ao elemento de entrada, mas não pode alterar dados limitados alterando o elemento de entrada. O v-bind é usado para ligar o atributo 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/

Espero que isso ajude você com o entendimento básico

Há casos em que você não deseja usar v-model. Se você tiver duas entradas, e cada uma depender uma da outra, poderá ter problemas referenciais circulares. Casos de uso comuns são se você estiver criando uma calculadora contábil.

Nesses casos, não é uma boa ideia usar observadores ou propriedades calculadas.

Em vez disso, pegue o seu v-modele divida-o conforme a resposta acima indica

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

Na prática, se você estiver dissociando sua lógica dessa maneira, provavelmente estará chamando um método.

É assim que seria em um cenário do 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>