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:

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:

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:

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.

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!

Przede wszystkim admin, potem webdeveloper choć kiedyś było odwrotnie. Obecnie Full Stack Engineer, CTO i System Architect. Po godzinach fan dobrych seriali, których nigdy nie ma czasu obejrzeć. Kawożłop. Koneser prawdziwego piwa. W czasie pomiędzy kontuzjami biega.

  • Mariu

    Jak przekazać argumenty do funkcji ?

Send this to a friend

webmastah.weekly
Cotygodniowa porcja linków ze świata WEBDEV BEZ spamu, TYLKO samo mięcho!
Zobacz poprzednie wydania. Dołącz do 2 tysięcy webdeveloperów!
HTML5, CSS3, JS (React, Angular, Ember, Vue), PHP, SQL