Obsługa zdarzeń ​

Nasłuchiwanie zdarzeń ​

Możemy użyć dyrektywy v-on, którą zazwyczaj skracamy do symbolu @, aby nasłuchiwać zdarzeń DOM i uruchamiać jakiś kod JavaScript, gdy zostaną one wywołane. Użycie wyglądałoby tak: v-on:click="handler" lub przy użyciu skrótu: @click="handler".

Wartość handler może być jedną z następujących:

1. Metody obsługi zdarzeń inline: Kod JavaScript wykonywany bezpośrednio po wywołaniu zdarzenia (podobnie jak natywny atrybut onclick).

2. Metody obsługi zdarzeń: Nazwa właściwości lub ścieżka wskazująca na metodę zdefiniowaną w komponencie.

Obsługa zdarzeń inline ​

Metody obsługi zdarzeń inline są zwykle używane w prostych przypadkach, na przykład:

const count = ref(0)

data() {
  return {
    count: 0
  }
}

<button @click="count++">Dodaj 1</button>
<p>Count is: {{ count }}</p>

Metody obsługi zdarzeń ​

Jednak w wielu przypadkach logika obsługi zdarzeń będzie bardziej złożona i nie nadaje się do umieszczenia w metodach inline. Dlatego v-on może również przyjąć nazwę lub ścieżkę metody komponentu, którą chcesz wywołać.

Na przykład:

const name = ref('Vue.js')

function greet(event) {
  alert(`Witaj ${name.value}!`)
  // `event` to natywne zdarzenie DOM
  if (event) {
    alert(event.target.tagName)
  }
}

data() {
  return {
    name: 'Vue.js'
  }
},
methods: {
  greet(event) {
    // `this` wewnątrz metod odnosi się do aktualnej instancji komponentu

    alert(`Witaj ${this.name}!`)
    // `event` to natywne zdarzenie DOM
    if (event) {
      alert(event.target.tagName)
    }
  }
}

<!-- `greet` to nazwa metody zdefiniowanej powyżej -->
<button @click="greet">Greet</button>

Metody obsługi zdarzeń automatycznie otrzymują natywny obiekt zdarzenia DOM, które je wywołało. W powyższym przykładzie mamy dostęp do elementu, który wywołał zdarzenie, poprzez event.target.

Metoda vs. wykrywanie inline ​

Kompilator szablonów Vue wykrywa metody poprzez sprawdzanie, czy wartość w v-on jest poprawnym identyfikatorem JavaScript lub ścieżką dostępu do właściwości. Na przykład foo, foo.bar oraz foo['bar'] są traktowane jako metody obsługi zdarzeń, natomiast foo() i count++ są traktowane jako obsługa inline.

Wywoływanie metod w obsłudze inline ​

Zamiast bezpośredniego przypisywania nazwy metody, możemy także wywołać metodę wewnątrz obsługi inline. Dzięki temu możemy przekazać do niej niestandardowe argumenty zamiast natywnego obiektu zdarzenia:

function say(message) {
  alert(message)
}

methods: {
  say(message) {
    alert(message)
  }
}

<button @click="say('cześć')">Powiedz cześć</button>
<button @click="say('pa')">Powiedz pa</button>

Dostęp do argumentu zdarzenia w obsłudze inline ​

Czasami musimy uzyskać dostęp do oryginalnego zdarzenia DOM w obsłudze inline. Można to zrobić, przekazując je do metody za pomocą specjalnej zmiennej $event lub używając funkcji strzałkowej inline:

<!-- użycie specjalnej zmiennej $event -->
<button @click="warn('Formularz nie może zostać wysłany.', $event)">
  Wyślij
</button>

<!-- użycie funkcji strzałkowej inline -->
<button @click="(event) => warn('Formularz nie może zostać wysłany.', event)">
  Wyślij
</button>

function warn(message, event) {
  // teraz mamy dostęp do natywnego zdarzenia
  if (event) {
    event.preventDefault()
  }
  alert(message)
}

methods: {
  warn(message, event) {
    // teraz mamy dostęp do natywnego zdarzenia
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

Modyfikatory zdarzeń ​

Bardzo często w obsłudze zdarzeń musimy wywołać event.preventDefault() lub event.stopPropagation(). Chociaż możemy to zrobić bezpośrednio w metodach, lepiej byłoby, gdyby metody zajmowały się wyłącznie logiką danych, a nie szczegółami obsługi zdarzeń DOM.

Aby rozwiązać ten problem, Vue udostępnia modyfikatory zdarzeń dla v-on. Modyfikatory to sufiksy dyrektyw oznaczone kropką.

• .stop
• .prevent
• .self
• .capture
• .once
• .passive

<!-- propagacja zdarzenia kliknięcia zostanie zatrzymana -->
<a @click.stop="doThis"></a>

<!-- zdarzenie submit nie przeładuje strony -->
<form @submit.prevent="onSubmit"></form>

<!-- modyfikatory mogą być łączone -->
<a @click.stop.prevent="doThat"></a>

<!-- sam modyfikator -->
<form @submit.prevent></form>

<!-- obsługa zdarzenia tylko wtedy, gdy event.target to sam element -->
<!-- czyli nie element potomny -->
<div @click.self="doThat">...</div>

Modyfikatory .capture, .once i .passive odpowiadają opcjom natywnej metody addEventListener:

<!-- użyj trybu przechwytywania podczas dodawania nasłuchiwacza zdarzeń -->
<!-- tj. zdarzenie skierowane do elementu wewnętrznego jest obsługiwane -->
<!-- zanim zostanie obsłużone przez ten element                         -->
<div @click.capture="doThis">...</div>

<!-- zdarzenie kliknięcia zostanie wywołane co najwyżej raz -->
<a @click.once="doThis"></a>

<!-- nastąpi domyślne zachowanie zdarzenia (przewijanie)   -->
<!-- natychmiast, zamiast czekać na zakończenie `onScroll` -->
<!-- w przypadku, gdy zawiera `event.preventDefault()`     -->
<div @scroll.passive="onScroll">...</div>

Modyfikator .passive jest zwykle używany w przypadku nasłuchiwaczy zdarzeń dotykowych w celu poprawy wydajności na urządzeniach mobilnych.

Modyfikatory klawiszy ​

Podczas nasłuchiwania zdarzeń klawiatury często chcemy sprawdzać, czy naciśnięto określony klawisz. Vue umożliwia dodanie modyfikatorów klawiszy do v-on lub @:

<!-- wywołaj `submit` tylko po naciśnięciu `Enter` -->
<input @keyup.enter="submit" />

Możesz używać dowolnych nazw klawiszy zgodnych z KeyboardEvent.key jako modyfikatorów, konwertując je do kebab-case.

<input @keyup.page-down="onPageDown" />

W powyższym przykładzie procedura obsługi zostanie wywołana tylko wtedy, gdy $event.key będzie równe 'PageDown'.

Aliasy klawiszy ​

Vue udostępnia aliasy dla najczęściej używanych klawiszy:

• .enter
• .tab
• .delete (obsługuje zarówno "Delete", jak i "Backspace")
• .esc
• .space
• .up
• .down
• .left
• .right

Modyfikatory klawiszy systemowych ​

Możesz użyć następujących modyfikatorów, aby uruchomić nasłuchiwanie zdarzeń myszy lub klawiatury tylko wtedy, gdy zostanie naciśnięty odpowiedni klawisz modyfikujący:

• .ctrl
• .alt
• .shift
• .meta

Na przykład:

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Zrób coś</div>

Modyfikator .exact ​

Modyfikator .exact pozwala kontrolować dokładną kombinację modyfikatorów systemowych potrzebnych do wywołania zdarzenia.

<!-- to zostanie wywołane nawet jeśli naciśnięty zostanie również klawisz Alt lub Shift -->
<button @click.ctrl="onClick">A</button>

<!-- to zostanie wywołane tylko wtedy, gdy naciśnięty zostanie klawisz Ctrl i nie zostanie naciśnięty żaden inny klawisz -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- to zostanie wywołane tylko wtedy, gdy nie zostaną naciśnięte żadne modyfikatory systemowe -->
<button @click.exact="onClick">A</button>

Modyfikatory przycisków myszy ​

• .left
• .right
• .middle

Te modyfikatory ograniczają obsługę do zdarzeń wyzwalanych przez określony przycisk myszy.

Pamiętaj jednak, że modyfikatory .left, .right i .middle polegają na typowy układzie myszy dla praworęcznych, jednakże w praktyce reprezentują "główny", "poboczny" i "dodatkowy" w rozumieniu wywoływania zdarzeń, a nie fizyczne przyciski. A więc na myszy dla leworęcznych, przycisk "główny" fizycznie w praktyce może być prawym, ale wywoła zdarzenie z modyfikatorem .left. Trackpad może wywołać zdarzenie z .left przy pojedynczym tapnięciu palcem, .right przy tapnięciu dwoma palcami, a .middle wywoła się przy tapnięciu trzema palcami. Podobnie działać będą inne urządzenia generuję zdarzenia "myszy", które nie mają w praktyce związku z "lewym" lub "prawym".