Agora que você conhece a estrutura de um arquivo .vue, chegou a hora de colocar dados na tela. Nesta página vamos ver a interpolação com {{ }} e os dois pilares da reatividade no Vue: o ref e o computed.

Variáveis no script e interpolação {{ }}

Tudo o que você cria no <script setup> pode ser exibido no template usando chaves duplas:

<script setup>
const name = 'Gumball';
const age = 12;
</script>

<template>
    <p>{{ name }} tem {{ age }} anos.</p>
</template>

Dentro de {{ }} cabe qualquer expressão JavaScript:

<script setup>
const firstName = 'Gumball';
const lastName = 'Watterson';
const age = 12;
</script>

<template>
    <p>{{ firstName + ' ' + lastName }}</p>
    <p>{{ `${firstName} ${lastName}` }}</p>
    <p>{{ firstName.toUpperCase() }}</p>
    <p>Daqui a 5 anos terá {{ age + 5 }} anos.</p>
    <p>{{ age >= 18 ? 'Adulto' : 'Criança' }}</p>
</template>

<aside> ⚠️ Dentro de {{ }} só cabem expressões. Comandos como if e for não funcionam. Para isso existem as diretivas v-if e v-for, que veremos na próxima página.

</aside>

Reatividade com ref

Uma variável comum não atualiza a tela quando muda. Se você fizer let count = 0 e depois count++, o valor muda na memória, mas o Vue não fica sabendo e o HTML continua igual. Para isso existe o ref, que cria um valor reativo. Crie um arquivo Counter.vue:

<script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
    count.value++;
}
</script>

<template>
    <p>Cliques: {{ count }}</p>
    <button @click="increment">Clicar</button>
</template>

Cada clique no botão chama a função increment, que altera o count. Como ele é reativo, o Vue atualiza o parágrafo automaticamente.

Existem duas regras importantes sobre o ref:

No script, use .value para ler ou alterar o valor: count.value++;
No template, use sem .value, pois o Vue desembrulha o ref sozinho: {{ count }}.

<aside> 💡 No Vue puro, é preciso importar: import { ref } from 'vue'. No Nuxt, ref, computed e outras funções do Vue são importadas automaticamente, então você não precisa escrever esse import.

</aside>

computed: valores derivados