KAPITEL 8
Event-Handling
Mit der Direktive v-on kann Vue auf DOM-Events reagieren:
<div id="app">
<button v-on:click="counter += 1">Add 1</button>
<p>Button clicks: {{ counter }}</p>
</div>
var vm = new Vue({
el: '#app',
data: {
counter: 0
}
})
Dieses Beispiel erzeugt einen Button, dessen Zähler bei jedem Klick um den Wert 1 erhöht wird. Dazu wird die Direktive v-on zusammen mit dem Namen des gewünschten Events als Argument verwendet. Als Wert wird der JavaScript-Ausdruck counter += 1 definiert.
Natürlich können bei v-on anstelle von JavaScript-Ausdrücken auch Funktionsnamen übergeben werden:
<div id="app">
<button v-on:click="greet">Greet</button>
</div>
var vm = new Vue({
el: '#app',
methods: {
greet: function (event) {
if (event) {
alert(event.target.tagName) ...
Get Vue.js kurz & gut now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
