Eventos

Essas são atalhos do Vue.js para adicionar eventos do DOM de forma prática e reativa.

Elas são equivalentes a addEventListener do JavaScript puro, mas muito mais simples e integradas ao Vue.

Ótimo! Vamos simplificar:

🎯 O que são `@submit`, `@click`, `@input`, etc.?

Essas são atalhos do Vue.js para adicionar eventos do DOM de forma prática e reativa.

Elas são equivalentes a addEventListener do JavaScript puro, mas muito mais simples e integradas ao Vue.

@evento="função"

É exatamente o mesmo que:

v-on:evento="função"

Ou seja:

<!-- São a mesma coisa -->
<button @click="fazerAlgo">Clique</button>
<button v-on:click="fazerAlgo">Clique</button>

Sintaxe Vue	Evento HTML	O que faz
`@click`	`onclick`	Dispara uma função ao clicar
`@submit`	`onsubmit`	Dispara ao enviar um formulário
`@input`	`oninput`	Captura digitação em tempo real
`@keyup`	`onkeyup`	Detecta tecla liberada
`@change`	`onchange`	Detecta mudança em input/select
`@mouseover`	`onmouseover`	Quando o mouse passa por cima

Você pode encadear modificadores como .prevent, .stop, .once, etc.

Diretivas

Introdução