Directiva v-on de Vue3
Directivas integradas de Vue3v-onLa directiva se usa para enlazar un listener de eventos, puede escuchar eventos DOM o eventos personalizados.
Explicación básica
v-onLa directiva se utiliza para enlazar manejadores de eventos a elementos. Se puede usar para escuchar eventos DOM nativos y también eventos emitidos por componentes personalizados.
- Abreviatura: @
- Tipo esperado: Function | Inline Statement | Object
- Función: Vincula un listener de eventos, admite eventos DOM nativos y eventos personalizados.
Uso básico
Ejemplo
<!-- Escritura completa -->
<button v-on:click="handleClick">Haz clic</button>
<!-- Forma abreviada -->
<button @click="handleClick">Haz clic</button>
<button v-on:click="handleClick">Haz clic</button>
<!-- Forma abreviada -->
<button @click="handleClick">Haz clic</button>
Ejemplo
<template>
<div>
<button @click="count++">Aumentar</button>
<p>Contador: {{ count }}</p>
</div>
</template>
<script>
export default {
data() {
return { count: 0 }
}
}
</script>
<div>
<button @click="count++">Aumentar</button>
<p>Contador: {{ count }}</p>
</div>
</template>
<script>
export default {
data() {
return { count: 0 }
}
}
</script>
Modificadores de eventos
Ejemplo
<!-- Evitar la propagación del evento -->
<button @click.stop="handleClick">Detener propagación</button>
<!-- Prevenir el comportamiento predeterminado -->
<form @submit.prevent="handleSubmit">
<button type="submit">Enviar</button>
</form>
<!-- Se activa al presionar la tecla Enter -->
<input @keyup.enter="handleEnter" placeholder="Presiona Enter para enviar" />
<button @click.stop="handleClick">Detener propagación</button>
<!-- Prevenir el comportamiento predeterminado -->
<form @submit.prevent="handleSubmit">
<button type="submit">Enviar</button>
</form>
<!-- Se activa al presionar la tecla Enter -->
<input @keyup.enter="handleEnter" placeholder="Presiona Enter para enviar" />
Otras extensiones