Aqui está o que você precisa saber sobre vinculação de dados no Vue

A vinculação de dados em aplicativos da Web cria um link entre a instância do aplicativo e a IU (interface do usuário). A instância do aplicativo gerencia dados, comportamento e componentes, enquanto a interface do usuário representa o aspecto visual com o qual os usuários interagem. A vinculação de dados permite que você crie aplicativos da Web dinâmicos.

Aqui, você explorará vários vínculos no Vue, incluindo vínculos unidirecionais e bidirecionais. Você também aprenderá a implementar essas vinculações com modelos e diretivas de 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 Hyper Text Markup Language (HTML) com o modelo de bigode, popularmente denotado por chaves duplas ({{ }}).

Com o modelo bigode, você pode integrar o conteúdo do aplicativo dinâmico, como dados e propriedades do método em seu HTML. Você pode conseguir isso incluindo dados ou nomes de propriedade de método do

objeto de opções em Vue dentro dessas chaves.

Aqui está uma instância de um aplicativo Vue utilizando o modelo de bigode para obter a interpolação no Vue:

<corpo>
<diveu ia="aplicativo">
<h1>{{ título }}h1>
<p>{{ text.toUpperCase() }}p>
div>
<roteiro>
 app const = Vue.createApp({
 dados() {
 retornar {
 título: "Bem-vindo",
 texto: "Este é o seu mundo?",
 };
 },
 });
 app.mount("#app");
roteiro>
corpo>

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 os resultados da expressão JavaScript com interpolação. Por exemplo, o {{text.toUpperCase()}} expressão no p tag exibe a versão em maiúsculas do valor do texto, conforme mostrado na imagem abaixo:

Quando você monta um aplicativo Vue, o Vue avalia as expressões nos modelos e renderiza os valores resultantes no corpo HTML. Quaisquer alterações nas propriedades de dados atualizam os valores correspondentes na interface do usuário.

Por exemplo:

<roteiro>
 app const = Vue.createApp({
 dados() {
 retornar {
 título: "Olá",
 texto: "Este é o seu mundo?",
 };
 },
 });
 app.mount("#app");
roteiro>

O bloco de código acima altera a propriedade do título para “Olá". Essa alteração será refletida automaticamente na interface do usuário, pois o aplicativo Vue vincula a propriedade title ao elemento da interface do usuário, conforme mostrado abaixo:

A interpolação só gera dados quando os colchetes duplos estão entre as tags HTML de abertura e fechamento.

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 à interface do usuário. A diferença é que vincula propriedades como dados e métodos a atributos HTML.

A vinculação de dados unidirecional oferece suporte ao fluxo unidirecional de dados, impedindo que os usuários façam alterações que afetem as propriedades de dados na instância do aplicativo. Isso é útil quando você deseja exibir dados para o usuário do aplicativo, mas impedir que o usuário os modifique.

Você pode obter ligação de dados unidirecional no Vue com o v-bind diretiva ou seu caractere abreviado (:):

 a diretiva v-bind 
<entradatipo="texto"v-bind: valor="texto">
 o: caractere abreviado 
<entradatipo="texto":valor="texto">

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 um aplicativo Vue utilizando o v-bind diretiva para obter vinculação de dados unidirecional:

<corpo>
<diveu ia="aplicativo">
<entradatipo="texto"v-bind: valor="texto">
<p>{{ texto }}p>
div>
<roteiro>
 app const = Vue.createApp({
 dados() {
 retornar {
 texto: 'Vue é incrível!'
 }
 }
 })
 app.mount('#app')
roteiro>
corpo>

Acima, um campo de entrada e um elemento de parágrafo exibem o valor do texto propriedade. O valor atributo do campo de entrada é vinculado à propriedade de texto usando o v-bind diretiva.

Este bloco de código cria uma ligação unidirecional, onde as alterações no texto propriedade atualizará o valor do campo de entrada, mas as alterações feitas no campo de entrada não atualizarão o texto propriedade na instância do aplicativo Vue.

Para mostrar isso, podemos começar com o valor inicial do texto propriedade, "Vue é incrível!”:

Após alterar o valor do campo de entrada para “Olá Mundo!", observe que o aplicativo Vue não foi atualizado e o texto na tag de parágrafo permaneceu o mesmo:

No entanto, quando alteramos o valor do texto propriedade para Olá Mundo! na instância do aplicativo Vue em vez do campo de entrada, o campo de entrada é atualizado para refletir o novo valor:

Essa maneira de vincular dados é útil em cenários em que você deseja exibir dados para o usuário, mas impede 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 interface do usuário.

Ligação de dados bidirecional com a diretiva v-model

A vinculação de dados bidirecional permite que as alterações no valor de um elemento da interface do usuário sejam refletidas automaticamente no modelo de dados subjacente e vice-versa. Mais front-end estruturas JavaScript como Angular utiliza ligação bidirecional para compartilhar dados e lidar com eventos em tempo real.

O Vue.js possibilita a vinculação bidirecional com o modelo v diretiva. O modelo v A diretiva 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 um aplicativo Vue que utiliza o modelo v diretiva para obter ligação de dados bidirecional:

<cabeça>
<título>Ligação de dados bidirecional no Vuetítulo>
<roteiroorigem=" https://unpkg.com/vue@3/dist/vue.global.js">roteiro>
cabeça>
<corpo>
<diveu ia="aplicativo">
<entradatipo="texto"modelo v="texto">
<p>{{ texto }}p>
div>
<roteiro>
 app const = Vue.createApp({
 dados() {
 retornar {
 texto: 'Vue é incrível!'
 }
 }
 })
 app.mount('#app')
roteiro>
corpo>

O bloco de código acima tem um elemento de entrada com o modelo v directiva que o vincula ao texto propriedade de dados. O texto propriedade é inicialmente definida como "Vue é incrível!".

O campo de entrada atualiza a propriedade de texto quando você digita nele e reflete as alterações na propriedade de texto no p marcação. Vue.js usa a diretiva v-model e o elemento de entrada para obter ligação de dados bidirecional.

Enquanto o v-bind permite comunicação unidirecional do aplicativo Vue para a interface do usuário, o v-model fornece comunicação bidirecional entre o aplicativo Vue e a interface do usuário. Devido à sua capacidade de permitir a comunicação bidirecional, 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 dos aplicativos Vue.

O Vue tem muitas outras diretivas para casos de uso, como renderização de lista, vinculação de evento e renderização condicional. Entender as diretivas do Vue ajuda você a construir um front-end dinâmico e interativo para seus aplicativos da web.