Vue3 v-on-Direktive
Vue3 Eingebaute Direktivenv-onDie Direktive wird verwendet, um Event-Listener zu binden, und kann DOM-Ereignisse oder benutzerdefinierte Ereignisse abhören.
Grundlegende Beschreibung
v-onDie Direktive wird verwendet, um Event-Handler-Funktionen an Elemente zu binden. Sie kann verwendet werden, um native DOM-Ereignisse sowie von benutzerdefinierten Komponenten ausgelöste Ereignisse abzuhören.
- Kurzform: @
- Erwarteter Typ: Function | Inline Statement | Object
- Function: Bindet Event-Listener, unterstützt native DOM-Ereignisse und benutzerdefinierte Ereignisse.
Grundlegende Verwendung
Beispiel
<!-- Vollständige Syntax -->
<button v-on:click="handleClick">Klick</button>
<!-- Kurzschreibweise -->
<button @click="handleClick">Klicken</button>
<button v-on:click="handleClick">Klick</button>
<!-- Kurzschreibweise -->
<button @click="handleClick">Klicken</button>
Beispiel
<template>
<div>
<button @click="count++">Erhöhen</button>
<p>Anzahl: {{ count }}</p>
</div>
</template>
<script>
export default {
data() {
return { count: 0 }
}
}
</script>
<div>
<button @click="count++">Erhöhen</button>
<p>Anzahl: {{ count }}</p>
</div>
</template>
<script>
export default {
data() {
return { count: 0 }
}
}
</script>
Ereignismodifikatoren
Beispiel
<!-- Event-Bubbling verhindern -->
<button @click.stop="handleClick">Propagation stoppen</button>
<!-- Standardverhalten verhindern -->
<form @submit.prevent="handleSubmit">
<button type="submit">Absenden</button>
</Form>
<!-- Bei Drücken der Eingabetaste auslösen -->
<input @keyup.enter="handleEnter" placeholder="Zum Absenden Eingabetaste drücken" />
<button @click.stop="handleClick">Propagation stoppen</button>
<!-- Standardverhalten verhindern -->
<form @submit.prevent="handleSubmit">
<button type="submit">Absenden</button>
</Form>
<!-- Bei Drücken der Eingabetaste auslösen -->
<input @keyup.enter="handleEnter" placeholder="Zum Absenden Eingabetaste drücken" />
Andere Erweiterungen