v-on (@) Diretiva de Escuta de Eventos
Última atualização: 2026-10-22
v-on (@) Diretiva de Escuta de Eventos
O v-on vincula um listener de evento, abreviado como @: @click="handler"; aceita expressões inline e modificadores (.stop/.prevent/.once etc.).
| Grupo | Diretivas |
|---|---|
| Tipo | Diretiva |
| Escopo | Template |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
<button v-on:click="count++">+1</button>
<button @click="greet">Cumprimentar</button>
<form @submit.prevent="onSubmit">⚙️ Argumentos
| expression | Nome do evento + função handler ou declaração inline; modificadores como .stop, .prevent, .once, .self |
|---|
Retorno：Diretiva, sem valor de retorno
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Shows 'Clicked 0 times'; each click increments the counter.💡 Pontos-chave
💡 Dica @ é o atalho de v-on: — no dia a dia usa-se @click.
ℹ️ Nota Modificadores comuns: .stop impede a propagação, .prevent cancela o comportamento padrão, .once dispara uma única vez, .self só quando o alvo é o próprio elemento.
⚠️ Aviso Passe o nome do método sem parênteses (@click="greet"); parênteses apenas para passar argumentos.
🏷️ Diretivas relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Qual a diferença entre @click="fn" e @click="fn()"?
R O primeiro recebe o objeto de evento automaticamente como argumento; os parênteses servem para passar argumentos próprios.
P Os modificadores podem ser encadeados?
R Sim, por exemplo @click.stop.prevent — aplicados da esquerda para a direita.
P Como escutar eventos de teclado?
R Use modificadores de tecla como @keyup.enter ou @keydown.esc.
