Dyrektywa v-on
Dzięki dyrektywie v-on możesz nasłuchiwać na zdarzenia DOM i wykonać kod JavaScript gdy one zajdą. Wartością dyrektywy v-on może być nazwa metody dostępnej w komponencie (1), ale również zwykłe wyrażenie JavaScript (2).
new Vue({
data() {
return {
counter: 0,
};
},
methods: {
increment() {
this.counter = this.counter + 1;
},
decrement() {
this.counter = this.counter - 1;
},
},
}).$mount('#app');
<div id="app">
Licznik: {{ counter }}
<button>+</button>
<!-- (1) -->
<button>-</button>
<!-- (2) -->
</div>
Dyrektywę v-on, podobnie jak v-bind, możesz zapisać też w formie skróconej. Wtedy nazwa zdarzenia poprzedzona jest znakiem małpy, np. @click (2). Ta bardzo wygodna forma zapisu jest tym, czego będziesz używać najczęściej do nasłuchiwania na zdarzenia.
Modyfikatory zdarzeń
Obsługując zdarzenia, często będziesz chcieć wykonać pewne standardowe operacje takie jak e.preventDefault(), czy wywołać kod jedynie jeśli kliknięto dokładnie w dany element (a nie np. w jego dziecko).
Do tej pory sposobem na zrobienie tych rzeczy było ręczne wywołanie ich w funkcji obsługującej dane zdarzenie (1). Wadą takiego rozwiązania jest jednak to, że mieszamy logikę obsługi zdarzeń przeglądarki z logiką biznesową naszej aplikacji. Oczywiście powtarzanie tego typu fragmentów kodu jest również nużące.
Na szczęście Vue daje name rozwiązanie w postaci modyfikatorów dyrektyw, które w przypadku v-on zmieniają zachowanie podpiętej pod dane zdarzenie funkcji. Aby użyć modyfikatora, musisz napisać jego nazwę po nazwie zdarzenia oddzielając go kropką. Przykładem, którego prawdopodobnie będziesz używać najczęściej, jest modyfikator .prevent, którego użycie w naszym przypadku wygląda @click.prevent="counter += 1" (2).
new Vue({
data() {
return {
counter: 0,
};
},
methods: {
onClick(e) {
e.preventDefault(); // (1)
this.counter = this.counter + 1;
},
},
}).$mount('#app');
<!-- (2) -->
<ul id="app">
<li><a href="http://typeofweb.com/" @click="onClick">preventDefault po staremu</a></li>
<li><a href="http://typeofweb.com/" @click.prevent="counter += 1">preventDefault z Vue</a></li>
<li>Licznik kliknięć: {{ counter }}</li>
</ul>
Vue udostępnia także modyfikatory takie jak:
.stop- wywołae.stopPropagation().prevent- wywołae.preventDefault().self- wywoła Twój kod tylko jeśli zdarzenie wystąpiło bezpośrednio na danym elemencie, a nie jego dziecku.once- wywoła Twój kod tylko przy pierwszym wystąpieniu zdarzenia- oraz kilka innych
Chociaż z pomocą modyfikatorów Vue ułatwia jeszcze takie rzeczy jak obsługa klawiatury, to na dziś to wszystko. Do zdarzeń na pewno wrócimy jeszcze w dalszych częściach kursu. zapisz się na szkolenie z Vue.js.
Pytania?
Jeśli chcesz na bieżąco śledzić kolejne części kursu Vue.js to koniecznie polub Type of Web na Facebooku i zapisz się na newsletter.
Ćwiczenie
Stwórz prostą aplikację, która będzie liczyła wciśnięcia klawiszy wewnątrz inputa, w którym jest kursor i wyświetlała je na ekranie.