| Diretiva | Descrição | Exemplo |
|---|---|---|
v-model |
Cria ligação bidirecional entre input e variável. | <input v-model="nome">Atualiza nome automaticamente. |
v-bind ou : |
Vincula atributos HTML a variáveis. | <img :src="urlImagem"><div :class="estilo"> |
v-if |
Renderiza o elemento se a condição for verdadeira. | <div v-if="logado">Bem-vindo</div> |
v-else-if / v-else |
Controla fluxo condicional alternativo. |
<div v-if="a">A</div>
|
v-show |
Exibe ou oculta o elemento via CSS (display:none). | <p v-show="mostrar">Texto visível</p> |
v-for |
Renderiza listas ou objetos. | <li v-for="item in lista">{{ '{{ item }}' }}</li> |
v-on ou @ |
Adiciona escutadores de eventos. | <button @click="salvar">Salvar</button> |
v-text |
Insere texto simples no elemento. | <div v-text="mensagem"></div> |
v-html |
Insere HTML com tags renderizadas (⚠️ Cuidado com XSS). | <div v-html="conteudoHTML"></div> |
v-cloak |
Evita que o conteúdo seja exibido antes da ativação do Vue. |
<div v-cloak>{{ '{{ mensagem }}' }}</div>Use CSS: [v-cloak] { display: none; }
|
v-pre |
Ignora compilação do Vue neste elemento. | <div v-pre>{{ '{{ ignorar }}' }}</div> |
v-once |
Renderiza uma vez e não atualiza mais. | <span v-once>{{ '{{ valorFixo }}' }}</span> |
Dica: Você pode combinar diretivas, como v-for com v-if, mas evite usar os dois no mesmo elemento para melhor performance.