Vue.js to bardzo potężna, łatwa do nauczenia i przystępna biblioteka, dzięki której dzięki znajomości HTML, CSS i JavaScript możemy zacząć budować w niej aplikacje internetowe. Vue.js jest zbudowany przez połączenie najlepszych funkcji z już istniejących frameworków Angular i React. Jest to progresywny i reaktywny framework JavaScript, który służy do budowania UI (interfejsów użytkownika) i SPA (aplikacji jednostronicowych), dlatego programiści uwielbiają kodować i czuć swobodę i wygodę podczas tworzenia aplikacji w Vue.js. spójrz na nasłuchiwanie i obsługę zdarzeń w Vue.js., będziemy wiedzieć, że zapewnia ona dyrektywę v-on do nasłuchiwania i obsługi zdarzeń. Możemy użyć dyrektywy v-on, aby słuchać DOM i wykonywać wymagane zadania. Zapewnia również wiele programów obsługi zdarzeń. Jednak w tym artykule będziemy tylko uczyć się i skupiać się na zdarzeniach związanych z kliknięciami. Więc zacznijmy!
Podobnie jak zdarzenie onClick w JavaScript, Vue.js zapewnia v-on:click do nasłuchiwania zdarzeń.
Składnia zdarzenia v-on:click wyglądałaby tak:
< przycisk v-on:kliknij='nazwa_funkcji'>Kliknij</ przycisk >
Vue.js zapewnia skrót @ zamiast używać również v-on.
< przycisk @Kliknij='nazwa_funkcji'>Kliknij</ przycisk >
Vue.js nie kończy się tylko na słuchaniu zdarzenia kliknięcia i wywołaniu funkcji. Umożliwi nam również bezpośrednie pisanie dowolnej operacji arytmetycznej lub czegokolwiek związanego z JavaScriptem w cudzysłowie . Takie jak to:
< przycisk @Kliknij='liczba += 1'>Dodaj</ przycisk >
Vue.js umożliwia wywołanie metody lub funkcji we wbudowanej instrukcji JavaScript, jak pokazano poniżej:
< przycisk @Kliknij='wiadomość('Cześć')'>Pokaż</ przycisk >Korzystając z obsługi zdarzeń Vue.js, możemy również uzyskać dostęp do zdarzenia DOM za pomocą instrukcji inline, przekazując specjalnie dostarczoną przez Vue.js zmienną $event do argumentu metody, tak jak w poniższym przykładzie:
< przycisk @Kliknij='wiadomość('Cześć', $zdarzenie)'>Wyślij</ przycisk >
Vue.js umożliwia również wywoływanie wielu funkcji lub metod. Możemy wywołać więcej niż jedną funkcję i oddzielić je przecinkami, tak jak w tym przykładzie:
< przycisk @Kliknij='first('Hello'), second('Hi', $event) '>Prześlij</ przycisk >Vue.js zapewnia również modyfikatory zdarzeń.
Modyfikatory zdarzeń
Często wraz ze zdarzeniami musimy wywoływać modyfikatory. Tak więc Vue.js zapewnia niektóre z następujących modyfikatorów:
.zatrzymać
Zatrzyma transmisję zdarzenia kliknięcia.
< do @klik.stop='Zrób to'></ do >.zapobiegać
Uniemożliwi to ponowne załadowanie lub przekierowanie strony.
< Formularz @prześlij.zapobiegaj=„przy przesyłaniu”></ Formularz >.pewnego razu
Wyzwoli zdarzenie kliknięcia tylko raz.
< do @klik.raz='Zrób to'></ do >.schwytać
Służy głównie do dodawania detektora zdarzeń.
< div @klik.przechwytywanie='Zrób to'> ...</ div >Możemy również łączyć modyfikatory. Pamiętaj jednak, że kolejność modyfikatorów ma znaczenie i wpłynie na wyniki.
< do @klik.stop.zapobiegaj='Zrób to'></ do >Wniosek
W tym artykule omówiliśmy wszystkie koncepcje obsługi zdarzeń Click od poziomu noob do poziomu ninja. Poznaliśmy różne składnie zapisywania zdarzeń kliknięcia i różne sposoby używania |_+_| dyrektywa dostarczona przez Vue.js dla ułatwienia programistom i różnych modyfikatorów zdarzeń. Aby uzyskać więcej przydatnych treści, takich jak ta, związanych z Vue.js, odwiedź linuxhint.com.