Vinculando Dados - 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 objeto 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.

Exemplo de interpolação com expressões em Vue.js

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>

Exemplo de interpolação dos valores retornados por métodos em Vue.js

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>.

Exemplo de vinculação de valores a atributos em Vue.js

É 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.

Exemplo de renderização de valor como HTML e como texto em Vue.js