Vue.js kurz & gut

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) ...