Dowiedz się, jak usprawnić obsługę zdarzeń dzięki dyrektywie v-on Vue.

Słuchanie zdarzeń użytkownika jest integralną częścią każdej responsywnej aplikacji internetowej, a aplikacje Vue nie są wyjątkiem. Vue jest zbudowany z prostym i wydajnym sposobem obsługi zdarzeń za pomocą dyrektywy v-on.

Co to jest wiązanie zdarzeń w Vue?

Wiązanie zdarzeń to funkcja Vue.js, która umożliwia dołączenie detektora zdarzeń do pliku Obiektowy model dokumentu (DOM) element. Gdy wystąpi zdarzenie, detektor zdarzeń uruchamia akcję lub odpowiedź w Twojej aplikacji Vue.

Możesz osiągnąć wiązanie zdarzeń w Vue za pomocą v-on dyrektywa. Ta dyrektywa umożliwia Twojej aplikacji nasłuchiwanie zdarzeń użytkownika, takich jak kliknięcie, wejście lub naciśnięcie klawisza.

Aby dołączyć detektor zdarzeń do elementu za pomocą v-on, dodaj nazwę zdarzenia jako parametr do dyrektywy:

<HTML>
<głowa>
<scenariuszźródło=" https://unpkg.com/vue@3/dist/vue.global.js">scenariusz>
głowa>
<ciało>
<dzID=„aplikacja”>
<przyciskv-on: kliknij="licznik++">Kliknijprzycisk>
<P>{{ lada}}P>
dz>
<scenariusz>
konst aplikacja = Vue. utwórz aplikację ({
 dane() {
powrót {
 tekst: „Vue jest niesamowity!”,
 licznik: 0
 }
 }
 })
 aplikacja.montaż(„#aplikacja”)
scenariusz>
ciało>
HTML>

Powyższy blok kodu pokazuje przykład aplikacji Vue, która nasłuchuje a Kliknij wydarzenie. Blok kodu wykorzystuje a przycisk aby zwiększyć lada wartość we właściwości data instancji Vue o jeden.

Powyższy blok kodu wiąże wyrażenie JavaScript licznik++ do przycisku Kliknij impreza z v-on dyrektywa. Vue używa @ znak jako skrót zamiast v-on dyrektywa z powodu v-onczęste użycie:

<przycisk @Kliknij="licznik++">Kliknijprzycisk>

Wiązanie zdarzeń w Vue nie ogranicza się do zdarzeń kliknięć. Vue obsługuje inne zdarzenia, takie jak naciśnięcie klawisza, najechanie kursorem myszy i inne.

Aby powiązać dowolne z tych zdarzeń z plikiem v-on dyrektywę, zastąp Kliknij zdarzenie z nazwą żądanego zdarzenia:

<przycisk @keydown.enter="licznik++">Kliknijprzycisk>

Powyższy kod konfiguruje detektor zdarzeń na przycisk który nasłuchuje wciśnięcie klawisza wydarzenie. Gdy dowolny klawisz zostanie naciśnięty, gdy przycisk ma fokus, Vue ocenia licznik++ wyrażenie.

W większości aplikacji Vue możesz obsługiwać bardziej złożoną logikę opartą na określonych zdarzeniach. Zdarzenia i metody współpracują ze sobą, wykonując działania aplikacji na podstawie zdarzenia.

Właściwość metod w Obiekt opcji Vue zawiera ważne funkcje, których aplikacja Vue potrzebuje do zwiększenia reaktywności. Dzięki właściwości Methods w Vue możesz obsługiwać złożoną logikę opartą na zdarzeniach.

Oto przykład aplikacji Vue, która pokazuje zdarzenia obsługiwane przez właściwość metod:

<HTML>
<głowa>
<scenariuszźródło=" https://unpkg.com/vue@3/dist/vue.global.js">scenariusz>
głowa>
<ciało>
<dzID=„aplikacja”>
<przycisk @Kliknij="przyrost">Dodaj 1przycisk>
<przycisk @Kliknij="zmniejszyć">zmniejszyć 1przycisk>
<P>{{ lada }}P>
dz>
<scenariusz>
 const aplikacja = Vue.createApp({
 dane() {
 powrót {
 tekst: „Vue jest niesamowity!”,
 licznik: 0
 }
 },
 metody: {
 przyrost(){
 ten.licznik = ten.licznik + 1
 },
 zmniejszyć() {
 ten.licznik = ten.licznik - 1
 }
 }
 })
 app.mount('#aplikacja')
scenariusz>
ciało>
HTML>

Powyższa aplikacja Vue przedstawia sposób łączenia zdarzeń z metodami. Aplikacja ma dwa przyciski, które użytkownicy mogą kliknąć, aby zwiększyć lub zmniejszyć wartość licznika we właściwości danych.

Aplikacja osiąga to dzięki @Kliknij dyrektywa. The @Kliknij dyrektywa wskazuje na funkcje we właściwości metod w celu manipulowania wartością licznika.

Podczas łączenia argumentu ze zdarzeniem kliknięcia można dostosować metody przyrostu i redukcji, aby dodać lub zmniejszyć wartość licznika na podstawie argumentu przekazanego do metody.

jak tak:

<ciało>
<dzID=„aplikacja”>
<przycisk @Kliknij=„przyrost (5)”>Dodaj 5przycisk>
<przycisk @Kliknij=„zredukuj (3)”>zmniejszyć 3przycisk>
<P>{{ lada }}P>
dz>


<scenariusz>
 const aplikacja = Vue.createApp({
 dane() {
 powrót {
 tekst: „Vue jest niesamowity!”,
 licznik: 0
 }
 },
 metody: {
 przyrost (liczba){
 ten.licznik = ten.licznik + liczba
 },
 zmniejsz (liczba) {
 ten.licznik = ten.licznik - liczba
 }
 }
 })
 app.mount('#aplikacja')
scenariusz>
ciało>

Ten blok kodu rozciąga się na poprzednią aplikację Vue, aby umożliwić przekazywanie argumentów do metod połączonych z detektorem zdarzeń kliknięcia na przycisku.

Metody inkrementacji i redukcji w instancji Vue pobierają argument num w celu zwiększenia lub zmniejszenia właściwości licznika.

Ten przykład pokazuje, jak można pracować z argumentami podczas łączenia metod ze zdarzeniami w Vue. Łączenie metod ze zdarzeniami może pomóc w zwiększeniu interaktywności aplikacji Vue.

Eksploracja modyfikatorów Prevent i Stop w Vue

Modyfikatory zdarzeń w Vue pozwalają tworzyć lepsze detektory zdarzeń, które odpowiadają specyficznym potrzebom Twojej aplikacji. Aby wykorzystać te modyfikatory zdarzeń, połącz modyfikatory ze zdarzeniami w Vue.

Na przykład:

<formularz @przesłać.zapobiegać=„uchwyt Prześlij”>
<wejścietyp="tekst"model v="tekst">
<przycisktyp="składać">Składaćprzycisk>
formularz>

Powyższy blok kodu tworzy łańcuchy zapobiegać modyfikator do zdarzenia przesyłania. The zapobiegać modyfikator jest powszechnie używany podczas pracy z formularzami w Vue.

The zapobiegać Celem modyfikatora jest zapobieganie domyślnemu zachowaniu przesyłania formularza, czyli przeładowaniu strony. Za pomocą zapobiegać, Vue może kontynuować swoje procesy, podczas gdy uchwytPrześlij Metoda zajmuje się przesłaniem formularza.

Innym przykładem bardzo przydatnego modyfikatora jest tzw zatrzymywać się modyfikator zdarzenia. The zatrzymywać się modyfikator zdarzenia zatrzymuje propagację zdarzenia w górę drzewa DOM.

Zwykle zdarzenie elementu podrzędnego HTML przechodzi przez drzewo DOM, aktywując detektory zdarzeń dołączone do elementów nadrzędnych. Możesz temu zapobiec propagacja zdarzeń z zatrzymywać się modyfikator i uniemożliwić zdarzenie wyzwalanie dalszych detektorów zdarzeń.

Aby zrozumieć, w jaki sposób zatrzymywać się modyfikator zatrzymuje propagację zdarzeń w górę drzewa DOM, rozważ poniższy blok kodu:

<ciało>
<dzID=„aplikacja”>
<dz @Kliknij=„zewnętrzne kliknięcie”klasa="zewnętrzny">
<dz @kliknij.zatrzymaj=„wewnętrzne kliknięcie”klasa="wewnętrzny">
<przycisk @Kliknij=„Kliknij przycisk”klasa="przycisk">Kliknijprzycisk>
dz>
dz>
dz>
<scenariusz>
 const aplikacja = Vue.createApp({
 metody: {
 zewnętrzneClick() {
 console.log('Kliknięcie zewnętrzne')
 },
 innerClick() {
 console.log('Wewnętrzne kliknięcie')
 },
 buttonClick() {
 console.log('Kliknięcie przycisku')
 }
 }
 });
 app.mount("#aplikacja");
scenariusz>
ciało>

Powyższy blok kodu ma trzy detektory zdarzeń dołączone do trzech różnych elementów. The przycisk element znajduje się wewnątrz elementu div z wewnętrzny class, podczas gdy div z wewnętrzny class znajduje się wewnątrz elementu div z zewnętrzny klasa.

Każdy z trzech elementów nasłuchuje Kliknij zdarzenie i rejestruje w konsoli nazwę klikniętego elementu HTML. Poniżej znajduje się dodatkowa stylizacja CSS klasy, aby ułatwić zrozumienie powyższego bloku kodu:

<głowa>
<styl>
 .zewnętrzny {
 wypełnienie: 20px;
 kolor tła: czarny;
 }
 .wewnętrzny {
 wypełnienie: 20px;
 kolor tła: szary;
 }
 przycisk {
 wypełnienie: 10px;
 kolor tła: biały;
 obramowanie: 2 piksele jednolita czerń;
 rozmiar czcionki: 16px;
 grubość czcionki: pogrubiona;
 kursor: wskaźnik;
 }
styl>
głowa>

Po uruchomieniu programu utworzona aplikacja Vue będzie wyglądać następująco:

Zauważ, że po kliknięciu przycisku program wywołuje metodę przyciskKliknij metoda i rejestruje komunikat w konsoli. Program wywołuje również tzw wewnętrzne kliknięcie metoda.

Jednak program nie wywołuje metody zewnętrzne kliknięcie metoda, ponieważ blok kodu dodał a zatrzymywać się modyfikator do wewnętrzne kliknięcie słuchacz zdarzeń. Zapobiega to rozprzestrzenianiu się zdarzenia w górę drzewa DOM.

Bez zatrzymywać się modyfikator, program wywoła metodę przyciskKliknij metody po kliknięciu przycisku, a zdarzenie będzie kontynuowane w górę drzewa, docierając do wewnętrzne kliknięcie metoda, a następnie zewnętrzne kliknięcie metoda.

Obsługa zdarzeń w aplikacjach internetowych

Nauczyłeś się, jak używać wiązania zdarzeń w Vue, aby dołączać detektory zdarzeń do elementów i jak wywoływać metody, gdy wystąpią zdarzenia. Zrozumiałeś również, jak używać modyfikatorów zdarzeń do dostosowywania zachowania zdarzeń.

Aplikacje internetowe polegają na jakiejś formie zdarzeń użytkownika w celu wykonywania funkcji. JavaScript jest wbudowany z wieloma metodami do przechwytywania i obsługi różnych tych zdarzeń. Te zdarzenia pomagają w tworzeniu interaktywnych aplikacji.