English 中文 العربية 日本語 Português

Vue.js: Sintaxe de Template

Última atualização: 2026-10-20

A sintaxe de modelos do Vue é uma extensão declarativa do HTML — ela adiciona “diretivas” e “interpolação” ao HTML padrão, permitindo que você renderize dados no DOM. A sintaxe de modelos como um todo é 90% semelhante ao HTML, portanto, qualquer pessoa familiarizada com HTML pode começar a usá-la em 30 minutos.

No cerne dos modelos do Vue estão três elementos-chave: interpolação (exibição de dados) + diretivas (vinculação de propriedades/eventos) + expressões (execução de JavaScript). Esta lição irá guiá-lo pelas formas padrão de utilizar esses três elementos.

Diretivas relacionados：v-text v-html v-once

1. O que você vai aprender

2. Requisitos de exibição para a ficha de um produto no comércio eletrônico

(1) Desafio: 30 produtos — copiar e colar 30 vezes?

Alice está desenvolvendo um painel de administração para um site de comércio eletrônico. Ela precisa exibir 30 fichas de produtos. Sua abordagem inicial:

HTML 
<!-- Copy and paste 30 times, nightmare... -->
<div class="product-card">
  <h3>iPhone 15 Pro</h3>
  <p>Price: $999</p>
  <button>Edit</button>
</div>
<div class="product-card">
  <h3>MacBook Pro</h3>
  <p>Price: $2499</p>
  <button>Edit</button>
</div>
<!-- ... And also 28 more ... -->

Quando o gerente de produto Charlie diz “Altere o formato do preço para mostrar o símbolo da moeda”:

“Alice, você não pode editar manualmente 30 arquivos. E se tivermos 5.000 produtos no mês que vem? Precisamos de um modelo dinâmico.”

(2) Solução com modelo do Vue: 1 componente, 30 pontos de dados

5 linhas de código de modelo × 30 produtos = 0 copiar e colar. Quando os nomes ou preços dos produtos mudam, o Vue atualiza automaticamente o DOM.

(3) Receita

Após adotar os modelos do Vue:

3. Interpolação: Mustache {{ }}

(1) 4 maneiras de implementar a interpolação

Sintaxe Resultado Exemplo
{{ var }} Exibir o valor da variável <p>{{ username }}</p> → Alice
{{ expr }} Exibir o resultado da expressão em JS <p>{{ count + 1 }}</p> → 6
{{ fn() }} Valor de retorno da chamada de função <p>{{ formatDate(date) }}</p> → 2 de julho de 2026
{{ obj.prop }} Acessar propriedades do objeto <p>{{ user.name }}</p> → Alice

(2) As 5 principais características da interpolação

(3) A diferença entre interpolação e v-text

▶ Exemplo: Várias maneiras de escrever a interpolação

▶ Experimente

Saída:

TEXT 
alice
7
Passed
Bob

4. Diretivas de texto: v-text / v-html / v-once

(1) Comparação dos três comandos

Comando Função Caso de uso Segurança
{{ }} Interpolação Interpolação de texto Preferência padrão ✅ Segurança
v-text Definindo o textContent de um elemento Sintaxe alternativa para interpolação ✅ Seguro
v-html Definir o innerHTML de um elemento Renderizar texto formatado (Use com cautela) ⚠️ Risco de XSS
v-once Renderização única, sem atualizações posteriores Otimização estática ✅ Segurança

(2) Aviso do v-html

(3) Otimização de desempenho do v-once

5. Vinculação de propriedades: v-bind e a sintaxe abreviada :

(1) Noções básicas do v-bind

(2) Vinculação de classe e estilo (Ponto-chave)

(3) Estilo de ligação

▶ Exemplo: 5 maneiras de usar o v-bind

▶ Experimente

Saída:

TEXT 
img com src=imageUrl
img com atributo dinâmico [attrName]=value
div class="active" (isActive = true)
a href="/users/7" → Profile

6. Vinculação de eventos: v-on e a sintaxe abreviada @

(1) Noções básicas do v-on

(2) Modificadores comuns de eventos (9)

(3) Cadeias de modificadores

▶ Exemplo: 5 maneiras de escrever “v-on”

▶ Experimente

Saída:

TEXT 
Click → handleClick(event)
+ → contador 0 → 1 → 2
Delete → handleDelete(item.id, $event)

7. Restrições de expressão (não são permitidas declarações)

(1) Expressões de modelo x instruções em JavaScript

(2) Expressões x Propriedades calculadas

Cenário Uso de expressões Uso de propriedades calculadas
Cálculos simples (1–2 operadores) ✅ ❌
Lógica complexa (várias etapas, loops) ❌ ✅
Armazenamento em cache necessário ❌ ✅
Parâmetros obrigatórios ✅ ❌ (Use um método em vez disso)

8. Diretivas do Edge: v-pre / v-cloak

(1) v-pre: Ignorar a compilação

Cenário: Demonstrar a sintaxe dos modelos do Vue em si (por exemplo, tutoriais, sites de documentação).

(2) v-cloak: Ocultar antes da compilação

Cenário: Impedir que os usuários vejam {{ message }} piscando antes da compilação.

9. Exercício abrangente: ficha de produto dinâmica

▶ Exemplo: Ficha básica do produto

▶ Experimente

Saída:

TEXT 
iPhone 15
$999
In Stock
Clique em Add to Cart → console: Added iPhone 15

(1) 📊 5. Modelos x Referência rápida em HTML

Elemento Sintaxe HTML Sintaxe Vue Descrição
Texto estático <p>Hello</p> <p>{{ msg }}</p> Tornar dinâmico
Propriedade estática <img src="x.jpg"> <img :src="url"> Alterar para dinâmica
Classe estática <div class="box"> <div :class="cls"> Alterar para dinâmica
Estilo estático <div style="color: red"> <div :style="sty"> Alterar para dinâmico
Evento de clique <button onclick="fn()"> <button @click="fn"> Editar Vue
Renderização condicional Nenhuma <div v-if="ok"> Específico do Vue
Renderização de lista Nenhuma <div v-for="i in list"> Específico do Vue

(2) 📊 6. 5 erros comuns

Erro Sintoma Solução
Esqueça .value Escreva {{ count }} no modelo e count.value no JS O modelo o descompacta automaticamente; o JS precisa de .value
Como escrever if/for em {{ }} Erros de compilação Como usar as diretivas v-if / v-for
v-html XSS Entrada do usuário <script> Execução Limpar com DOMPurify
A função inline não recebeu $event Não é possível acessar o objeto de evento @click="fn($event)" Passe explicitamente
Ordem incorreta dos modificadores Não foi possível impedir a propagação .stop precede .prevent (conforme necessário)

Diretivas relacionados：v-text v-html v-once

❓ Perguntas Frequentes

P Qual é a diferença entre {{ }} e v-text?
R Ambos têm o mesmo efeito — definem o textContent do elemento. A diferença é que {{ }} pode ser usado junto com texto estático (<p>Hi, {{ name }}</p>), enquanto v-text deve ocupar todo o elemento (<p v-text="msg"></p>). Recomendamos usar {{ }} para maior flexibilidade.
P O v-html é seguro?
R Não, não é seguro. O v-html analisa strings como HTML, permitindo que usuários mal-intencionados injetem <script> para atacar seu site. A menos que você confie 100% na fonte dos dados (como um renderizador de Markdown que você mesmo escreveu), use {{ }} para interpolação ou limpe os dados primeiro com DOMPurify.sanitize().
P Qual é a ordem de execução da cadeia de modificadores v-on?
R Da esquerda para a direita. Por exemplo, @click.stop.prevent chama stopPropagation() primeiro, seguido por preventDefault().
P É possível abreviar v-bind? Também é possível abreviar v-on?
R A abreviação para v-bind é : (sem v-bind), e a abreviação para v-on é @ (recomendado). Ambas as abreviações são notações oficiais suportadas desde o Vue 2 e são compatíveis com o realce de sintaxe e o autocompletamento do IDE.
P Posso usar instruções if/else em modelos?
R Não. As expressões de modelo devem retornar um valor, e if/for são instruções, não expressões. Use as diretivas v-if, v-else-if e v-else para implementar a renderização condicional.
P Como alternar dinamicamente entre várias classes usando o v-bind?
R Use a sintaxe de objeto :class="{ active: isActive, 'text-danger': hasError }". Ou a sintaxe de array :class="[activeClass, errorClass]". É possível misturar as duas: :class="[isActive && 'active', { 'error': hasError }]".
P Como faço para detectar o atalho de teclado Ctrl+S?
R Use o modificador de sistema @keyup.ctrl.s="save" ou @keydown.ctrl.s.prevent="save" (adicione .prevent para impedir que a caixa de diálogo padrão de salvamento do navegador seja exibida). O Vue 3 também suporta o modificador exato .exact; por exemplo, @click.ctrl.exact exige que apenas a tecla Ctrl seja pressionada — nenhuma outra tecla é permitida.

📖 Resumo

📝 Exercícios

  1. Questões básicas (Dificuldade: ⭐)

    Escreva um componente Vue 3 que exiba um cartão de usuário contendo:

    • Nome de usuário (interpolação)
    • Foto de perfil (v-bind)
    • Botão “Seguir” (v-on)
    • Status online/offline (alternância dinâmica)

    Dados utilizados: Objeto de usuário { name: 'Alice', avatar: 'alice.jpg', online: true }

  2. Problemas avançados (Dificuldade: ⭐⭐)

    Crie uma lista de tarefas simples:

    • Campo de entrada (o v-model não está sendo usado no momento; simulado usando v-bind:value + @input)
    • Botão “Adicionar” (@click + expressão)
    • Renderização de listas (v-for; abordaremos isso na próxima aula)
    • Cada item possui um botão para excluir (@clique + passar parâmetros)

    Dados: const todos = ref(['Learn Vue', 'Build app', 'Deploy'])

  3. Problema desafiador (Dificuldade: ⭐⭐⭐)

    Escreva um componente de ficha técnica completa do produto que ofereça suporte a:

    1. 5 ícones de status do produto (Em estoque/Esgotado/Pré-venda/Em promoção/Descontinuado)
    2. Os 5 estados correspondem a cores de classe diferentes (definidas em bloco usando a sintaxe de objeto)
    3. Botões para aumentar/diminuir a quantidade (@clique para aumentar/diminuir)
    4. Desativar o botão “Adicionar ao carrinho” quando a quantidade for maior ou igual ao estoque (:desativado dinamicamente)
    5. Pelo menos 3 modificadores de evento (@click.stop, @submit.prevent, etc.)
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%