Vue.js to platforma mikro JavaScript do tworzenia składników wielokrotnego użytku i reaktywnych w Twojej witrynie.
Front-endowe struktury różnią się znacznie zarówno pod względem wielkości, jak i zakresu, gdzie Vue.js wyróżnia się w swoim minimalistycznym projekcie i skupia się na zdolnościach adaptacyjnych. Masz wybór budowania całej witryny za pomocą Vue.js, po prostu przez uczynienie jednego elementu witryny reaktywną lub cokolwiek pomiędzy nimi. Z tego powodu jest bardzo przystępny z płytką krzywą uczenia się.
W tym artykule zajmiemy się podstawowymi komponentami Vue.js oraz sposobami przygotowania i uruchomienia, ale najpierw przyjrzyjmy się, kiedy chcielibyśmy użyć front-endowego framework'a, takiego jak Vue.js i dlaczego .
Front-endowe frameworki, podobnie jak większość frameworków, mają abstrakcyjne wspólne zadania, wspólny mianownik, który można znaleźć pomiędzy projektami. Vue.js specjalnie przedstawia proces tworzenia komponentów HTML, które są dynamicznie aktualizowane za pomocą JavaScript.
Kilka punktów bólu, które Vue.js rozwiązuje dla ciebie, generuje dynamiczny HTML, wiążąc działania elementów HTML z zakresem i kontekstem przechowywania danych oraz śledząc, kiedy HTML musi zostać ponownie automatycznie renderowany.
Załóżmy na przykład, że masz stronę, na której masz dynamiczną listę nazwisk. Być może napisałeś kod, który wygląda mniej więcej tak:
Kiedy budujesz kod HTML ręcznie - poza faktem, że kod szybko staje się trudniejszy do zarządzania w większych przykładach - nie ma prawdziwego połączenia między danymi a wygenerowanym HTML. Jeśli tablica nazw zmienia się, musisz być tego świadomy i ponownie wyświetlić listę. Wszystko to służy tylko do wyświetlania dynamicznych danych, jeśli chcesz dodać funkcje obsługi zdarzeń, takie jak obsługa kliknięcia, aby zapisać zakres, będziesz dalej zagnieżdżać swój kod:
W Vue.js oddzielasz HTML jako szablon, który pokazuje, co wygenerować na podstawie podanych danych, a Vue.js wyrenderuje go automatycznie.
Ten sam przykład w Vue.js wyglądałby następująco:
Mamy pełną separację między aspektami HTML kodu JavaScript a logiką kodu JavaScript, dzięki czemu wszystko jest samodzielne i łatwiejsze w zarządzaniu. Trochę wyprzedzamy się jednak, cofnijmy się i zobaczmy, jak rdzeń Vue.js osiąga to ...
W rdzeniu Vue.js definiujesz korelację między kodem HTML a niektórymi danymi, a za każdym razem, gdy dane ulegną zmianie, HTML zostanie zaktualizowany. Sposób, w jaki to działa, podczas tworzenia instancji komponentu Vue.js przekazuje mu pewne dane w postaci obiektu JavaScript, ten obiekt jest następnie modyfikowany, zastępując jego właściwości śledzącymi metodami getter i setter.
Vue.js analizuje obiekt danych podczas konstruowania HTML i widzi, jakie dane używałeś w celu renderowania różnych elementów HTML w środku. Dzięki temu monitoruje zmiany wprowadzone w obiekcie danych i wie dokładnie, co zaktualizować i kiedy.
Posiadanie tak ścisłego powiązania danych i widoku znacznie upraszcza rozwój aplikacji front-end i minimalizuje błędy z powodu wprowadzenia w błąd. To oddzielenie problemów pozwala skupić się na logice aplikacji bez konieczności zajmowania się aktualizowaniem widoku.
Instalacja dla Vue.js jest tak prosta jak włączenie biblioteki:
Tak jak już wspomniałem, aplikacja Vue.js składa się z obiektu danych i szablonu HTML, w którym można osadzić dane. Tak więc dla naszej pierwszej aplikacji, aby zobaczyć Vue.js w akcji pozwala dodać do body :
Najpierw definiujemy a div który będzie naszym szablonem HTML dla naszej aplikacji Vue.js. Wewnątrz wykorzystujemy podwójne nawiasy do interpolacji danych w HTML.
Wewnątrz rzeczywistej aplikacji Vue.js po prostu definiujemy dane i łączymy się div jako element aplikacji zarówno do renderowania, jak i używania jako szablonu. Następnie, w celu dodania flary, zwiększamy zmienną licznika w naszej aplikacji raz na sekundę.
Wystarczy utworzyć aplikację Vue.js, otwierając ją w przeglądarce. Zobaczysz, że strona aktualizuje się automatycznie za każdym razem, gdy aktualizujemy właściwość danych.
Teraz w większości aplikacji, w których DOM reaguje na zmieniane dane, jest to tylko połowa historii, potrzebujesz również sposobu na aktualizację danych, a Vue.js zajmuje się tymi zdarzeniami i metodami. Metody to przechowywane funkcje uruchamiane w kontekście aplikacji Vue.js.
Zaktualizujmy nasz przykład licznika, aby dodać możliwość uruchamiania i zatrzymywania licznika czasu zamiast po prostu uruchamiać:
W szablonie HTML dodaliśmy przycisk, aby rozpocząć i zatrzymać licznik, aby to osiągnąć, potrzebujemy dynamicznego tekstu na przycisku i potrzebujemy obsługi zdarzenia, gdy klikniemy przycisk.
Aby zadeklarować zdarzenie w Vue.js na elemencie, należy poprzedzić nazwę wszystkich standardowych zdarzeń HTML DOM v-on: , więc mouseover zdarzenie staje się v-on:mouseover albo keyup zdarzenie staje się v-on:keyup . W naszym przykładzie używamy v-on:click atrybut do obsługi click zdarzenie.
Coś, co możesz zauważyć, to to, że dla tekstu przycisku wywołujemy metodę, a nie tylko odwołuje się do przechowywanej właściwości. W wielu sytuacjach dane, które przechowujesz, niekoniecznie muszą mieć format, który chcesz wyświetlić na stronie. W tym miejscu można przetwarzać dane, a cała reaktywność uzyskiwana z właściwości ma zastosowanie przy korzystaniu z metod, jeśli podstawowe dane zmienią szablon odpowiednio się zaktualizuje.
W aplikacji Vue.js mamy teraz nową właściwość zawierającą zmienną licznika i kilka metod. The toggle Metoda, która jest związana z zdarzeniem kliknięcia przycisku, sprawdza, czy timer Właściwość jest ustawiana, uruchamianie lub zatrzymywanie licznika odpowiednio i counterAction Metoda służy do wyświetlenia poprawnej akcji w przycisku, ponownie w oparciu o zmienną licznika czasu.
Ponieważ metoda toggle zmienia właściwość timera , a metoda counterAction , która znajduje się w szablonie Vue.js, używa właściwości timera, w dowolnym momencie przełącza się, że szablon ponownie renderuje tekst przycisku.
Warto zauważyć, że mimo że nie mamy wartości początkowej dla właściwości timera , nadal należy ją zadeklarować podczas tworzenia aplikacji Vue.js. Jeśli nie zadeklarujesz właściwości od początku, właściwość nie będzie reaktywna i nie spowoduje ponownego renderowania HTML po zmianie.
W naszym przykładzie widok jest aktualizowany raz na sekundę, gdy timer jest uruchomiony, więc raz na sekundę nasza metoda liczenia będzie również wywoływana, gdy przycisk zostanie przerysowany. Vue.js pozwala nam to zoptymalizować, buforując wynik metody i tylko przywołując metodę, jeśli zmienione są podstawowe dane używane w metodzie. Jest to również użyteczne, jeśli używasz tej samej wyliczonej właściwości w wielu miejscach na stronie, zamiast przetwarzać wartość wiele razy, buforując wartość, możesz zmniejszyć dużo narzutów.
Zaktualizujmy przykład, aby uwzględnić właściwości buforowane:
Główną różnicą oprócz buforowania jest to, że metody pod computed są odwoływane jako właściwości w przeciwieństwie do metod, więc w szablonie HTML musieliśmy usunąć nawiasy z CountAction .