Phenquestions
Vue.js é uma biblioteca fácil de aprender e acessível. Assim, com o conhecimento de HTML, CSS e Javascript, podemos começar a construir aplicativos da web no Vue.js. Vue.js é construído combinando os melhores recursos de um Angular e frameworks react já existentes.
A vinculação de dados é um dos recursos mais elegantes do Vue.js porque fornece ligação de dados reativa / bidirecional. In Vue.js, não precisamos escrever muitas linhas para ter ligação de dados bidirecional, ao contrário de outros frameworks. A vinculação de dados unilateral significa que a variável está apenas vinculada ao DOM. Por outro lado, bidirecional significa que a variável também está vinculada ao DOM. Quando o DOM é alterado, a variável também é alterada. Então, vamos dar uma olhada em ambas as ligações de dados e ver a diferença certa.
Vinculação de dados unilateral
Se quisermos vincular qualquer variável, podemos simplesmente usar o Vue.sintaxe de chaves duplas de js ou sintaxe "Mustache" para vincular qualquer variável da instância do componente relativo.
linuxhintText
Ou, se quisermos vincular qualquer variável dentro de um atributo HTML, podemos usar o v-bind diretriz.
Vue.js também fornece a abreviação para variáveis de ligação em um atributo HTML. Em vez de escrever v-bind: attribute-name, só podemos usar dois-pontos “:” e o nome do atributo.
Mas essas são apenas ligações de dados. Para demonstrar a vinculação de dados bidirecional, podemos usar o modelo v diretiva fornecida pela Vue.js.
Vinculação de dados bidirecional / reativa
Para demonstrar a vinculação de dados reativa, podemos usar o modelo v diretiva em um campo de formulário de entrada. Ele emitirá internamente um evento e mudará a variável. Para o qual podemos ligar em outro lugar no modelo usando chaves duplas ou sintaxe de “bigode”.
Você está digitando: linuxhintText
Agora, sempre que inserimos um caractere no campo do formulário de entrada, podemos ver que a variável também está atualizando simultaneamente.
Empacotando
Neste artigo, aprendemos como vincular variáveis no Vue.js usando chaves duplas ou sintaxe de “bigode”. Também demonstramos a ligação bidirecional / reativa de dados no Vue.js usando a diretiva v-model. Depois de ler este artigo, a vinculação de dados não é mais uma tarefa difícil para um iniciante que acabou de começar com o Vue.js. Então, continue aprendendo os conceitos do Vue.js com linuxhint.com. Obrigada!
