Vue.js w akcji Erik Hanchett, Benjamin Listwon

Spis treści książki

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

pokaż cały spis treści

ukryj recenzje