Obecnie istnieje tak wiele frameworków JavaScript, że śledzenie ich wszystkich może być trudne, a na pewno jest mało prawdopodobne, że ktokolwiek opanuje je w całości. Dla większości z nas oznacza to, że będziemy musieli wybierać platformy programistyczne, w które poświęcimy czas na naukę.
W tym artykule przyjrzymy się pokrótce Vue.js, abyś mógł sam zdecydować, czy będzie on pasował do projektów, nad którymi zwykle pracujesz, i czy będzie dla Ciebie odpowiedni.
Co to jest Vue.js?
Chociaż zwyczajowo nie pisze się go wielką literą, „Vue” jest w rzeczywistości akronimem słowa Visual Understanding Environment. Jego głównym celem jest ułatwienie tworzenia aplikacji internetowych poprzez zmniejszenie złożoności kodu. Ma wiele wspólnego z React.js, ale aktualna wersja Vue renderuje szybciej niż React i wydaje się być bardziej wydajna.
Czy Vue jest trudny do nauczenia?
Jeśli jesteś już doświadczonym programistą, nie powinieneś mieć większych trudności z rozpoczęciem pracy z Vue, ale niewłaściwie byłoby opisywać go jako język dla początkujących. Aby zbudować z nim coś praktycznego, musisz mieć pewne doświadczenie z HTML, CSS i JavaScript.
Krzywa uczenia się w Vue jest nieco mniej stroma niż w React i znacznie mniej stroma niż w Angular. Można więc dokładnie stwierdzić, że Vue jest stosunkowo łatwy do nauczenia w porównaniu do innych popularnych frameworków programistycznych.
Jak Vue pomaga osiągać cele?
Różni się to nieco w zależności od tego, jaki jest twój cel, ale ogólnie wiążesz bloki kodu z elementami div HTML. Ta metodologia ułatwia wprowadzenie interaktywności i treści dynamicznych niż w przypadku zwykłego HTML, CSS i JavaScript.
Z drugiej strony, w Vue tak naprawdę nie można zrobić więcej niż przy użyciu bardziej konwencjonalnych sposobów. Korzystanie z Vue to po prostu kwestia ułatwienia Ci pracy w fazie programowania, ale nie ma to większego wpływu na wynik końcowy, poza niewielkim wpływem na wydajność wynikającym z ładowania kodu frameworka.
Kolejną zaletą Vue jest to, że zapewnia modułowość, co oznacza, że możesz ponownie wykorzystać opracowane komponenty w wielu projektach.
Czy Vue ma jakieś fajne asy w zanadrzu?
Z pewnością tak, a najlepsze z nich to wbudowane efekty przejścia, które pozwalają przejąć kontrolę nad tym, co byłoby innewise być strukturami CSS i JavaScript wymagającymi dużej ilości kodu, wykorzystującymi tylko jedną lub dwie linie kodu. Oszczędza to czas i wysiłek podczas tworzenia aplikacji.
Kolejną przydatną funkcją jest natywne renderowanie dla określonych typów urządzeń, takich jak Android i iOS, dzięki czemu możesz dostosować aplikacje do urządzeń, na których działają, bez dużej dodatkowej pracy.
Pierwsze kroki
Jak wspomniano wcześniej, Vue jest łatwy do nauczenia, ale nie jest to język dla początkujących. Nadal musisz wiedzieć, jak poruszać się po bloku kodu.
Problem w tym, że jak większość frameworków, dokumentacja jest bardzo leniwa i skupia się głównie na przekonaniu Cię do jej użycia. W dokumentacji dużo mniej uwagi poświęca się wyjaśnianiu, jak wszystko działa i dlaczego robisz wszystko w określony sposób. Praktycznie każdy oficjalny przykład frameworka, jaki kiedykolwiek stworzono, pomija istotne elementyformatjon, który trzeba godzinami przeglądać, żeby odkryć. Jest to wada występująca również w dokumentacji i przykładach Vue.
Aby ułatwić zrozumienie, co naprawdę musisz zrobić, aby odtworzyć ten projekt, wykonaj następujące wymagane kroki:
1. Dodaj skrypt odwołujący się do vue.js
Aby zoptymalizować szybkość, najlepiej umieścić to po całej zawartości strony, ale tuż przed zamykającym tagiem treści w źródle HTML. W tej sekcji mogą być także ładowane inne zasoby strony, a kolejność ładowania określa kolejność wstawiania każdego zasobu.
Oto przykład włączenia vue.js z CDN:
A oto przykład włączenia vue.js z katalogu na własnym serwerze:
Bez tego odniesienia do vue.js nic związanego z Vue nie może się wydarzyć.
2. Dodaj komponenty Vue do treści HTML
O to właśnie chodzi z tym kodem:
Na razie nie ma to większego sensu, ale część Vue to pusty element „demo-grid” plus dodanie „dyrektywy v” do danych wejściowych zapytania (w tym przypadku jest to „v-model ”, który służy do wiązania kodu Vue w celu utworzenia danych wejściowych).
3. Jeśli projekt wymaga szablonu komponentu, dodaj go do treści HTML
Ta sekcja kodu jest nietypowa, ponieważ wygląda jak zwykły kod HTML wewnątrz znacznika skryptu, co zmyli większość programów do edycji HTML (zwróć uwagę, że kolory wskaźników są w niektórych miejscach nieprawidłowe).
4. Dodaj instancję Vue
Powinna to być jedna z ostatnich rzeczy, które pojawiają się na stronie, ponieważ wykonuje ona zadanie renderowania dynamicznego. Zapewnia to pewne korzyści optymalizacyjne w porównaniu z dodaniem go wcześniej na stronie.
- Linia 46 określa, że przeglądarka powinna szukać komponentu na stronie o nazwie „demo-grid”, a linia 47 określa, że jako szablonu komponentu należy użyć „#grid-template” (jest to kod szablonu dodany w kroku 3 z linii 9 do linii 30).
- Blok od linii 48 do linii 52 definiuje właściwości komponentu.
- Linie od 53 do 62 definiują funkcję sortowania danych w tabeli.
- Linie od 63 do 85 definiują funkcję filtrowania danych (z wyników zapytania).
- Linie od 86 do 90 definiują funkcję pisania wielką literą słów w zestawie danych.
- Linie od 91 do 97 definiują metodę sortowania danych.
5. Dodaj kod uruchamiania przed znacznikiem skryptu zamykającego
Jeśli wykonałeś kroki od 1 do 4 i otworzyłeś plik w przeglądarce, zobaczysz jedynie pole wyszukiwania i nic więcej. Dzieje się tak, ponieważ wszystko, co jest potrzebne do zbudowania tabeli, zostało zdefiniowane, ale nie zostało utworzone. Zatem w kroku 5 dodajemy kod, który faktycznie tworzy tabelę zdefiniowaną we wszystkich poprzednich krokach.
- Linia 100 tworzy nowy obiekt Vue.
- Linia 101 określa, z którym elementem ma zostać powiązana akcja.
- Linie od 102 do 111 zawierają dane obiektu, które zostaną powiązane z elementem.
Testowanie
Po zdefiniowaniu i utworzeniu wymaganego obiektu możesz teraz przetestować wynik. Przygotuj się na rozczarowanie, ponieważ to właśnie powinieneś zobaczyć w przeglądarce:
Co się dzieje? Dlaczego to jest takie nudne? Dzieje się tak dlatego, że nie zastosowano żadnej stylizacji. Jeśli użyjemy domyślnej stylizacji z przykładu JSFiddle, tabela będzie wyglądać następująco:
Wpisanie czegokolwiek w polu wyszukiwania (bez uwzględniania wielkości liter) spowoduje odpowiednie przefiltrowanie wyników:
Kliknięcie nagłówka kolumny umożliwia zmianę kolejności wyświetlania. Na przykład kliknięcie nagłówka kolumny „Moc” spowoduje zmianę wyświetlanych wyników w kolejności poziomu mocy.
Udoskonalanie i dostosowywanie
Innym problemem związanym z przykładami frameworku jest to, że zwykle nie zawierają one zbyt wieleformataby pomóc osobie niezaznajomionej z bazą kodu dowiedzieć się, jak zastosować w terenie to, co widzi w przykładzie. Vue wykonuje świetną robotę w porównaniu z Bootstrapem (który notorycznie jest niedopracowanyformative), ale wciąż pozostawia wiele pytań bez odpowiedzi.
Oto kilka zmian, które możemy wprowadzić w tej aplikacji, aby zmienić jej wygląd i działanie:
- Stylizuj tabelę jako Bootstrap stripestół
- Zmień liczbę kolumn
- Zmień dane na coś zupełnie innego
1. Dodanie Bootstrapa
2. Zawijanie elementu w tabelę Bootstrap
3. Dostosowanie elementu głównego do korzystania z modelu układu Bootstrap
4. Zmiana stylizacji strzałek
5. Modyfikacja danych
6. Testowanie
- Niefiltrowane i niesortowane
- Posortowane według dyrektywy (rosnąco)
- Posortowane według użycia (rosnąco)
- Filtrowane według „warunkowe”
- Filtrowane według „warunkowego” i sortowane według dyrektywy (rosnąco)
Końcowe przemyślenia
Mamy nadzieję, że z tych przykładów jasno wynikało, że ze wspólnego fragmentu kodu zbudowaliśmy dwie aplikacje o bardzo różnym wyglądzie i zawartości. Dzięki Vue bardzo łatwo jest ponownie wykorzystać swój kod w wielu projektach i potencjalnie zyskać znaczną oszczędność czasu.
obraz nagłówka dzięki uprzejmości Aleksandar Savić
Komentarze Odpowiedzi 0