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?
javascript
mvvm
frameworks
vue.js
frontend
Gustavo Dias
fonte
fonte
v-model
é usado principalmente para lances de entrada e formulário, portanto, use-o ao lidar com vários tipos de entrada.v-bind
A 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.<div v-bind:class="{ active: isActive }"></div>
- você não pode vincular o atributo html usando o modelo, deve usar av-bind
diretiva. Para os elementos do formulário, você desejará usar av-model
diretiva - "ela seleciona automaticamente a maneira correta de atualizar o elemento com base no tipo de entrada".data
eprops
...Respostas:
A partir daqui - Lembre-se:
é essencialmente o mesmo que:
ou (sintaxe abreviada):
Assim
v-model
é uma ligação bidirecional para entradas de formulário . Ele combinav-bind
, o que traz um valor js para a marcação ev-on:input
para atualizar o valor js .Use
v-model
quando puder. Usev-bind
/v-on
quando 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 usarv-model
cominput type=date
se 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-model
tem 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-input
disparará com muito mais frequência.v-model
também tem modificadores.lazy
,.trim
,.number
, coberto na doc .fonte
v-model
ev-bind:xxx.sync
?Em palavras simples,
v-model
para 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/
fonte
this.data_source = 'Some new value'
data_source
, você quer dizer o HTML injetado no DOMinput
, certo?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
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="">
fonte
Espero que isso ajude você com o entendimento básico
fonte
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-model
e divida-o conforme a resposta acima indicaNa 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:
fonte