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ę!

Osoby które kupowały "Vue.js w akcji", wybierały także:

• ASP.NET MVC. Kompletny przewodnik dla programistów interaktywnych aplikacji internetowych w Visual Studio 86,77 zÅ‚, (26,90 zÅ‚ -69%)
• jQuery, jQuery UI oraz jQuery Mobile. Receptury 57,74 zÅ‚, (17,90 zÅ‚ -69%)
• PHP i jQuery. Techniki zaawansowane. Wydanie II 65,31 zÅ‚, (20,90 zÅ‚ -68%)
• jQuery. Kurs video. Poziom drugi. Interaktywne banery i funkcjonalne menu 59,00 zÅ‚, (26,55 zÅ‚ -55%)
• jQuery. Kurs video. Poziom pierwszy. Interaktywne interfejsy internetowe 59,00 zÅ‚, (29,50 zÅ‚ -50%)

Spis treści

Vue.js w akcji -- spis treści

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