Vue.JS Ligação de dados

Vue.JS é uma biblioteca tão fácil de aprender e acessível. Portanto, com o conhecimento de HTML, CSS e JavaScript, podemos começar a criar aplicativos da Web em Vue.JS. Vue.O JS é construído combinando os melhores recursos de uma estrutura angular e reagida já existente.

A ligação de dados é uma das características mais elegantes do VUE.JS porque fornece ligação de dados reativa/bidirecional. Em vue.JS, não precisamos escrever muitas linhas para ter ligação de dados bidirecional, ao contrário de outras estruturas. A ligação de dados unidirecional significa que a variável está ligada ao DOM. Por outro lado, de mão dupla significa que a variável também está vinculada ao DOM. Quando Dom é alterado, a variável também é alterada. Então, vamos dar uma olhada nas duas ligações de dados e ver a diferença certa.

Ligação de dados unidirecional

Se queremos vincular qualquer variável, podemos simplesmente usar o VUE.Sintaxe de Brace Double Curly Braces da JS ou Sintaxe "Bigode" para ligar qualquer variável da instância de componente relativo.

linuxhintText

Ou, se queremos vincular qualquer variável dentro de um atributo html, podemos usar o V-Bind diretivo.

Vue.O JS também fornece a abreviação para variáveis ​​de ligação em um atributo html. Em vez de escrever V-Bind: Nome do atributo, Só podemos usar um cólon “:” e o nome do atributo.

Mas essas são apenas ligações de dados. Para demonstrar a ligação de dados bidirecional, podemos usar o Model V Diretiva fornecida pelo Vue.JS.

Ligação de dados bidirecional/reativa

Para demonstrar a ligação de dados reativos, podemos usar o Model V Diretiva em um campo de formulário de entrada. Ele emitirá internamente um evento e mudará a variável. Ao qual podemos vincular em outro lugar no modelo usando aparelhos duplos encaracolados ou sintaxe "bigode".

Você está digitando: linuxhintText

Agora, sempre que entramos em um personagem no campo de formulário de entrada, podemos ver que a variável também está atualizando simultaneamente.

Empacotando

Neste artigo, aprendemos como vincular variáveis ​​em Vue.JS usando aparelhos duplos encaracolados ou sintaxe "bigode". Também demonstramos a ligação de dados de duas vias/reativos em Vue.JS usando a diretiva V-Model. Depois de ler este artigo, a ligação de dados não é mais uma tarefa difícil para um iniciante que acabou de começar com Vue.JS. Então, continue aprendendo os conceitos de vue.JS com Linuxhint.com. Obrigado!