Interpolação e diretivas
Use a interpolação com chaves duplas e as diretivas essenciais nos templates.
Interpolação e diretivas é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 3 aulas no total.
Visão geral da sintaxe de modelos
Os modelos do Vue são HTML válido aprimorado com uma sintaxe especial:
- Interpolação mustache para texto
- Diretivas (atributos com o prefixo v-) para comportamento
O Vue compila isso em funções de renderização eficientes.
Interpolação mustache
As chaves duplas, ou a sintaxe mustache, exibem texto.
O conteúdo é uma expressão JavaScript, não apenas o nome de uma variável.
<span>Hello, {{ userName }}</span>
<span>{{ price * quantity }}</span>
<span>{{ isActive ? "On" : "Off" }}</span>v-bind para atributos
As chaves duplas não funcionam dentro de atributos HTML. Use v-bind para vincular dados a um atributo.
<a v-bind:href="profileUrl">Profile</a>
<img v-bind:src="imagePath" v-bind:alt="caption" />
<button v-bind:disabled="isLoading">Submit</button>Forma abreviada de v-bind
v-bind é tão comum que tem uma forma abreviada: basta usar dois-pontos.
<!-- Full syntax -->
<a v-bind:href="url">Link</a>
<!-- Shorthand -->
<a :href="url">Link</a>v-on para eventos
A diretiva v-on escuta eventos do DOM e executa manipuladores.
<button v-on:click="handleClick">Click me</button>
<input v-on:input="onType" />
<form v-on:submit="onSubmit">...</form>Forma abreviada de v-on
v-on também tem uma forma abreviada: o símbolo de arroba.
<!-- Full syntax -->
<button v-on:click="save">Save</button>
<!-- Shorthand -->
<button @click="save">Save</button>Manipuladores inline x métodos
Os manipuladores de eventos podem ser expressões inline ou nomes de métodos.
<!-- Inline expression -->
<button @click="count++">Add</button>
<!-- Method handler -->
<button @click="increment">Add</button>
<!-- Inline with the event object -->
<button @click="log($event)">Log</button>v-text
A diretiva v-text define o conteúdo de texto de um elemento. Ela equivale a uma interpolação mustache.
<!-- These two are equivalent -->
<span v-text="message"></span>
<span>{{ message }}</span>v-html
A diretiva v-html renderiza uma string como HTML real, não como texto escapado.
<div v-html="rawHtml"></div>
<!-- If rawHtml = "<b>Bold</b>",
it renders actual bold text -->v-html e cuidado com XSS
Aviso: v-html é perigoso com conteúdo não confiável.
- Pode injetar scripts maliciosos (ataques XSS)
- Use-o apenas com conteúdo em que você confia plenamente
- Nunca renderize diretamente HTML enviado pelo usuário
Para texto normal, prefira sempre a interpolação mustache, que escapa o HTML.
Argumentos de diretivas
Algumas diretivas recebem um argumento depois de dois-pontos, como o atributo ou evento ao qual se referem.
<!-- argument is the attribute name -->
<a :href="url">Link</a>
<!-- argument is the event name -->
<button @click="run">Run</button>
<!-- dynamic argument -->
<a :[attrName]="value">Dynamic</a>Verificação rápida
Teste sua compreensão sobre interpolação e diretivas.
Recapitulação: interpolação e diretivas
Você aprendeu os conceitos básicos dos modelos Vue:
- {{ }} mustache exibe expressões de texto
- v-bind (forma abreviada :) vincula atributos
- v-on (forma abreviada @) gerencia eventos
- v-text define o conteúdo de texto
- v-html renderiza HTML bruto (risco de XSS; use com cuidado)
A seguir: condicionais e repetições.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “Interpolação e diretivas” é grátis?
Sim — o texto completo de “Interpolação e diretivas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 3 aulas no total.
O que vou aprender em “Interpolação e diretivas”?
Use a interpolação com chaves duplas e as diretivas essenciais nos templates. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 3.
Quanto tempo leva a aula “Interpolação e diretivas”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Interpolação e diretivas
- Condicionais e loops
- Vinculação de atributos e classes