Vue.js w akcji - ebook

Vue.js jest lekkim, nowoczesnym frameworkiem rozwijanym przez informatyków, projektantów, inżynierów i osoby, które zawodowo interesują się wrażeniami użytkowników. Służy do tworzenia reaktywnych i atrakcyjnych wizualnie klienckich aplikacji internetowych. Pozwala na budowanie zarówno dość prostych, jak i bardzo złożonych systemów. Udostępnia powiązania dwukierunkowe, reaktywny interfejs użytkownika oraz logiczną strukturę projektów. Vue.js umożliwia pisanie czytelnego i zwięzłego kodu. Tworzenie aplikacji z użyciem Vue w języku JavaScript i z biblioteką do zarządzania stanem Vuex jest czystą przyjemnością.

Ta książka to praktyczny przewodnik po frameworku Vue.js przeznaczonym dla programistów zaznajomionych z JavaScriptem, HTML-em i CSS-em. Pozwala na szybkie poznanie tego narzędzia. Przedstawiono w niej zasady łatwego zarządzania stanem z użyciem biblioteki Vuex oraz techniki budowania niestandardowych dyrektyw. Poszczególne zagadnienia zilustrowano praktycznymi fragmentami kodu źródłowego. Aby umożliwić czytelnikom płynne przejście do tworzenia kompletnych systemów, kolejne tajniki Vue.js pokazano na przykładzie stopniowo rozwijanej aplikacji sklepu internetowego z koszykiem zakupowym, interfesjem magazynowym i modułem do zarządzania magazynem.

W tej książce między innymi:

• podstawy Vue.js
• instancje Vue.js i budowa aplikacji
• model reaktywny, komponenty i trasowanie
• animacje, efekty przejść i inne możliwości frameworka
• modelowanie danych i testowanie aplikacji

Vue.js. Napisz piękną aplikację!

Słowo wstępne 9

Przedmowa 11

Podziękowania 13

O książce 15

O autorze 19

CZĘŚĆ 1. POZNAJEMY VUE.JS 21

Rozdział 1. Wprowadzenie do Vue.js 23

• 1.1. Na ramionach giganta 24
  
  • 1.1.1. Wzorzec projektowy Model-Widok-Kontroler 24
  • 1.1.2. Wzorzec Model-Widok-ModelWidoku 26
  • 1.1.3. Czym są aplikacje reaktywne? 27
  • 1.1.4. Kalkulator JavaScript 28
  • 1.1.5. Kalkulator w wersji Vue 30
  • 1.1.6. Porównanie wersji JavaScript i Vue 31
  • 1.1.7. W jaki sposób Vue ułatwia użycie wzorca MVVM oraz zapewnienie reaktywności? 32
• 1.2. Dlaczego Vue.js? 33
• 1.3. Dalsze przemyślenia 35
• Podsumowanie 36

Rozdział 2. Instancja Vue 37

• 2.1. Nasza pierwsza aplikacja 38
  
  • 2.1.1. Główna instancja Vue 38
  • 2.1.2. Jak się upewnić, że aplikacja działa? 40
  • 2.1.3. Wyświetlanie czegoś w widoku 43
  • 2.1.4. Sprawdzanie właściwości w przeglądarce 44
• 2.2. Cykl życia Vue 45
  
  • 2.2.1. Dodawanie funkcji obsługi cyklu życia 47
  • 2.2.2. Badanie kodu demonstrującego cykl życia 48
  • 2.2.3. Czy zostawiać kod funkcji zwrotnych cyklu życia, czy nie? 49
• 2.3. Wyświetlanie produktu 50
  
  • 2.3.1. Definiowanie danych produktu 50
  • 2.3.2. Przygotowywanie widoku produktu 51
• 2.4. Stosowanie filtrów wyjścia 54
  
  • 2.4.1. Pisanie filtra wyjścia 55
  • 2.4.2. Dodawanie filtra do kodu i testowanie różnych wartości 56
• Ćwiczenie 57
• Podsumowanie 58

CZĘŚĆ 2. WIDOK I MODEL WIDOKU 59

Rozdział 3. Dodawanie interaktywności 61

• 3.1. Początkiem danych koszyka jest dodanie tablicy 62
• 3.2. Powiązania ze zdarzeniami DOM 63
  
  • 3.2.1. Podstawy dowiązywania zdarzeń 63
  • 3.2.2. Powiązanie zdarzenia z przyciskiem Dodaj do koszyka 64
• 3.3. Dodanie przycisku koszyka i liczby produktów 65
  
  • 3.3.1. Kiedy stosować właściwości obliczane? 66
  • 3.3.2. Sprawdzanie zdarzeń aktualizacji w przypadku stosowania właściwości obliczanych 68
  • 3.3.3. Wyświetlanie liczby produktów w koszyku i testowanie 71
• 3.4. Dodawanie afordancji do przycisku 74
  
  • 3.4.1. Śledzenie stanu magazynu 75
  • 3.4.2. Praca z właściwościami obliczanymi i stanem magazynu 76
  • 3.4.3. Podstawy dyrektywy v-show 77
  • 3.4.4. Stosowanie dyrektyw v-if oraz v-else w celu wyświetlania nieaktywnego przycisku 78
  • 3.4.5. Dodanie przycisku koszyka działającego jako przełącznik 80
  • 3.4.6. Użycie dyrektywy v-if do wyświetlania formularza zamówienia 81
  • 3.4.7. Porównanie dyrektyw v-show oraz v-if i v-else 83
• Ćwiczenie 84
• Podsumowanie 84

Rozdział 4. Formularze i pola 85

• 4.1. Stosowanie powiązań v-model 86
• 4.2. Rzut oka na powiązania wartości 94
  
  • 4.2.1. Powiązanie wartości z polem wyboru 94
  • 4.2.2. Stosowanie powiązań danych i przycisków opcji 96
  • 4.2.3. Przedstawienie dyrektywy v-for 97
  • 4.2.4. Dyrektywa v-for bez opcjonalnych kluczy 100
• 4.3. Prezentacja modyfikatorów 101
  
  • 4.3.1. Stosowanie modyfikatora .number 101
  • 4.3.2. Usuwanie odstępów z wpisanych wartości 103
  • 4.3.3. Modyfikator .lazy dyrektywy v-model 104
• Ćwiczenie 105
• Podsumowanie 105

Rozdział 5. Dyrektywy warunkowe, pętle i listy 107

• 5.1. Wyświetlanie komunikatu o stanie magazynu 108
  
  • 5.1.1. Wyświetlanie dostępnych egzemplarzy przy użyciu v-if 108
  • 5.1.2. Dodawanie innych komunikatów z użyciem dyrektyw v-else oraz v-else-if 110
• 5.2. Przeglądanie listy produktów 112
  
  • 5.2.1. Dodawanie oceny przy użyciu zakresu dyrektywy v-for 112
  • 5.2.2. Powiązanie klasy elementu HTML z oceną produktu 114
  • 5.2.3. Dodanie produktów 117
  • 5.2.4. Importowanie produktów z pliku products.json 119
  • 5.2.5. Refaktoryzacja kodu aplikacji i dodanie dyrektywy v-for 120
• 5.3. Sortowanie rekordów 126
• Ćwiczenie 127
• Podsumowanie 127

Rozdział 6. Stosowanie komponentów 129

• 6.1. Czym są komponenty? 130
  
  • 6.1.1. Tworzenie komponentów 130
  • 6.1.2. Rejestracja globalna 131
  • 6.1.3. Rejestracja lokalna 132
• 6.2. Zależności w komponentach 133
• 6.3. Stosowanie właściwości props do przekazywania danych 135
  
  • 6.3.1. Właściwości literałowe 135
  • 6.3.2. Dynamiczne właściwości props 136
  • 6.3.3. Walidacja właściwości props 139
• 6.4. Definiowanie szablonu komponentu 142
  
  • 6.4.1. Stosowanie wpisanych łańcuchów szablonów 142
  • 6.4.2. Element script typu text/x-template 143
  • 6.4.3. Komponenty jednoplikowe 144
• 6.5. Stosowanie zdarzeń niestandardowych 145
  
  • 6.5.1. Nasłuchiwanie zdarzeń 146
  • 6.5.2. Modyfikowanie właściwości przy użyciu .sync 148
• Ćwiczenie 149
• Podsumowanie 149

Rozdział 7. Zaawansowane zastosowania komponentów i trasowanie 151

• 7.1. Stosowanie gniazd 152
• 7.2. Rzut oka na gniazda nazwane 155
• 7.3. Gniazda z zasięgiem 157
• 7.4. Tworzenie aplikacji z komponentami dynamicznymi 159
• 7.5. Tworzenie komponentów asynchronicznych 162
• 7.6. Konwersja aplikacji składu dla zwierzaków z użyciem Vue-CLI 163
  
  • 7.6.1. Tworzenie nowej aplikacji przy użyciu Vue-CLI 165
  • 7.6.2. Konfigurowanie tras 166
  • 7.6.3. Dodanie stylów CSS, Bootstrapa i biblioteki Axios 168
  • 7.6.4. Przygotowanie komponentów 170
  • 7.6.5. Tworzenie komponentu Form 172
  • 7.6.6. Dodanie komponentu Main 173
• 7.7. Stosowanie tras 176
  
  • 7.7.1. Dodanie trasy produktu z parametrami 176
  • 7.7.2. Konfiguracja router-link z użyciem znaczników 180
  • 7.7.3. Określanie stylów z użyciem komponentu router-link 182
  • 7.7.4. Dodanie trasy podrzędnej edit 183
  • 7.7.5. Stosowanie przekierowań i znaków wieloznacznych 185
• Ćwiczenie 187
• Podsumowanie 187

Rozdział 8. Efekty przejść i animacje 189

• 8.1. Podstawy efektów przejść 189
• 8.2. Podstawy animacji 194
• 8.3. Funkcje zwrotne animacji 196
• 8.4. Efekty przejść dla komponentów 199
• 8.5. Aktualizacja aplikacji składu dla zwierzaków 202
  
  • 8.5.1. Dodawanie efektu przejścia do aplikacji sklepu dla zwierzaków 202
  • 8.5.2. Dodawanie animacji do aplikacji składu dla zwierzaków 204
• Ćwiczenie 206
• Podsumowanie 206

Rozdział 9. Rozszerzanie Vue 207

• 9.1. Wielokrotne stosowanie możliwości funkcjonalnych dzięki wstawkom 208
  
  • 9.1.1. Wstawki globalne 212
• 9.2. Poznawanie dyrektyw niestandardowych na przykładach 213
  
  • 9.2.1. Globalne dyrektywy niestandardowe z modyfikatorami, wartościami i argumentami 216
• 9.3. Funkcje renderujące i JSX 219
  
  • 9.3.1. Przykład funkcji renderującej 220
  • 9.3.2. Przykład JSX 223
• Ćwiczenie 227
• Podsumowanie 228

CZĘŚĆ 3. MODELOWANIE DANYCH, KORZYSTANIE Z API I TESTOWANIE 229

Rozdział 10. Vuex 231

• 10.1. Biblioteka Vuex - do czego może się przydać? 232
• 10.2. Stan i modyfikacje w bibliotece Vuex 233
• 10.3. Akcesory get i akcje 237
• 10.4. Dodawanie Vuex do aplikacji Vue-CLI na przykładzie składu dla zwierzaków 240
  
  • 10.4.1. Instalacja Vuex w aplikacji Vue-CLI 240
• 10.5. Metody pomocnicze Vuex 244
• 10.6. Krótka prezentacja modułów 247
• Ćwiczenie 249
• Podsumowanie 249

Rozdział 11. Komunikacja z serwerem 251

• 11.1. Renderowanie po stronie serwera 252
• 11.2. Wprowadzenie do Nuxt.js 253
  
  • 11.2.1. Tworzenie aplikacji do wyszukiwania muzyki 254
  • 11.2.2. Tworzenie projektu i zainstalowanie zależności 257
  • 11.2.3. Tworzenie elementów aplikacji i komponentów 260
  • 11.2.4. Aktualizacja domyślnego układu 263
  • 11.2.5. Dodanie magazynu Vuex 264
  • 11.2.6. Stosowanie oprogramowania warstwy pośredniej 264
  • 11.2.7. Generowanie tras w Nuxt.js 266
• 11.3. Komunikacja z serwerem na przykładzie Firebase i VuexFire 270
  
  • 11.3.1. Konfiguracja Firebase 271
  • 11.3.2. Konfigurowanie aplikacji składu dla zwierzaków do korzystania z Firebase 274
  • 11.3.3. Przechowywanie stanu uwierzytelniania w magazynie Vuex 277
  • 11.3.4. Uzupełnienie komponentu nagłówka o informacje uwierzytelniające 278
  • 11.3.5. Modyfikacja Main.vue i zastosowanie w nim bazy danych Firebase 282
• Ćwiczenie 283
• Podsumowanie 283

Rozdział 12. Testowanie 285

• 12.1. Tworzenie przypadków testowych 286
• 12.2. Ciągła integracja, dostarczanie i wdrażanie 287
  
  • 12.2.1. Integracja ciągła 287
  • 12.2.2. Dostarczanie ciągłe 288
  • 12.2.3. Wdrażanie ciągłe 289
• 12.3. Rodzaje testów 289
• 12.4. Przygotowywanie środowiska 290
• 12.5. Pisanie pierwszego przypadku testowego z użyciem vue-test-utils 292
• 12.6. Testowanie komponentów 296
  
  • 12.6.1. Testowanie właściwości props 296
  • 12.6.2. Testowanie tekstów 297
  • 12.6.3. Testowanie klas CSS 298
  • 12.6.4. Testowanie z użyciem atrapy Vuex 299
• 12.7. Konfiguracja debuggera Chrome 301
• Ćwiczenie 303
• Podsumowanie 304

Dodatek A. Przygotowywanie środowiska 305

Dodatek B. Rozwiązania ćwiczeń 313