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

208

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?

Gustavo Dias
fonte
8
v-modelé usado principalmente para lances de entrada e formulário, portanto, use-o ao lidar com vários tipos de entrada. v-bindA diretiva permite que você produza algum valor dinâmico digitando alguma expressão JS que, na maioria dos casos, depende dos dados do modelo de dados - então pense no v-bind como diretiva que você deve usar quando quiser lidar com algumas coisas dinâmicas.
Belmin Bedak
5
Em alguns casos, você pode usar cada um deles. Às vezes não, por exemplo: <div v-bind:class="{ active: isActive }"></div>- você não pode vincular o atributo html usando o modelo, deve usar a v-binddiretiva. Para os elementos do formulário, você desejará usar a v-modeldiretiva - "ela seleciona automaticamente a maneira correta de atualizar o elemento com base no tipo de entrada".
Alexander Alexander
1
@Alexander A frase "bind HTML attribute" me ajudou a pensar sobre isso melhor. Seria bom ver você se aprofundar nisso com uma resposta mais completa sobre o que realmente está acontecendo com essas duas construções.
Tom Russell
@Alexander Esp no contexto do componente datae props...
Tom Russell

Respostas:

429

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 .

bbsimonbb
fonte
33
'Use o modelo v quando puder. Use v-bind / v-on quando necessário '. Ótimo resumo! Muito obrigado!
尤川豪
Qual é a diferença entre v-modele v-bind:xxx.sync?
El Mac
2
O @ElMac v-model é uma ligação bidirecional entre um componente Vue e um modelo javascript. A fonte (o lado do modelo da ligação) é declarada nos dados do componente Vue. Assim, o Vue permite extrair o estado de seus componentes e modificá-lo diretamente do componente. É um padrão simples para gerenciamento de estado que é uma marca registrada do Vue (difícil / oculto / impossível / desencorajado em Angular e React). v-bind: xxx.sync é uma ligação bidirecional entre um componente do Vue e seu pai]. O estado permanece encapsulado. 'Pertence' ao pai. Isto não é necessariamente melhor!
bbsimonbb 11/01/19
45

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/

Madmadi
fonte
'se você alterar o valor de entrada, os dados vinculados serão alterados e vice-versa. '- não consigo entender a parte' vice-versa 'mesmo do exemplo de violino. você pode explicar isso?
Istiaque Ahmed 01/01
se você alterar o valor de entrada por meio do elemento, os dados associados serão alterados e também se você alterar os dados associados por exemplo, por meio das APIs do Vue, seu valor do elemento de entrada será alterado.
Madmadi 5/01
como alterar dados vinculados por meio da API do Vue?
Istiaque Ahmed
No exemplo, digamos que temos um método que altera o data_source assimthis.data_source = 'Some new value'
Madmadi
com data_source, você quer dizer o HTML injetado no DOM input, certo?
Istiaque Ahmed
3

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>
Prashant Gurav
fonte
'modelo v é ligação de dados bidirecional': quais são essas duas maneiras especificamente?
Istiaque Ahmed 01/01
2
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

sda87
fonte
1

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>

Vincent Tang
fonte