Aqui está o que você precisa saber sobre vinculação de dados no Vue
Aprenda como usar vinculação de dados no Vue com diretivas de interpolação, v-bind e v-model.
A vinculação de dados em aplicativos web cria um link entre a instância do aplicativo e a UI (interface do usuário). A instância do aplicativo gerencia dados, comportamento e componentes, enquanto a UI representa o aspecto visual com o qual os usuários interagem. A vinculação de dados permite criar aplicativos da web dinâmicos.
Aqui, você explorará várias ligações no Vue, incluindo ligações unidirecionais e bidirecionais. Você também aprenderá a implementar essas ligações com modelos e diretivas bigode, como v-bind e v-model.
Interpolação em Vue
A interpolação é um dos tipos mais populares de vinculação de dados do Vue. A interpolação permite que você exiba valores de dados em suas tags HTML (Hyper Text Markup Language) com o modelo bigode, popularmente indicado com chaves duplas ({{ }}).
Com o modelo bigode, você pode integrar conteúdo dinâmico do aplicativo, como dados e propriedades de método, em seu HTML. Você pode conseguir isso colocando dados ou nomes de propriedades de métodos do objeto de opções no Vue entre chaves.
Aqui está um exemplo de um aplicativo Vue utilizando o modelo bigode para obter interpolação no Vue:
<body>
<div id="app">
<h1>{{ title }}</h1>
<p>{{ text.toUpperCase() }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
title: "Welcome",
text: "This is your world?",
};
},
});
app.mount("#app");
</script>
</body>
O bloco de código acima usa o modelo bigode para exibir o valor da propriedade title no objeto de dados do aplicativo Vue. Você também pode exibir resultados de expressões JavaScript com interpolação. Por exemplo, a expressão {{text.toUpperCase()}} na tag p exibe a versão em maiúscula do valor do texto, conforme mostrado na imagem abaixo:
Quando você monta um aplicativo Vue, o Vue avalia expressões nos modelos e renderiza os valores resultantes no corpo HTML. Quaisquer alterações nas propriedades dos dados atualizam os valores correspondentes na UI.
Por exemplo:
<script>
const app = Vue.createApp({
data() {
return {
title: "Hello",
text: "This is your world?",
};
},
});
app.mount("#app");
</script>
O bloco de código acima altera a propriedade title para “Hello”. Essa mudança será refletida automaticamente na UI, já que o aplicativo Vue vincula a propriedade title ao elemento da UI, conforme mostrado abaixo:
A interpolação só gera dados quando as chaves duplas estão entre a abertura e o fechamento das tags HTML.
Vinculação de dados unidirecional com a diretiva v-bind
Assim como a interpolação, a vinculação de dados unidirecional vincula a instância do aplicativo à IU. A diferença é que ele vincula propriedades como dados e métodos a atributos HTML.
A vinculação de dados unidirecional oferece suporte ao fluxo unidirecional de dados, evitando que os usuários façam alterações que afetem as propriedades dos dados na instância do aplicativo. Isso é útil quando você deseja exibir dados para o usuário do aplicativo, mas evita que o usuário os modifique.
Você pode obter vinculação de dados unidirecional no Vue com a diretiva v-bind ou seu caractere abreviado (:):
<!-- the v-bind directive -->
<input type="text" v-bind:value="text">
<!-- the : shorthand character -->
<input type="text" :value="text">
O bloco de código mostra o uso da diretiva v-bind e sua abreviação para vincular o valor da tag HTML de entrada a uma propriedade de dados de texto. Aqui está um exemplo de aplicativo Vue utilizando a diretiva v-bind para obter vinculação de dados unidirecional:
<body>
<div id="app">
<input type="text" v-bind:value="text">
<p>{{ text }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!'
}
}
})
app.mount('#app')
</script>
</body>
Acima, um campo de entrada e um elemento de parágrafo exibem o valor da propriedade text. O atributo value do campo de entrada está vinculado à propriedade text usando a diretiva v-bind.
Este bloco de código cria uma ligação unidirecional, onde as alterações na propriedade text atualizarão o valor do campo de entrada, mas as alterações feitas no campo de entrada não atualizarão a propriedade text na instância do aplicativo Vue.
Para mostrar isso, podemos começar com o valor inicial da propriedade text, “Vue é incrível!”:
Após alterar o valor do campo de entrada para “Hello World!”, observe que o aplicativo Vue não foi atualizado e o texto na tag do parágrafo permaneceu o mesmo:
No entanto, quando alteramos o valor da propriedade text para Hello World! na instância do aplicativo Vue em vez de no campo de entrada, o campo de entrada é atualizado para refletir o novo valor:
Essa forma de vincular dados é útil em cenários em que você deseja exibir dados ao usuário, mas evita que o usuário os modifique diretamente. Aproveitando o v-bind no Vue.js, você pode estabelecer uma ligação unidirecional, conectando facilmente os dados do seu aplicativo aos elementos da UI.
Vinculação de dados bidirecional com a diretiva v-model
A vinculação de dados bidirecional permite que alterações no valor de um elemento da UI sejam refletidas automaticamente no modelo de dados subjacente e vice-versa. A maioria das estruturas JavaScript de front-end, como Angular, utiliza ligação bidirecional para compartilhar dados e lidar com eventos em tempo real.
Vue.js torna possível a ligação bidirecional com a diretiva v-model. A diretiva v-model cria uma ligação de dados bidirecional entre um elemento de entrada de formulário e uma propriedade de dados. Quando você digita em um elemento de entrada, o valor é atualizado automaticamente na propriedade de dados e qualquer alteração na propriedade de dados também atualizará o elemento de entrada.
Aqui está um exemplo de aplicativo Vue que utiliza a diretiva v-model para obter vinculação de dados bidirecional:
<head>
<title>Two-way data binding in Vue</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="text">
<p>{{ text }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!'
}
}
})
app.mount('#app')
</script>
</body>
O bloco de código acima possui um elemento de entrada com a diretiva v-model vinculando-o à propriedade de dados text. A propriedade text é inicialmente definida como "Vue é incrível!".
O campo de entrada atualiza a propriedade do texto quando você digita nele e reflete as alterações na propriedade do texto na tag p. Vue.js usa a diretiva v-model e o elemento input para obter ligação de dados bidirecional.
Enquanto o v-bind permite a comunicação unidirecional do aplicativo Vue para a UI, o v-model fornece comunicação bidirecional entre o aplicativo Vue e a UI. Devido à sua capacidade de permitir a comunicação bidirecional, o modelo v é frequentemente usado ao trabalhar com elementos de formulário no Vue.
Amplie sua experiência na construção de aplicativos Vue
Você aprendeu sobre vinculação de dados no Vue, incluindo interpolação e as diretivas v-bind e v-model. Essas vinculações de dados são essenciais, pois servem como base para aplicativos Vue.
Vue tem muitas outras diretivas para casos de uso, como renderização de lista, vinculação de eventos e renderização condicional. Compreender as diretivas Vue ajuda você a construir um front-end dinâmico e interativo para suas aplicações web.