Vinculando Dados no Vue.js
Vue.js permite estabelecer vinculação entre os elementos de uma página da web e os dados de um objeto Vue. Há diversas formas de realizar essa vinculação.
Interpolação
A forma mais básica de vinculação é a interpolação, onde o valor vinculado é envolvido por chaves duplas {{}}. Um exemplo simples de interpolação está apresentado abaixo:
<!DOCTYPE html>
<html>
<head>
<title>Estudando Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ name }} - {{ age }}</p>
</div>
<script>
Vue.createApp({
data() {
return { name: "Tom", age: 36 };
},
}).mount("#app");
</script>
</body>
</html>Ao renderizar o conteúdo, as expressões dentro das chaves {{ }} são substituídas pelos valores correspondentes. Nesse caso, as variáveis name e age são vinculadas aos seus respectivos valores definidos no data.
Expressões na Interpolação
A interpolação suporta o uso de expressões JavaScript, o que permite adicionar lógica diretamente ao HTML. No exemplo abaixo, uma condição avalia a idade e exibe um texto de forma condicional:
<!DOCTYPE html>
<html>
<head>
<title>Estudando Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ age > 25 ? 'Mais de 25 anos' : '25 anos ou menos' }}</p>
</div>
<script>
Vue.createApp({
data() {
return { name: "Tom", age: 36 };
},
}).mount("#app");
</script>
</body>
</html>Nesse caso, a expressão age > 25 ? 'Mais de 25 anos' : '25 anos ou menos' é avaliada e o resultado é exibido na página.
Métodos no Objeto Vue
Além de variáveis e expressões, é possível interpolar os valores retornados por métodos definidos no objeto Vue. O exemplo a seguir utiliza métodos para retornar mensagens personalizadas:
<!DOCTYPE html>
<html>
<head>
<title>Estudando Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ sayHi() }}</p>
<p>15 horas: {{ welcome(15) }}</p>
<p>22 horas: {{ welcome(22) }}</p>
</div>
<script>
Vue.createApp({
data() {
return { name: "Tom", age: 36 };
},
methods: {
sayHi() {
return `Olá, meu nome é ${this.name}`;
},
welcome(hour) {
if (hour > 18) return "Boa noite.";
if (hour > 12) return "Boa tarde.";
return "Bom dia.";
},
},
}).mount("#app");
</script>
</body>
</html>
O método sayHi retorna uma saudação que inclui o valor da propriedade name. Já o método welcome recebe um parâmetro que representa a hora do dia e retorna uma mensagem correspondente. Na interpolação, é possível passar parâmetros para métodos, ajustando o comportamento de acordo com a necessidade.
v-text
Para exibir valores simples, o atributo v-text pode ser usado como alternativa à interpolação. Ele associa um valor a ser exibido diretamente em um elemento HTML:
<!DOCTYPE html>
<html>
<head>
<title>Estudando Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-text="name"></div>
<div v-text="age"></div>
</div>
<script>
const vueApp = Vue.createApp({
data() {
return { name: "Tom", age: 36 };
},
}).mount("#app");
</script>
</body>
</html>Neste exemplo, os valores de name e age são exibidos diretamente nos elementos <div> usando o atributo v-text.
Vinculação a Atributos
Para associar valores a atributos de elementos HTML, a diretiva v-bind é utilizada. Um exemplo básico está apresentado abaixo:
<!DOCTYPE html>
<html>
<head>
<title>Estudando Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<a v-bind:href="link" v-bind:title="title">{{ text }}</a>
</div>
<script>
Vue.createApp({
data() {
return { text: "Google", title: "google.com", link: "https://google.com" };
},
}).mount("#app");
</script>
</body>
</html>Após v-bind, é especificado o nome do atributo que será vinculado. Nesse caso, os valores de link e title são associados aos atributos href e title do elemento <a>.
É possível utilizar uma forma abreviada de v-bind, substituindo-o por ::
<a :href="link" :title="title">{{ text }}</a>Vinculação Única
Por padrão, quando o valor de uma propriedade vinculada é alterado, a interface é atualizada automaticamente para refletir o novo valor. No entanto, para exibir apenas o valor inicial de uma propriedade sem atualizações subsequentes, a diretiva v-once pode ser usada:
<!DOCTYPE html>
<html>
<head>
<title>Estudando Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p v-once>{{ message }}</p>
</div>
<script>
const vueApp = Vue.createApp({
data() {
return { message: "Hello" };
},
}).mount("#app");
vueApp.message = "Goodbye";
console.log(vueApp.message); // Goodbye
</script>
</body>
</html>Mesmo que o valor de message seja alterado, o texto exibido permanecerá como "Hello", pois v-once instrui o Vue a renderizar o valor inicial apenas uma vez.
Vinculação ao HTML
Para associar um elemento diretamente ao código HTML, a diretiva v-html pode ser usada. O exemplo abaixo ilustra o uso dessa diretiva:
<!DOCTYPE html>
<html>
<head>
<title>Estudando Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-html="message"></div>
<div>{{ message }}</div>
</div>
<script>
const vueApp = Vue.createApp({
data() {
return { message: "<h2>Hello</h2>" };
},
}).mount("#app");
</script>
</body>
</html>Com a diretiva v-html, o valor vinculado é tratado como código HTML e renderizado como tal. Em contraste, ao utilizar interpolação simples, o código HTML será exibido como texto literal. Neste exemplo, o conteúdo de v-html renderiza um elemento <h2> enquanto a interpolação exibe o código como uma string comum.
Documentação oficial: