Kurs Vue.js krok po kroku – Zdarzenia i metody

W tym odcinku dowiemy się czym są i jak działają zdarzenia oraz jak definiujemy metody w Vue.js.

Event listener „nasłuchuje” w oczekiwaniu na wystąpienie konkretnego zdarzenia. A kiedy ono nastąpi to wywołuje inną zdefiniowaną funkcję. Zabrzmiało skomplikowanie? Niee. Weźmy pierwszy prosty przykład z brzegu:

<div id="app">
  <button v-on:click="counter += 1">Dodaj 1</button>
  <p>Baton został już tyle razy klepnięty: {{ counter }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})

v-on

Bohaterem dzisiejszego odcinka jest dyrektywa v-on, która właśnie służy do wyłapywania eventów. Jeżeli klikniesz na button to zmienna counter ma być zwiększona o jeden. Oczywiście takiego definiowania co ma się dziać po wystąpieniu danego eventu raczej nie będziemy używać w takiej formie inline. Raz, że jest to średnio czytelne. Dwa, że przy bardziej skomplikowanych działaniach niż taki banalny przykład było by to bardzo niewygodne. A trzy: logiki takiego działania możemy jeszcze potrzebować w innych miejscach.

Dlatego najcześciej do eventu przypiszemy konkretną metodę. Poprawmy ten przykład:

<div id="app">
  <button v-on:click="addOne">Dodaj 1</button>
  <p>Baton został już tyle razy klepnięty: {{ counter }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    counter: 0,
  },
  methods: {
    addOne() {
      this.counter += 1
    }
  }
})

Teraz po kliknięciu wywołujemy metodę addOne. W Vue.js własne metody definiujemy w obiekcie methods.

Modifikatory eventów

Jeżeli już jesteśmy przy eventach to warto wspomnieć, że w Vue.js mamy dostępnych kilka bardzo użytecznych modyfikatorów znanych z JS, a upakowanych w poręczne skróty. Jeżeli miałeś już styczność z JS, bądź też grzebałeś w nieśmiertelnym jQuery z pewnością kojarzysz np. event.preventDefault() czy event.stopPropagation().

W Vue.js odpalisz je w prosty sposób dodając do wywoływanego eventu:

<a v-on:click.stop="doThis"></a>

<!-- modyfikatory można łączyć -->
<a v-on:click.stop.prevent="doThat"></a>

Po szczegóły odsyłam do dokumentacji. Tam też znajdziecie dokładne wyjaśnienie jak korzystać z eventów dla wywoływanych klawiszy czy to z myszki czy to z klawiatury.

Zanim przejdziemy do kolejnego przykładu warto jeszcze wspomnieć, że v-on:click czy v-on:submit i pozostałe zdarzenia możemy skrócić do @click i @submit. I jak tu nie kochać Vue.js?

Przykład

Zastosujmy to na jakimś bardziej życiowym przykładzie. Weźmy wcale nierzadko występującą sytuację gdzie dodajemy jakiejś treści, np. kategorie. W „real life” to sobie leci gdzieś do zapisu (np. baza danych), my zajmiemy się tylko samą prezentacją danych.

<div id="app">

<ol>
    <li v-for="category in categories">
      {{ category }}
    </li>
</ol>

<input type="text" id="input" v-model="category">
<button v-on:click="addCategory">Dodaj kategorie</button>

</div>

Kurs Vue.js krok po kroku

1. Wprowadzenie i hello world
2. Chrome DevTools
3. Warunki i pętle
4. Zdarzenia i metody
5. Przypisywanie atrybutów
6. kolejne
7. odcinki
8. wkrótce

Subskrybuj kanał na YouTube

Ten kurs to przede wszystkim kurs VIDEO co oznacza, że więcej informacji, przykładów, omówienie poszczególnych kroków i w ogóle dużo więcej niż w powyższym tekście znajdziesz w materiale video. Materiał pojawi się w tym miejscu w ciągu najbliższych 2 tygodni. Nie chcesz przegapić? Subskrybuj kanał na YouTube!