Modificadores de eventos v-on
.stop, .prevent, .self, .once, .capture, .passive — quando e por que usar cada modificador.
Modificadores de eventos v-on é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 4. 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 4 aulas no total.
Tratamento de eventos mais simples
A diretiva v-on (forma abreviada @) associa ouvintes de eventos. Modificadores de eventos são sufixos que cuidam de tarefas comuns do DOM, como interromper a propagação ou impedir comportamentos padrão, para que seus manipuladores permaneçam concentrados na lógica.
O problema que os modificadores resolvem
Sem modificadores, você espalha código repetitivo do DOM pelos manipuladores, chamando event.preventDefault() ou event.stopPropagation(). Os modificadores transferem esse trabalho para o modelo, de forma declarativa.
.stop para stopPropagation
.stop impede que o evento se propague para os elementos pai — o equivalente a chamar event.stopPropagation().
<!-- inner click will not reach the outer handler -->
<div @click="onOuter">
<button @click.stop="onInner">Click</button>
</div>.prevent para preventDefault
.prevent chama event.preventDefault(). O uso clássico é impedir que um formulário recarregue a página ao ser enviado.
<form @submit.prevent="onSubmit">
<button type="submit">Save</button>
</form>Combinando modificadores
Você pode combinar modificadores. A ordem importa: eles são aplicados da esquerda para a direita.
<a @click.stop.prevent="onClick">Link</a>.self: apenas o próprio elemento
.self executa o manipulador somente quando o alvo do evento é o próprio elemento, e não um filho que propagou o evento. É ótimo para fundos de sobreposição.
<!-- closes only when the backdrop itself is clicked -->
<div class="backdrop" @click.self="close">
<div class="modal">...</div>
</div>Modificadores de tecla
Para eventos do teclado, você pode escutar teclas específicas. @keyup.enter é acionado somente quando a tecla Enter é liberada.
<input @keyup.enter="search" />Mais modificadores de tecla
Vue oferece abreviações para teclas comuns: .enter, .esc, .tab, .delete, .space e teclas de seta, como .up e .down.
<input @keyup.esc="cancel" @keyup.up="previous" />.once: execute um manipulador apenas uma vez
.once executa o manipulador no máximo uma vez e depois remove o ouvinte. É útil para ações únicas, como dispensar uma mensagem de boas-vindas.
<button @click.once="initialize">Start</button>.passive para melhorar o desempenho da rolagem
.passive informa ao navegador que o manipulador não chamará preventDefault(). Assim, o navegador pode rolar a página suavemente sem esperar, melhorando o desempenho em eventos de toque e rolagem.
<div @scroll.passive="onScroll">...</div>Escolhendo o modificador adequado
.stop— interromper a propagação..prevent— impedir o comportamento padrão..self— ignorar eventos propagados por filhos..once— executar uma vez..passive— nunca impedir o comportamento padrão; melhorar o desempenho da rolagem.
Observação: nunca combine .passive com .prevent — eles são incompatíveis.
Verificação rápida
Escolha o modificador adequado.
Recapitulação
Os modificadores de eventos mantêm os manipuladores organizados:
.stop= stopPropagation,.prevent= preventDefault..selfé acionado somente no próprio elemento.- Modificadores de tecla, como
.enter, direcionam teclas específicas. .onceexecuta um manipulador uma vez;.passivemelhora o desempenho da rolagem.
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 “Modificadores de eventos v-on” é grátis?
Sim — o texto completo de “Modificadores de eventos v-on” é 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 4 aulas no total.
O que vou aprender em “Modificadores de eventos v-on”?
.stop, .prevent, .self, .once, .capture, .passive — quando e por que usar cada modificador. 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 2 de 4.
Quanto tempo leva a aula “Modificadores de eventos v-on”?
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
- v-model: elementos internos da vinculação bidirecional
- Modificadores de eventos v-on
- Vinculações dinâmicas e múltiplas com v-bind
- Como escrever diretivas personalizadas