Vue.js - Iniciante | Events

Definição

No Vue, os eventos são a forma de reagir às ações do usuário, como cliques em botões, digitação em campos de texto ou envio de formulários.

Eles conectam o que acontece no HTML com a lógica que criamos no JavaScript.
Assim, podemos executar funções quando o usuário interagir com a tela.

No Vue, usamos a diretiva v-on para isso.
Na prática, quase sempre usamos o atalho @.

---

Exemplo básico: @click

No nosso HelloWorld.vue, já temos um exemplo de evento:

<button type="button" @click="count++">count is {{ count }}</button>

Aqui o que acontece é:

• O botão tem um evento de clique.

• Quando ele é clicado, o Vue executa count++.

• Isso atualiza o valor de count e a interface muda automaticamente.

Ou seja, estamos conectando a ação do usuário à atualização do estado.

---

Usando métodos em vez de lógica inline

Podemos criar métodos dentro do <script setup> e chamá-los no evento.

<script setup lang="ts">
import { ref } from "vue"

const count = ref(0)

function incrementar() {
  count.value++
}

function resetar() {
  count.value = 0
}
</script>

<template>
  <button @click="incrementar">Incrementar</button>
  <button @click="resetar">Resetar</button>
  <p>O valor atual é {{ count }}</p>
</template>

Isso deixa o código mais organizado e fácil de entender.

---

Eventos com parâmetros

Podemos também passar valores para os métodos:

<script setup lang="ts">
import { ref } from "vue"

const count = ref(0)

function somar(valor: number) {
  count.value += valor
}
</script>

<template>
  <button @click="somar(1)">+1</button>
  <button @click="somar(5)">+5</button>
  <p>O valor atual é {{ count }}</p>
</template>

Aqui, os botões chamam o mesmo método, mas cada um passa um parâmetro diferente.

---

Eventos do teclado e input

Não é só clique — qualquer evento do DOM pode ser usado:

<input @input="(e) => console.log(e.target.value)" />

Ou, de forma organizada:

<script setup lang="ts">
import { ref } from "vue"

const texto = ref("")

function atualizar(event: Event) {
  texto.value = (event.target as HTMLInputElement).value
}
</script>

<template>
  <input @input="atualizar" placeholder="Digite algo..." />
  <p>Você digitou: {{ texto }}</p>
</template>

---

Modificadores de evento

O Vue oferece atalhos chamados event modifiers, que tornam o código mais simples.

Exemplos:

• @submit.prevent → previne o comportamento padrão de recarregar a página no formulário.

• @click.stop → impede a propagação do clique para elementos pai.

• @keyup.enter → escuta apenas quando a tecla Enter é pressionada.

<form @submit.prevent="enviarFormulario">
  <input v-model="msg" placeholder="Digite sua mensagem" />
  <button type="submit">Enviar</button>
</form>

<input @keyup.enter="enviarFormulario" placeholder="Aperte Enter" />

---

Atualizando o HelloWorld.vue com eventos

Podemos adicionar exemplos de eventos no nosso componente:

<script setup lang="ts">
import { ref } from "vue"

defineProps<{ msg: string }>()

const count = ref(0)
const inputText = ref("")

function incrementar() {
  count.value++
}

function resetar() {
  count.value = 0
}

function enviarFormulario() {
  alert(`Mensagem enviada: ${inputText.value}`)
}
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button @click="incrementar">Incrementar</button>
    <button @click="resetar">Resetar</button>
    <p>O valor do contador é {{ count }}</p>

    <!-- Input + evento de teclado -->
    <input v-model="inputText" @keyup.enter="enviarFormulario" placeholder="Digite e aperte Enter" />
    <p>Você digitou: {{ inputText }}</p>

    <!-- Formulário com prevent -->
    <form @submit.prevent="enviarFormulario">
      <input v-model="inputText" placeholder="Mensagem do formulário" />
      <button type="submit">Enviar</button>
    </form>
  </div>
</template>

Aqui temos:

• @click → controla o contador.

• @keyup.enter → envia ao pressionar Enter.

• @submit.prevent → envia formulário sem recarregar a página.

---

Conclusão

Eventos no Vue são a ponte entre a interface e a lógica.
Eles permitem:

• Reagir a cliques, digitação, formulários e qualquer evento do DOM.

• Usar métodos para organizar melhor a lógica.

• Passar parâmetros para funções.

• Usar modificadores (.prevent, .stop, .enter) para simplificar o código.

Com isso, já conseguimos criar interações completas e responsivas em nossas aplicações.

👉 O próximo passo veremos Methods, usados para realizar uma ação após ser chamada por um evento.