Obsługa zdarzeń w Vue.js za pomocą dyrektywy v-on

Ten wpis jest 8 częścią z 8 w kursie Vue.js

Aby aplikacja była ciekawa, musi pozwalać użytkownikowi na interakcję. Może to być nie tylko wprowadzanie danych do pól formularzy, ale również reagowanie na zdarzenia kliknięcia, czy ruchy myszką. Niezależnie od tego, jaki rodzaj interakcji chcesz oprogramować, Vue.js pozwoli Ci obsłużyć go za pomocą dyrektywy v-on.

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>

See the Pen Zdarzenia z użyciem dyrektywy v-on by Wojciech Urbański (@wojtiku) on CodePen.

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>

See the Pen
Modyfikatory zdarzeń w Vue.js
by Wojciech Urbański (@wojtiku)
on CodePen.

Vue udostępnia także modyfikatory takie jak:

  • .stop – wywoła e.stopPropagation()
  • .prevent – wywoła e.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. Poznaj Vue.js na szkoleniu z Type of Web!

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.