Vue.js 2. Wprowadzenie dla profesjonalistów - ebook

Vue.js jest frameworkiem, który służy do budowy nowoczesnych, reaktywnych i skalowanych aplikacji WWW, a przy tym ułatwia korzystanie z komponentów wielokrotnego użytku. Framework ten powstał jako narzędzie do szybkiego prototypowania, a teraz dynamicznie się rozwija i ewoluuje, dzięki czemu liczba dostępnych funkcji stale rośnie. Prostocie i wszechstronności zawdzięcza ogromne uznanie deweloperów. Z całą pewnością można go uznać za narzędzie niezbędne każdemu, kto buduje kompleksowe aplikacje WWW i pragnie utrzymywać wysokie standardy.

Dzięki tej książce dowiesz się, czym jest Vue.js i jak rozpocząć z nim pracę, przekonasz się także, jakie ma możliwości. Nauczysz się budować dynamiczne aplikacje wykorzystujące właściwości nowoczesnych przeglądarek internetowych i urządzeń. Odkryjesz zalety wzorca MVC (model - widok - kontroler) i dowiesz się, jak zadziwiająco sprawnym językiem stał się JavaScript. Zapoznasz się z anatomią projektu Vue.js, z procesami kompilacji i transformacji oraz nabierzesz biegłości w posługiwaniu się zaawansowanymi funkcjami frameworka. Liczne przykłady pozwolą Ci na niemal natychmiastowe przetestowanie opisywanych zagadnień w praktyce. W rezultacie bardzo szybko będziesz przygotowany do tworzenia zaawansowanych, reaktywnych i dynamicznych aplikacji WWW!

W książce między innymi:

• zarys budowy frameworka, jego instalacja i sposoby wykorzystania
• wzorzec MVC i architektura aplikacji w Vue.js 2
• dynamiczne aplikacje WWW po stronie klienta
• korzystanie z usług REST
• rozszerzanie i modyfikowanie Vue.js w zależności od potrzeb

Vue.js 2: zyskaj większe możliwości i pisz najlepsze aplikacje!

 

O autorze 15

 

O korektorze merytorycznym 17

CZĘŚĆ I. ZACZYNAMY PRACĘ Z VUE.JS 19

Rozdział 1. Twoja pierwsza aplikacja w Vue.js 21

• Przygotowanie środowiska programistycznego 21
  • Instalowanie Node.js 21
  • Instalowanie pakietu @vue/cli 22
  • Instalowanie narzędzia Git 23
  • Instalowanie edytora 23
  • Instalowanie przeglądarki 24
• Tworzenie projektu 24
  • Struktura podkatalogów w projekcie 24
  • Uruchamianie narzędzi deweloperskich 25
• Zamiana treści zastępczych 26
  • Dodawanie frameworka do obsługi stylów CSS 28
  • Stylowanie elementów HTML 29
• Dodawanie treści dynamicznych 29
  • Wyświetlanie listy zadań 31
  • Dodawanie przycisku wyboru (checkbox) 33
  • Filtrowanie zakończonych zadań 34
  • Tworzenie nowych zadań 36
  • Trwałe przechowywanie danych 38
  • Ostatnie szlify 40
• Podsumowanie 42

Rozdział 2. Zrozumieć Vue.js 43

• Czy warto korzystać z Vue.js? 44
  • Zasada działania aplikacji wielostronicowych 44
  • Zasada działania SPA 44
  • Złożoność aplikacji 46
• Co muszę wiedzieć? 46
• Jak skonfigurować swoje środowisko programistyczne? 46
• Jaki jest układ treści w tej książce? 46
  • Część I. Zaczynamy pracę z Vue.js 47
  • Część II. Vue.js pod lupą 47
  • Część III. Zaawansowane funkcje Vue.js 47
• Czy znajdę tu dużo przykładów? 47
• Gdzie znajdę przykładowe kody? 49
• Podsumowanie 49

Rozdział 3. Podstawy HTML i CSS 51

• Przygotowania do rozdziału 51
• Jak działają elementy języka HTML? 53
  • Element a jego treść 54
  • Jak działają atrybuty? 55
• Analiza przykładowego dokumentu HTML 56
• Jak działa Bootstrap? 58
  • Stosowanie podstawowych klas Bootstrapa 58
  • Stosowanie Bootstrapa do tworzenia siatki 60
  • Stosowanie Bootstrapa do stylowania tabel 60
  • Stosowanie Bootstrapa do stylowania formularzy 62
• Podsumowanie 63

Rozdział 4. Elementarz JavaScriptu 65

• Przygotowania do rozdziału 66
• Stosowanie instrukcji 68
• Tworzenie i używanie funkcji 68
  • Definicja funkcji z parametrami 70
  • Tworzenie funkcji zwracających wyniki 71
  • Przekazywanie funkcji przez argument 71
• Zmienne i typy 72
  • Typy prymitywne 74
• Operatory języka JavaScript 76
  • Instrukcje warunkowe 77
  • Operator równości a operator identyczności 77
  • Jawna konwersja typów 78
• Obsługa tablic 79
  • Literały tablicowe 80
  • Odczyt i modyfikacja zawartości tablicy 80
  • Przeglądanie zawartości tablicy 81
  • Operator rozwinięcia 81
  • Wbudowane metody do obsługi tablic 82
• Obsługa obiektów 82
  • Literały obiektowe 84
  • Stosowanie funkcji jako metod 85
  • Kopiowanie właściwości pomiędzy obiektami 85
• Moduły w języku JavaScript 86
  • Tworzenie i używanie modułów 86
  • Tworzenie wielu mechanizmów w jednym module 88
  • Łączenie wielu plików w jeden moduł 89
• Zasady działania obietnic 90
  • Problemy z asynchronicznym wykonywaniem operacji 91
  • Przykład z użyciem obietnic 91
  • Uproszczenie kodu asynchronicznego 92
• Podsumowanie 93

Rozdział 5. Sklep sportowy: prawdziwa aplikacja 95

• Tworzenie projektu Sklep sportowy 95
  • Dodawanie dodatkowych pakietów 96
  • Przygotowanie REST-owej usługi sieciowej 98
  • Uruchamianie narzędzi projektowych 100
• Tworzenie magazynu danych 101
• Tworzenie magazynu produktów 103
  • Tworzenie listy produktów 104
  • Dodawanie listy produktów do aplikacji 106
  • Przetwarzanie cen 106
  • Obsługa stronicowania listy produktów 108
  • Obsługa wyboru kategorii 114
• Zastosowanie REST-owej usługi sieciowej 117
• Podsumowanie 119

Rozdział 6. Sklep sportowy: rozliczenie i zamówienia 121

• Przygotowania do rozdziału 121
• Tworzenie zastępczej treści dla koszyka 121
• Konfiguracja trasowania adresów URL 122
  • Wyświetlanie trasowanego komponentu 123
• Implementacja funkcji koszyka 124
  • Dodatkowy moduł w magazynie danych 125
  • Obsługa mechanizmu wyboru produktów 126
  • Wyświetlanie zawartości koszyka 128
  • Tworzenie globalnego filtru 131
  • Testowanie podstawowych funkcji koszyka 132
  • Utrwalanie koszyka 132
  • Dodawanie widżetu podsumowania koszyka 135
• Obsługa rozliczenia i dodawania zamówień 137
  • Tworzenie i rejestracja komponentów rozliczenia 138
  • Dodawanie formularza walidacji 141
  • Dodawanie pozostałych pól i walidacji 144
• Podsumowanie 147

Rozdział 7. Sklep sportowy: skalowanie i administracja 149

• Przygotowania do rozdziału 149
• Obsługa dużej ilości danych 150
  • Usprawnienie stronicowania 151
  • Ograniczanie ilości danych pobieranych przez aplikację 152
  • Obsługa wyszukiwania 157
• Praca nad funkcjami administracyjnymi 161
  • Implementacja uwierzytelniania 161
  • Dodawanie struktury komponentu administracyjnego 167
  • Implementacja zarządzania zamówieniami 169
• Podsumowanie 172

Rozdział 8. Sklep sportowy: administrowanie i wdrożenie 173

• Przygotowania do rozdziału 173
• Dodawanie funkcji administracyjnych 173
  • Przedstawianie listy produktów 175
  • Dodawanie treści zastępczej edytora i tras URL 177
  • Implementacja edytora produktów 178
• Wdrażanie sklepu sportowego 181
  • Przygotowanie aplikacji do wdrożenia 181
  • Budowanie aplikacji do wdrożenia 185
  • Testowanie aplikacji gotowej do wdrożenia 186
  • Wdrożenie aplikacji 188
• Podsumowanie 190

CZĘŚĆ II. VUE.JS POD LUPĄ 191

Rozdział 9. Jak działa Vue.js? 193

• Przygotowania do rozdziału 193
  • Dodawanie frameworka Bootstrap CSS 194
  • Uruchamianie przykładowej aplikacji 194
• Tworzenie aplikacji za pomocą API modelu DOM 195
  • Jak działa aplikacja w modelu DOM? 196
• Tworzenie obiektu Vue 198
  • Stosowanie obiektu Vue 199
  • Dodawanie funkcji obsługi zdarzenia 200
  • Modyfikacja komunikatu 201
  • Zasada działania obiektu Vue 202
• Komponenty w praktyce 203
  • Rejestracja i wdrażanie komponentu 204
  • Oddzielanie szablonu od kodu JavaScript 205
• Podsumowanie 207

Rozdział 10. Projekty i narzędzia Vue.js 209

• Tworzenie projektu aplikacji Vue.js 209
  • Konfiguracja lintera 212
  • Zakończenie konfiguracji projektu 212
• Omówienie struktury projektu 213
  • Omówienie katalogu z kodem źródłowym 214
  • Omówienie katalogu pakietów 216
• Omówienie narzędzi deweloperskich 218
  • Omówienie procesów kompilacji i transformacji 219
  • Omówienie serwera deweloperskiego HTTP 221
  • Omówienie mechanizmu zamiany modułów na gorąco 222
  • Omówienie wyświetlania błędów 224
• Stosowanie lintera 226
  • Dostosowywanie reguł lintera 229
• Debugowanie aplikacji 231
  • Analiza stanu aplikacji 231
  • Omówienie debuggera w przeglądarce 231
• Konfiguracja narzędzi deweloperskich 233
• Budowanie aplikacji do wdrożenia 233
  • Instalacja i zastosowanie serwera HTTP 236
• Podsumowanie 237

Rozdział 11. Omówienie wiązań danych 239

• Przygotowania do tego rozdziału 240
• Omówienie składników komponentu 242
  • Omówienie elementu template 242
  • Omówienie elementu script 243
  • Omówienie elementu style 243
• Zmiany komponentu w przykładowej aplikacji 243
• Wyświetlanie wartości danych 244
  • Stosowanie złożonych wyrażeń w wiązaniach danych 247
  • Przeliczanie wartości we właściwościach obliczanych 249
  • Obliczanie wartości danych za pomocą metody 252
  • Formatowanie wartości danych za pomocą filtrów 255
• Podsumowanie 260

Rozdział 12. Stosowanie podstawowych dyrektyw 261

• Przygotowania do tego rozdziału 262
• Ustawianie zawartości tekstowej elementu 263
• Wyświetlanie czystego kodu HTML 265
• Wyświetlanie wybranych elementów 267
  • Wyświetlanie wybranych elementów sąsiednich 268
  • Wybór fragmentów zawartości 270
  • Wybór wyświetlanych elementów za pomocą stylów CSS 272
• Ustawianie atrybutów i właściwości elementu 274
  • Stosowanie obiektu do konfiguracji klas 276
  • Ustawianie pojedynczych stylów 277
  • Ustawianie innych atrybutów 279
  • Ustawianie wielu atrybutów 280
  • Ustawianie właściwości HTMLElement 281
• Podsumowanie 283

Rozdział 13. Obsługa dyrektywy Repeater 285

• Przygotowania do tego rozdziału 285
• Przeglądanie tablicy 287
  • Stosowanie aliasu 289
  • Określanie klucza 291
  • Pobieranie indeksu elementu 293
  • Wykrywanie zmian w tablicy 296
• Wyliczanie właściwości obiektu 298
  • Właściwości obiektu a kwestia kolejności 300
• Powtarzanie elementów HTML bez źródła danych 302
• Stosowanie właściwości obliczanych z dyrektywą v-for 303
  • Stronicowanie danych 303
  • Filtrowanie i sortowanie danych 305
• Podsumowanie 307

Rozdział 14. Obsługa zdarzeń 309

• Przygotowania do tego rozdziału 309
• Obsługa zdarzeń 311
• Omówienie zdarzeń i obiektów zdarzeń 312
• Stosowanie metody do obsługi zdarzeń 313
• Połączenie zdarzeń, metod i elementów powtarzanych 315
• Nasłuchiwanie wielu zdarzeń z tego samego elementu 317
• Stosowanie modyfikatorów obsługi zdarzeń 320
  • Zarządzanie propagacją zdarzeń 320
  • Zapobieganie duplikacji zdarzeń 326
• Omówienie modyfikatorów zdarzeń myszy 327
• Omówienie modyfikatorów zdarzeń klawiatury 328
• Podsumowanie 330

Rozdział 15. Obsługa elementów formularzy 331

• Przygotowania do tego rozdziału 331
• Tworzenie dwukierunkowych wiązań modeli 333
  • Dodawanie wiązania dwukierunkowego 334
  • Dodawanie kolejnego elementu wejściowego 335
  • Upraszczanie wiązań dwukierunkowych 337
• Wiązania z elementami formularzy 338
  • Wiązania do pól tekstowych 338
  • Wiązania do przycisków opcji i wyboru 339
  • Wiązania do elementów typu select 341
• Stosowanie modyfikatorów dyrektywy v-model 343
  • Formatowanie wartości jako liczb 343
  • Opóźnianie aktualizacji 344
  • Usuwanie białych znaków 345
• Wiązania do różnych typów danych 346
  • Wybór tablicy elementów 346
  • Stosowanie własnych wartości w elementach formularza 348
• Walidacja danych w formularzu 351
  • Definiowanie reguł walidacji 353
  • Stosowanie funkcji walidacji 354
  • Bieżące reagowanie na zmiany 357
• Podsumowanie 358

Rozdział 16. Stosowanie komponentów 359

• Przygotowania do tego rozdziału 359
• Omówienie komponentów jako podstawowych składników aplikacji 361
  • Omówienie nazw komponentów i elementów dzieci 363
  • Wykorzystywanie możliwości komponentów w komponentach-dzieciach 365
• Omówienie izolacji komponentów 366
  • Stosowanie propów w komponentach 368
  • Tworzenie własnych zdarzeń 373
  • Stosowanie slotów komponentów 376
• Podsumowanie 381

CZĘŚĆ III. ZAAWANSOWANE FUNKCJE VUE.JS 383

Rozdział 17. Omówienie cyklu życia komponentu Vue.js 385

• Przygotowania do tego rozdziału 386
• Omówienie cyklu życia komponentu 388
  • Omówienie fazy tworzenia 389
  • Omówienie fazy montażu 390
  • Omówienie fazy aktualizacji 392
  • Omówienie fazy zniszczenia 398
• Obsługa błędów komponentów 400
• Podsumowanie 403

Rozdział 18. Luźno powiązane komponenty 405

• Przygotowania do tego rozdziału 406
  • Tworzenie komponentu do wyświetlania produktu 408
  • Tworzenie komponentu edytora produktu 409
  • Wyświetlanie komponentów-dzieci 410
• Omówienie wstrzykiwania zależności 411
  • Tworzenie usługi 411
  • Konsumowanie usługi za pomocą wstrzykiwania zależności 412
  • Przesłanianie usług pochodzących od przodków 413
  • Tworzenie reaktywnych usług 415
  • Zaawansowane wstrzykiwanie zależności 417
• Stosowanie szyny zdarzeń 420
  • Wysyłanie zdarzeń za pomocą szyny zdarzeń 420
  • Odbieranie zdarzeń z szyny zdarzeń 421
  • Tworzenie lokalnych szyn zdarzeń 424
• Podsumowanie 426

Rozdział 19. Stosowanie REST-owych usług sieciowych 427

• Przygotowania do tego rozdziału 427
  • Przygotowanie serwera HTTP 428
  • Przygotowanie przykładowej aplikacji 429
  • Uruchamianie przykładowej aplikacji i serwera HTTP 432
• Omówienie REST-owych usług sieciowych 433
• Konsumowanie REST-owej usługi sieciowej 435
  • Obsługa danych odpowiedzi 435
  • Wykonywanie żądania HTTP 436
  • Otrzymywanie odpowiedzi 437
  • Przetwarzanie danych 438
• Tworzenie usługi HTTP 440
  • Konsumowanie usługi HTTP 440
  • Dodawanie pozostałych operacji HTTP 441
  • Tworzenie usługi obsługi błędów 444
• Podsumowanie 447

Rozdział 20. Stosowanie magazynu danych 449

• Przygotowania do tego rozdziału 449
• Tworzenie i używanie magazynu danych 452
  • Omówienie podziału na stan i mutacje 454
  • Udostępnianie magazynu danych Vuex 456
  • Stosowanie magazynu danych 456
  • Analiza zmian w magazynie danych 460
• Definiowanie właściwości obliczanych w magazynie danych 461
  • Stosowanie gettera w komponencie 463
  • Przekazywanie argumentów do getterów 464
• Wykonywanie operacji asynchronicznych 464
• Otrzymywanie powiadomień o zmianach 468
• Mapowanie funkcji magazynu danych w komponentach 471
• Stosowanie modułów magazynu danych 474
  • Rejestrowanie i stosowanie modułu magazynu danych 475
  • Stosowanie przestrzeni nazw modułów 478
• Podsumowanie 480

Rozdział 21. Komponenty dynamiczne 481

• Przygotowania do tego rozdziału 482
• Przygotowywanie komponentów do dynamicznego cyklu życia 483
  • Pobieranie danych aplikacji 483
  • Zarządzanie zdarzeniami obserwatora 484
• Dynamiczne wyświetlanie komponentów 485
  • Przedstawianie różnych komponentów w elemencie HTML 486
  • Wybór komponentów za pomocą wiązania danych 486
  • Automatyczna nawigacja w aplikacji 490
• Stosowanie komponentów asynchronicznych 494
  • Wyłączanie podpowiedzi wstępnego pobierania 497
  • Konfiguracja leniwego ładowania 498
• Podsumowanie 501

Rozdział 22. Trasowanie URL 503

• Przygotowania do tego rozdziału 503
• Rozpoczynamy pracę z trasowaniem URL 505
  • Dostęp do konfiguracji trasowania 507
  • Stosowanie systemu trasowania do wyświetlania komponentów 507
  • Nawigowanie do innych adresów URL 510
• Omówienie i konfiguracja dopasowania tras URL 513
  • Omówienie dopasowania i formatowania adresów URL 514
  • Stosowanie API historii HTML5 do trasowania 515
  • Stosowanie aliasu trasy 518
  • Pobieranie danych trasowania w komponentach 519
  • Dynamiczne dopasowywanie tras 522
  • Stosowanie wyrażeń regularnych do dopasowywania adresów URL 525
  • Tworzenie tras nazwanych 528
• Obsługa zmian w nawigacji 531
• Podsumowanie 534

Rozdział 23. Elementy związane z trasowaniem URL 535

• Przygotowania do tego rozdziału 536
• Obsługa elementów router-link 537
  • Wybór rodzaju elementu 538
  • Wybór zdarzenia nawigacji 541
  • Stylowanie elementów łącza routera 542
• Tworzenie tras zagnieżdżonych 546
  • Planowanie układu aplikacji 547
  • Dodawanie komponentów do projektu 547
  • Definiowanie tras 548
  • Tworzenie elementów nawigacji 550
  • Testowanie klas zagnieżdżonych 551
• Obsługa nazwanych elementów router-view 553
• Podsumowanie 557

Rozdział 24. Zaawansowane trasowanie URL 559

• Przygotowania do tego rozdziału 559
• Stosowanie odrębnych plików dla powiązanych tras 560
• Ochrona tras 562
  • Definiowanie globalnych strażników nawigacji 562
  • Definiowanie strażników dla konkretnych tras 566
  • Definiowanie strażników tras dla komponentów 570
• Ładowanie komponentów na żądanie 577
  • Wyświetlanie komponentu z komunikatem ładowania 578
• Tworzenie komponentów bez obsługi trasowania 582
• Podsumowanie 585

Rozdział 25. Przejścia 587

• Przygotowania do tego rozdziału 587
  • Tworzenie komponentów 589
  • Konfiguracja trasowania URL 592
  • Tworzenie elementów nawigacji 592
• Rozpoczynamy pracę z przejściami 594
  • Omówienie klas przejść i przejść CSS 596
  • Omówienie sekwencji przejścia 597
• Stosowanie biblioteki do obsługi animacji 598
• Przełączanie pomiędzy wieloma elementami 599
  • Stosowanie przejścia do elementów z trasowaniem URL 601
  • Stosowanie przejścia podczas pojawiania się elementu 603
• Stosowanie przejść dla zmian w kolekcji 604
• Stosowanie zdarzeń przejść 606
  • Stosowanie zdarzeń początkowych i końcowych 608
• Przyciąganie uwagi do innych zmian 609
• Podsumowanie 612

Rozdział 26. Rozszerzanie możliwości Vue.js 613

• Przygotowania do tego rozdziału 614
• Tworzenie własnych dyrektyw 616
  • Omówienie zasady działania dyrektyw 618
  • Stosowanie wyrażeń własnych dyrektyw 620
  • Stosowanie argumentów własnej dyrektywy 621
  • Stosowanie modyfikatorów własnej dyrektywy 622
  • Komunikacja między funkcjami haków 624
  • Dyrektywy jednofunkcyjne 625
• Tworzenie domieszek komponentów 626
• Tworzenie wtyczki Vue.js 629
  • Tworzenie wtyczki 632
  • Stosowanie wtyczki 633
• Podsumowanie 635

Skorowidz 637