Vue.js 3.x – 03 – Binding
ATENÇÃO! Para acessar o post anterior a este, em que abordo a estrutura de pastas de arquivos do Vue, além do fluxo da aplicação. Clique aqui.
O conceito de binding (vinculação) consiste em vincular os elementos do bloco template aos blocos script e style.
Uma vez que os elementos estão vinculados, a aplicação se torna reativa, ou seja, qualquer mudança no bloco template reflete uma mudança no bloco script, e vice-versa. Esse é o conhecido two-way binding do Vue.
É possível fazer o binding entre de textos estáticos, variáveis, elementos e atributos HTML, além de estilos CSS.
O binding é normalmente feito por meio das diretivas que são atributos HTML personalizados.
Vamos aos exemplos
Antes de iniciar, para manter o exemplo o mais simples possível, faça o seguinte:
- Exclua o arquivo src/components/HelloWord.vue;
- Remova as referências aos arquivo excluído no arquivo src/App.vue de maneira que ele fique como o código a seguir. O bloco style pode ser preservado como está.
<template>
<div>
<!-- elementos HTML aqui -->
</div>
</template>
<script>
export default {
//..o nome do componente
name: 'App',
//..demais propriedades de dados aqui
}
</script>Fazendo o binding com valores simples
Com pode ser observado no código a seguir, o bloco template
Como pode ser observado no código a seguir, na linha 3 o elemento <h1> possui um binding com uma propriedade de dados title, que é o retorno da função data(){...} do bloco script (linha 15). Observe a notação “mustache” (bigode duplo – double curly braces)
É importante ressaltar que função data(){...} pode retornar um valor simples, como no exemplo a seguir, array, um objeto ou conjunto de objetos, sempre em formato JSON.
Assim, podemos dizer que a declaração {{ title }} no bloco template está ligada (binding) à propriedade title do bloco script.
<template>
<div>
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
//..o nome do componente
name: 'App',
//..dados do componente - função data()
data() {
return {
//..dados declarados em formato JSON
title : "Introdução ao Vue.js"
}
}
}
</script>Abra o projeto no browser e verifique o resultado:
Binding com a diretiva v-text
As diretivas são atributos HTML especiais com o prefixo “v-” que podem ser usados para fazer o binding e executar expressões Javascript.
No código a seguir, foi criada a data property site no objeto data, e depois, no bloco template, usando a diretiva v-text foi realizado o binding com o elemento <p> (linha 6).
<template>
<div>
<!-- sintaxe mustache - interpolação de variáveis -->
<h1>Bem vindo à {{ title }} !!!</h1>
<!-- diretiva v-text - associa o elemento a uma data property -->
<h2 v-text="name"></h2>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
//..dados declarados em formato JSON
title : "Introdução ao Vue.js",
name: 'Jorge Luís Gregório'
}
}
}
</script>Note que o elemento <p> está vazio, pois o seu conteúdo será inserido por meio da diretiva v-text.
Resumindo: use a sintaxe mustache para interpolar partes do texto e a diretiva v-text para inserir todo o conteúdo de texto em um elemento HTML. Veja o resultado do código anterior no browser.
A diretiva v-html
Às vezes será necessário fazer o binding em textos que contém marcação HTML. Isso não funciona com diretiva v-text nem com a sintaxe mustache. Para isso será necessário usarmos a diretiva v-html.
No código a seguir, criamos uma data property ‘description‘, em que passamos uma string que contém marcação HTML. Para que a marcação seja corretamente interpretada, usamos a diretiva v-html.
<template>
<div>
<h1>Bem vindo à {{ title }} !!!</h1>
<h2 v-text="name"></h2>
<!-- a diretiva v-html - em alguns casos é necessário
usar uma self-close tag -->
<p v-html="description" />
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
//..dados declarados em formato JSON
title : "Introdução ao Vue.js",
name: 'Jorge Luís Gregório',
//..string contendo marcação HTML
description: 'Vamos aprender o <strong>framework</strong> <em>Vue.js</em>',
}
}
}
</script>O resultado do código anterior no browser deve ser como a seguir:
Cuidado com a diretiva v-html! Renderize somente conteúdos confiáveis, pois é possível renderizar conteúdos maliciosos aos usuários.
Binding em atributos HTML com a diretiva v-bind
A diretiva v-bind permite vincular atributos HTML a propriedades do objeto data. No exemplo a seguir, criamos uma data property chamada site (linha 20) e vinculamos ao atributo href do elemento <a> do template (linha 7).
<template>
<div>
<h1>Bem vindo à {{ title }} !!!</h1>
<h2 v-text="name"></h2>
<p v-html="description" />
<!-- usando v-bind para vincular atributos HTML a data properties -->
<p> <a v-bind:href="site">Visite meu site!</a> </p>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
//..dados declarados em formato JSON
title : "Introdução ao Vue.js",
name: 'Jorge Luís Gregório',
description: 'Vamos aprender o <strong>framework</strong> <em>Vue.js</em>',
site: 'https://www.jlgregorio.com.br'
}
}
}
</script>O resultado do código anterior deve ser como mostrado a seguir.
Testando a reatividade do Vue
Como dito nos posts anteriores, o Vue é um framework reativo, ou seja, qualque mudança nos dados reflete na visualização, e vice-versa.
Para testar, vamos usar a extensão Vue.js DevTools, nos navegadores Chrome ou no Firefox.
No navegador, pressione F12 para abrir o inspetor de códigos, vá até a guia Vue e, ao lado esquerdo, clique no elemento <App>. Após isso, do lado direito será exibido o dados que podem ser editados. Edite-os e veja o navegador reagindo, como no gif animado a seguir.
Considerações finais
Neste post aprendemos o básico sobre o two-way binding do Vue, como vincular elementos e atributos do bloco template (camada visual) ao bloco script (camada lógica). Também vimos a reatividade do Vue usando a extensão Vue.js Dev Tools.
No próximo post iremos aprender como fazer o binding com o bloco CSS, o que nos dá um grande poder de estilização dinâmica nas aplicações. Até a próxima!
Se gostou desse conteúdo, comente e compartilhe com seus amigos.
