Sintaxe de templates

O VueJs permite a criação de templates HTML que são renderizados dinamicamente com base nos dados da aplicação. Essa renderização é feita de forma declarativa, ou seja, o desenvolvedor declara o que deve ser renderizado, e não como deve ser renderizado. Isso permite que o VueJs faça o trabalho de atualizar a interface do usuário de forma eficiente. Todas as templates são sintaticamente válidas no HTML, e podem ser usadas em qualquer lugar que aceite HTML.

Em linhas gerais, todas as templates do VueJs são compiladas para funções JavaScript puras, o que as torna muito rápidas. A seguir, veremos alguns exemplos de templates e o seu uso.

Interpolações

Esta seção apresenta as interpolações de texto, HTML puro e expressões JavaScript.

Interpolação de texto

A interpolação de texto é a forma mais básica de renderização de dados. Ela permite a renderização de dados em texto simples. Para isso, basta usar a sintaxe {{ variavel }}, também conhecida como mustache. Considere o exemplo abaixo:

<span>Valor do contador: {{contador}}</span>

O código acima renderiza o valor da variável contador no elemento <span>. Se o valor da variável contador for 10, o código acima será renderizado como:

<span>Valor do contador: 10</span>

HTML puro

O padrão de interpolação de texto não é adequado para renderizar HTML puro. Para isso, o VueJs oferece a diretiva v-html. Considere o exemplo abaixo:

<script setup>
  const rawHtml = '<span style="color: red">Este é um texto em vermelho</span>';
</script>
<template>
  <p>Usando interpolação de textos: {{rawHtml}}</p>
  <p>Usando v-html: <span v-html="rawHtml"></span></p>
</template>

O código acima renderiza o seguinte HTML:

Usando interpolação de textos: <span style="color: red"> Este é um texto em vermelho </span>

Usando v-html: Este é um texto em vermelho

Neste exemplo, a interpolação de texto renderiza o HTML como texto, enquanto a diretiva v-html renderiza o HTML como HTML. No segundo caso, o conteúdo do elemento <span> é renderizado com o valor de rawHtml e interpretado como HTML puro.

Uma observação

No VueJS, o atributo v-html é chamado de diretiva. Diretivas são atributos especiais que começam com v- e que são usados para modificar o comportamento de um elemento. Diretivas são usadas para renderizar dados, modificar o comportamento de um elemento, ou modificar o comportamento de um elemento de acordo com o estado da aplicação. As diretivas serão abordadas em detalhes em outro momento.

Expressões JavaScript

O VueJs permite a renderização de expressões JavaScript. Para isso, basta usar a sintaxe {{ expressao }}. As expressões JavaScript são avaliadas em tempo de execução, ou seja, o resultado é renderizado no template de acordo com o valor da expressão no momento da renderização. Considere o exemplo abaixo:

<script setup>
  const numero = 1;
  const ok = true;
  const mensagem = 'programar';
</script>

<template>
  <p>{{ numero + 1 }}</p>
  <p>{{ ok ? 'Sim' : 'Não' }}</p>
  <p>{{mensagem.split('').reverse().join('') }}</p>
</template>

As expressões acima são avaliadas como uma expressão Javascript e o resultado é renderizado no template. No primeiro caso, o resultado é 2, no segundo caso, o resultado é Sim, e no terceiro caso, o resultado é ramargorp.

Nos templates, você pode usar qualquer expressão JavaScript válida. Isso inclui operadores aritméticos, lógicos, condicionais, até funções JavaScript, como Math.max(), Math.min(), etc. As expressões JavaScript podem ser usadas nos seguintes lugares:

• Interpolação de texto
• Em qualquer diretiva Vue (atributos que começam com v-)

Note que são permitidas apenas expressões JavaScript simples. Não é possível usar declarações de variáveis, bem como controles de fluxo como if, for, etc.

Por fim, é possível invocar funções JavaScript em templates. Considere o exemplo abaixo:

<script setup>
  const mensagem = 'programar';

  function inverter(texto) {
    return texto.split('').reverse().join('');
  }
</script>
<template>
  <p>{{ inverter(mensagem) }}</p>
</template>

No exemplo acima, a função inverter() é invocada em um template. O resultado é renderizado no elemento <p>. Nesse caso, o resultado é ramargorp.

Diretivas

As diretivas são atributos especiais que começam com v-. Elas são usadas para modificar o comportamento de um elemento ou componente. Por exemplo, a diretiva v-if é usada para mostrar ou esconder um elemento baseado em uma expressão. Os valores das diretivas são avaliados em tempo de execução, ou seja, o resultado é renderizado no template de acordo com o valor da expressão no momento da renderização.

Em geral, os valores das diretivas são expressões JavaScript. No entanto, algumas diretivas permitem outros valores, como v-for, v-bind, v-on e v-slot, que serão abordados em detalhes em outro momento.

Considere o exemplo abaixo:

<script setup>
  const ok = true;
</script>

<template>
  <div v-if="ok">Mostrar</div>
</template>

Nesse exemplo, o elemento <div> será renderizado se a variável ok for avaliada como true. Caso contrário, o elemento não será renderizado.

A seguir, veremos algumas diretivas que são usadas com mais frequência.

Parâmetros ou argumentos

Algumas diretivas permitem que sejam passados parâmetros ou argumentos. Por exemplo, a diretiva v-bind é usada para associar um atributo de um elemento a uma expressão. O valor do atributo é atualizado sempre que a expressão for atualizada. Por exemplo:

<script setup>
  const url = 'https://vuejs.org/';
</script>

<template>
  <a v-bind:href="url">Mais informações...</a>
</template>

Nesse exemplo, o atributo href do elemento <a> é atualizado sempre que a variável url for atualizada. Inicialmente, o valor do atributo é https://vuejs.org/, mas se o valor da variável for alterado, o atributo também será atualizado.

A diretiva v-bind pode ser usada de forma abreviada, usando apenas o prefixo :. Por exemplo:

<script setup>
  const url = 'https://vuejs.org/';
</script>

<template>
  <a :href="url">Mais informações...</a>
</template>

Outro exemplo de diretiva que permite parâmetros é a diretiva v-on. Essa diretiva é usada para associar um evento de um elemento a uma expressão. Por exemplo:

<script setup>
  function mostrarAlerta {
    alert('Botão clicado!');
  };
</script>

<template>
  <button v-on:click="mostrarAlerta">Clique aqui</button>
</template>

Nesse exemplo, a função mostrarAlerta é executada sempre que o botão for clicado. A diretiva v-on pode ser usada de forma abreviada, usando apenas o prefixo @. Por exemplo:

<script setup>
  function mostrarAlerta {
    alert('Botão clicado!');
  };
</script>
<template>
  <button @click="mostrarAlerta">Clique aqui</button>
</template>

Argumentos dinâmicos

Algumas diretivas permitem que sejam passados argumentos dinâmicos. Por exemplo, a diretiva v-bind permite que sejam passados argumentos dinâmicos, como no exemplo abaixo:

<script setup>
  const url = 'https://vuejs.org/';
  const nomeAtributo = 'href';
</script>

<template>
  <a v-bind:[atribnomeAtributouto]="url">Mais informações...</a>
</template>

Aqui, nomeAtributo é uma variável que contém o nome do atributo que será associado à expressão. Nesse caso, o valor da variável é href, mas poderia ser qualquer outro valor, como src, title, etc. O valor do atributo será atualizado sempre que a variável nomeAtributo for atualizada. No caso do exemplo, essa associação será equivalente a v-bind:href="url".

Esse tipo de associação é muito útil quando se deseja associar um atributo a uma expressão, mas o nome do atributo é dinâmico. Da mesma forma, a diretiva v-on permite que sejam passados argumentos dinâmicos, como no exemplo abaixo:

<script setup>
  const nomeEvento = 'click';

  function mostrarAlerta {
    alert('Botão clicado!');
  };
</script>

<template>
  <button v-on:[nomeEvento]="mostrarAlerta">Clique aqui</button>
</template>

Aqui, nomeEvento é uma variável que contém o nome do evento que será associado à expressão. Nesse caso, o valor da variável é click, mas poderia ser qualquer outro valor, como mouseover, mouseout, etc. A função mostrarAlerta será executada sempre que o evento for disparado. No caso do exemplo, essa associação será equivalente a v-on:click="mostrarAlerta".

Modificadores

Algumas diretivas permitem que sejam passados modificadores. Por exemplo, a diretiva v-on permite que sejam passados modificadores, como no exemplo abaixo:

<script setup>
  function mostrarAlerta {
    alert('Botão clicado!');
  };
</script>

<template>
  <button v-on:click.stop="mostrarAlerta">Clique aqui</button>
</template>

Nesse exemplo, a função mostrarAlerta é executada sempre que o botão for clicado. No entanto, o evento click não será propagado para os elementos pais. Isso significa que o evento não será disparado para os elementos pais, mesmo que esses elementos tenham um evento associado ao evento click.

Um outro exemplo comum é o uso do modificador .prevent:

<template>
  <form v-on:submit.prevent="mostrarAlerta">...</form>
</template>

Nesse exemplo, a função mostrarAlerta é executada sempre que o formulário for submetido. Contudo, o modificador .prevent informa ao Vue para chamar o método event.preventDefault() no evento submit, evitando que o formulário seja submetido.

Exemplos práticos

Nesta seção, vamos ver alguns exemplos práticos do uso de sintaxe de templates. Aqui, considero que você esteja iniciando um novo projeto VueJS para cada exemplo prático que estamos vendo. Ao longo do texto, eu apenas informo o que foi adicionado ou alterado ao projeto.

Exemplo 1 - Mostrando informações

Nesse exemplo, vamos mostrar informações na tela. Para isso, vamos editar o arquivo App.vue e adicionar o seguinte código:

<script setup>
const nome = 'João';
const idade = 25;

function inverter(texto) {
    return texto.split('').reverse().join('');
}

function saudacao() {
    return `Olá, ${nome}!`;
}
</script>

<template>
<div class="info">
    <h1>Exemplo 1 - Mostrando informações na tela</h1>
    <p>Nome: {{ nome }}</p>
    <p>Idade: {{ idade }} anos</p>
    <hr />
    <p>Para completar 50 anos faltam: {{ 50 - idade }} anos</p>
    <p>O nome tem {{ nome.length }} caracteres</p>
    <p>O nome invertido é: {{ inverter(nome) }}</p>
    <hr />
    <p>Exemplo de saudação usando função</p>
    <p>{{ saudacao() }}</p>
</div>
</template>

<style scoped>
.info {
    background-color: rgba(35, 12, 22, 1);
    padding: 20px 30px;
    color: rgb(183, 210, 219);
    border-radius: 10px;
}

h1 {
    color: white;
    font-weight: bold;
    font-size: 1.5em;
}
</style>

Este é um exemplo completo com vários exemplos de uso de sintaxe de templates. O nosso código está dividido em três partes: script, template e style. Vamos ver cada uma delas.

Primeiramente na parte de script:

• const nome = 'João' - declaração de uma constante chamada nome com o valor 'João'
• const idade = 25 - declaração de uma constante chamada idade com o valor 25
• function inverter(texto) { ... } - declaração de uma função chamada inverter que recebe um parâmetro chamado texto. Essa função inverte o texto recebido e retorna o texto invertido.
• function saudacao() { ... } - declaração de uma função chamada saudacao que não recebe parâmetros. Essa função retorna uma saudação com o nome da pessoa.

No bloco de template, temos:

• <div class="info"> - declaração de um elemento div com a classe info. Essa classe é utilizada no bloco de style.
• <h1>Exemplo 1 - Mostrando informações na tela</h1> - declaração de um elemento h1 com o texto Exemplo 1 - Mostrando informações na tela. Essa tag também é personalizada no bloco de style.
• <p>Nome: {{ nome }}</p> - declaração de um elemento p com o texto Nome: e o valor da variável nome. O valor da variável nome é mostrado entre chaves duplas {{ }}. Isso indica que o valor da variável nome será mostrado na tela.
• <p>Idade: {{ idade }} anos</p> - declaração de um elemento p com o texto Idade: e o valor da variável idade.
• <hr /> - declaração de uma linha horizontal.
• <p>Para completar 50 anos faltam: {{ 50 - idade }} anos</p> - declaração de um elemento p com o texto Para completar 50 anos faltam: e o valor da subtração entre 50 e a variável idade. Esse é um exemplo de uma expressão JavaScript realizando uma operação matemática.
• <p>O nome tem {{ nome.length }} caracteres</p> - declaração de um elemento p com o texto O nome tem e o valor da propriedade length da variável nome. Esse é um exemplo de uma expressão JavaScript acessando uma propriedade de um objeto.
• <p>O nome invertido é: {{ inverter(nome) }}</p> - declaração de um elemento p com o texto O nome invertido é: e o valor da função inverter passando a variável nome como parâmetro. Esse é um exemplo de uma expressão JavaScript chamando uma função definida no bloco de script.
• <p> Exemplo de saudação usando função</p> - declaração de um elemento p com o texto Exemplo de saudação usando função.
• <p> {{ saudacao() }} </p> - declaração de um elemento p com o valor da função saudacao. Essa função foi definida no bloco de script e não recebe parâmetros.

Por fim, no bloco de style, temos:

• .info { ... } - declaração de uma classe chamada info. Essa classe é utilizada no bloco de template.
• background-color: rgba(35,12,22,1); - declaração da cor de fundo do elemento com a classe info.
• padding: 20px 30px; - declaração do espaçamento interno do elemento com a classe info.
• color: rgb(183, 210, 219); - declaração da cor do texto do elemento com a classe info.
• border-radius: 10px; - declaração do raio das bordas do elemento com a classe info.
• h1 { ... } - declaração de uma tag h1. Essa tag é personalizada no bloco de template.
• color: white; - declaração da cor do texto do elemento h1.
• font-weight: bold; - declaração do peso da fonte do elemento h1.
• font-size: 1.5em; - declaração do tamanho da fonte do elemento h1.

Este é um exemplo completo para interpolação de variáveis, expressões e funções. Ao executar o VueJs, com o comando npm run dev, o resultado será:

Exercícios

Para fixar o conteúdo apresentado, resolva os exercícios abaixo:

1. Altere os valores de nome e idade para os seus.
2. Mostre o nome invertido em letras maiúsculas.
3. Adicione mais um quadro, com o exemplo do contador que fizemos nas aulas anteriores.
4. Dentro desse quadro, além do contador, faça uma div aparecer quando o valor for maior que 10 e outra quando for menor que 10.
5. Ainda, faça que a div para valores maiores que 10 tenha a cor verde e a outra vermelha.

Correção dos exercícios

Faremos a correção dos exercícios usando a API de composição. Vamos, além disso, corrigir todos os itens num só exemplo. Contudo, sugiro que você tente resolver os exercícios antes de ver a correção.

Correção dos exercícios

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

  const nome = ref('Seu nome');
  const idade = ref(20);
  const contador = ref(0);

  function incrementar() {
    contador.value++;
  }

  function decrementar() {
    if (contador.value > 0) {
      contador.value--;
    }
  }

  function reiniciar() {
    contador.value = 0;
  }

  function inverterTextoEmMaiusculo(texto) {
    return texto.split('').reverse().join('').toUpperCase();
  }
</script>

<template>
  <h1>Correção dos exercícios</h1>
  <div class="info">
    <h2>Informações</h2>
    <p>Nome: {{ nome }} </p>
    <p>Idade: {{ idade }}  anos</p>
    <hr />
    <p>
      Para completar 50 anos faltam: {{ 50 - idade }}  anos
    </p>
    <p>O nome tem {{ nome.length }}  caracteres</p>
    <p>
      O nome invertido em maiúscula é: {{
      inverterTextoEmMaiusculo(nome) }}
    </p>
  </div>
  <div class="contador">
    <h2>Contador</h2>
    <p>Valor: {{ contador }} </p>
    <button @click="incrementar">Incrementar</button>
    <button @click="decrementar">Decrementar</button>
    <button @click="reiniciar">Reiniciar</button>
    <div
      :style="{ backgroundColor: contador > 10 ? 'green' : 'red' }"
    >
      <p v-if="contador > 10">Valor maior que 10</p>
      <p v-else>Valor menor que 10</p>
    </div>
  </div>
</template>

<style scoped>
  .info,
  .contador {
    background-color: rgba(35, 12, 22, 1);
    padding: 20px 30px;
    color: rgb(183, 210, 219);
    border-radius: 10px;
  }

  h1 {
    color: darkblue;
    font-weight: bold;
    font-size: 1.5em;
  }

  button {
    margin: 10px;
    padding: 10px;
    border: 0;
    border-radius: 5px;
    background-color: lightblue;
    color: black;
    font-weight: bold;
    cursor: pointer;
  }

  button:hover {
    background-color: blue;
  }

  div {
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    color: white;
    font-weight: bold;
  }
</style>

Esta é a correção dos exercícios. Neste exemplo, usamos a API de composição para criar um contador e mostrar informações na tela. Além disso, corrigimos o nome invertido em maiúsculas e adicionamos um quadro com o contador e a div que muda de cor e aparece de acordo com o valor do contador.

Note que esta é uma das formas de corrigir os exercícios. Existem outras formas de fazer a mesma coisa. O importante é entender o conceito e a sintaxe de templates do Vue 3.