Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00214 003850 18785045 na godz. na dobę w sumie
Vue.js 2. Tworzenie reaktywnych aplikacji WWW - książka
Vue.js 2. Tworzenie reaktywnych aplikacji WWW - książka
Autor: Liczba stron: 296
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-3874-6 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> jquery - programowanie
Porównaj ceny (książka, ebook, audiobook).

Vue.js jest jednym z najnowszych frameworków. Dzięki swojej prostocie i wszechstronności wzbudza ogromne zainteresowanie twórców aplikacji WWW. Służy do budowy efektywnych, reaktywnych, złożonych i skalowalnych aplikacji WWW, przy czym pozwala na korzystanie z komponentów wielokrotnego użytku. Framework Vue.js powstał jako narzędzie do szybkiego prototypowania, a teraz rozwija się i ewoluuje, dzięki czemu liczba dostępnych funkcji stale rośnie. Vue jest na tyle elastyczny i neutralny względem struktury aplikacji, że z całą pewnością można go uznać za framework wspierający budowę kompleksowych aplikacji WWW.

Dzięki tej książce dowiesz się, jak rozpocząć pracę z tym znakomitym narzędziem. Zrozumiesz, czym jest Vue.js, i sprawdzisz, jakie ma możliwości. Będziesz też mieć okazję do przetestowania ich podczas tworzenia kilku ciekawych aplikacji. W trakcie lektury kolejnych rozdziałów przekonasz się, jak wykorzystać potencjał Vue.js do tworzenia niezwykle wydajnych, reaktywnych interfejsów WWW. Nie musisz być przy tym wybitnym deweloperem. Dzięki tej książce poznasz wszystkie etapy budowania interaktywnej aplikacji WWW za pomocą Vue.js: od planowania struktury aż do pełnego wdrożenia!

W książce między innymi:

Vue.js 2: nowe narzędzie, większe możliwości, najlepsze wdrożenia!


Olga Filipova urodziła się w Kijowie. Dorastała w rodzinie fizyków, naukowców i profesorów. Ma duże doświadczenie jako programistka aplikacji WWW, szczególnie w zakresie języka JavaScript. Równocześnie od wielu lat rozwija swoje talenty dydaktyczne w dziedzinie technologii internetowych. Obecnie mieszka w Berlinie, gdzie pracuje jako lider zespołu w firmie Meetrics. Filipova ma męża Ruiego (również programistę), fantastyczną córkę Taissę, kota Patuscę i parę szynszyli o dźwięcznych imionach Barabashka i Cheburashka.

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Learning Vue.js 2 Tłumaczenie: Krzysztof Wołowski ISBN: 978-83-283-3874-6 Copyright © Packt Publishing 2016 First published in the English language under the title Learning Vue.js 2 - (9781786469946) Polish edition copyright © 2018 by Helion SA All rights reserved. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/vuejs2 Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:258)ci Podzi(cid:218)kowania O autorze O recenzencie Wst(cid:218)p Rozdzia(cid:239) 1. Zakupy z Vue.js Terminologia Historia Vue.js Rzeczy, które musisz wiedzie(cid:202) o Vue Idziemy na zakupy! Implementacja listy zakupów przy u(cid:285)yciu jQuery Implementacja listy zakupów za pomoc(cid:200) Vue.js Analiza wi(cid:200)zania danych za pomoc(cid:200) narz(cid:218)dzi programisty Modyfikacja modelu po wprowadzeniu danych przez u(cid:285)ytkownika Wy(cid:258)wietlanie listy elementów za pomoc(cid:200) dyrektywy v-for Zaznaczanie elementów listy zakupów Dodawanie nowych elementów do listy zakupów za pomoc(cid:200) dyrektywy v-on Korzystanie z Vue.js w istniej(cid:200)cym projekcie Vue.js 2.0! Projekty, w których wykorzystano Vue.js Grammarly Optimizely FilterBlend PushSilver Organizacja ksi(cid:200)(cid:285)ki 11 13 14 15 19 20 22 22 23 23 27 28 29 30 31 32 34 37 38 38 39 40 41 41 Poleć książkęKup książkę Spis tre(cid:286)ci Zarz(cid:200)dzamy czasem! Zmiana tytu(cid:239)u przy u(cid:285)yciu w(cid:239)a(cid:258)ciwo(cid:258)ci obliczanych Dope(cid:239)nienie warto(cid:258)ci za pomoc(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)ci obliczanych Kontrola stanu przy u(cid:285)yciu przycisków startu, pauzy i stopu (cid:109)wiczenie Podsumowanie Rozdzia(cid:239) 2. Podstawy — instalacja i u(cid:285)ytkowanie Wzorzec architektoniczny MVVM Metoda defineProperty, gettery i settery Porównanie z innymi frameworkami React Angular Vue Podstawy Vue.js Komponenty Dyrektywy Vue.js Wtyczki Vue.js (cid:109)wiczenie Stan aplikacji i Vuex vue-cli Wtyczki Vue dost(cid:218)pne w (cid:258)rodowiskach IDE Instalacja, u(cid:285)ytkowanie i debugowanie aplikacji Vue.js Instalacja Vue.js Debugowanie aplikacji Vue Tworzenie szkieletu aplikacji Szkielet aplikacji Lista zakupów Szkielet aplikacji Pomodoro (cid:109)wiczenie Podsumowanie Rozdzia(cid:239) 3. Komponenty — zasada dzia(cid:239)ania i zastosowanie Powrót do komponentów Korzy(cid:258)ci z u(cid:285)ywania komponentów Deklaracja szablonów w formacie HTML Obs(cid:239)uga w(cid:239)a(cid:258)ciwo(cid:258)ci data i el w komponencie Zasi(cid:218)g komponentów Komponenty zawieraj(cid:200)ce inne komponenty Przebudowa aplikacji Lista zakupów za pomoc(cid:200) prostych komponentów Definiowanie szablonów dla wszystkich komponentów Definiowanie i rejestrowanie komponentów (cid:109)wiczenie Komponenty jednoplikowe Wtyczki dla (cid:258)rodowisk IDE Styl i zasi(cid:218)g Automatyczne od(cid:258)wie(cid:285)anie Preprocesory 6 43 45 47 48 50 50 51 52 53 56 56 58 58 59 59 63 64 67 67 68 70 70 70 80 82 82 85 85 85 87 87 88 88 89 90 92 96 97 99 100 100 102 102 103 104 Poleć książkęKup książkę Spis tre(cid:286)ci Przebudowa aplikacji Lista zakupów za pomoc(cid:200) jednoplikowych komponentów AddItemComponent Konfiguracja komponentów ItemComponent i ItemsComponent (cid:109)wiczenie Przebudowa aplikacji Pomodoro za pomoc(cid:200) komponentów jednoplikowych Reaktywne wi(cid:200)zanie efektów przej(cid:258)cia CSS Podsumowanie Rozdzia(cid:239) 4. Reaktywno(cid:258)(cid:202) — wi(cid:200)zanie danych Wi(cid:200)zanie danych raz jeszcze Interpolacja danych Dodajemy nag(cid:239)ówek ze stanem aplikacji (cid:109)wiczenie Wyra(cid:285)enia i filtry Wyra(cid:285)enia Filtry (cid:109)wiczenie Dyrektywy raz jeszcze Wi(cid:200)zanie dwukierunkowe przy u(cid:285)yciu dyrektywy v-model Dwukierunkowe wi(cid:200)zanie mi(cid:218)dzy komponentami Wi(cid:200)zanie atrybutów za pomoc(cid:200) dyrektywy v-bind Wy(cid:258)wietlanie warunkowe przy u(cid:285)yciu dyrektyw v-if i v-show Przetwarzanie tablicy za pomoc(cid:200) dyrektywy v-for Detektory zdarze(cid:241) i dyrektywa v-on Skróty (cid:109)wiczenie Koty Podsumowanie Rozdzia(cid:239) 5. Vuex — zarz(cid:200)dzanie stanem aplikacji Komunikacja typu rodzic – dziecko mi(cid:218)dzy komponentami, zdarzenia oraz (cid:239)amig(cid:239)ówka Dlaczego potrzebujemy globalnego magazynu stanu? Czym jest Vuex? Jak dzia(cid:239)a magazyn i co jest w nim takiego szczególnego? Pozdrowienia z magazynu Stan magazynu i gettery Mutacje Akcje Instalacja magazynu Vuex i jego wykorzystanie w naszych aplikacjach Zastosowanie magazynu Vuex w aplikacjach Lista zakupów i Pomodoro Zastosowanie magazynu Vuex w aplikacji Pomodoro O(cid:285)ywiamy przyciski startu, pauzy i stopu Obs(cid:239)uga minut i sekund w aplikacji Pomodoro Tworzenie zegara Pomodoro Modyfikacja kota Podsumowanie 105 108 109 111 111 115 117 119 119 120 121 122 122 122 126 127 127 128 129 129 131 134 141 145 146 146 146 149 149 156 156 157 159 164 168 169 174 176 180 180 185 188 190 193 7 Poleć książkęKup książkę Spis tre(cid:286)ci Rozdzia(cid:239) 6. Wtyczki — buduj dom ze swoich w(cid:239)asnych cegie(cid:239) Specyfika wtyczek Vue Zastosowanie wtyczki vue-resource w aplikacji Lista zakupów Tworzenie prostego serwera Instalacja vue-resource, tworzenie zasobów oraz metod Pobieranie list zakupów przy uruchamianiu aplikacji Aktualizowanie danych na serwerze po zmianach Tworzenie nowej listy zakupów Usuwanie istniej(cid:200)cych list zakupów (cid:109)wiczenie Niestandardowa wtyczka w aplikacji Pomodoro Wtyczka NoiseGenerator Zastosowanie wtyczki w aplikacji Pomodoro Przycisk do prze(cid:239)(cid:200)czania d(cid:283)wi(cid:218)ku (cid:109)wiczenie Podsumowanie Rozdzia(cid:239) 7. Testy — sprawdzanie poprawno(cid:258)ci dzia(cid:239)ania aplikacji Dlaczego testy jednostkowe? Testy jednostkowe dla aplikacji Vue Testowanie jednostkowe aplikacji Lista zakupów Testowanie akcji, getterów i mutacji Kryteria dobrego testu Stopie(cid:241) pokrycia kodu Symulowanie odpowiedzi serwera i tworzenie asynchronicznych testów Testowanie komponentów Tworzenie testów jednostkowych dla aplikacji Pomodoro Co to s(cid:200) testy E2E? Nightwatch do testów E2E Tworzenie testów E2E dla aplikacji Pomodoro Podsumowanie Rozdzia(cid:239) 8. Wdra(cid:285)anie — startujemy w sieci! Wdra(cid:285)anie oprogramowania GitHub — co to? Travis — co to? Heroku — co to? Przeniesienie aplikacji do repozytorium GitHuba Konfiguracja procesu ci(cid:200)g(cid:239)ej integracji za pomoc(cid:200) Travisa Wdra(cid:285)anie aplikacji Pomodoro Dziennik zdarze(cid:241) Przygotowanie aplikacji do uruchomienia w Heroku Wdra(cid:285)anie aplikacji Lista zakupów U(cid:285)ywanie Heroku lokalnie Podsumowanie 8 195 195 196 197 198 199 201 206 210 212 212 213 216 218 222 222 225 225 228 229 230 233 234 237 243 245 249 249 250 253 255 255 258 258 258 258 260 265 266 267 270 272 273 Poleć książkęKup książkę Rozdzia(cid:239) 9. Co dalej? Co ju(cid:285) wiemy Vue 2.0 Aplikacje raz jeszcze Aplikacja Lista zakupów Aplikacja Pomodoro Dlaczego to dopiero pocz(cid:200)tek? Dodawanie funkcji do naszych aplikacji Upi(cid:218)kszamy nasze aplikacje Rozszerzanie dost(cid:218)pno(cid:258)ci naszych aplikacji na inne urz(cid:200)dzenia Podsumowanie Dodatek A. Rozwi(cid:200)zania (cid:202)wicze(cid:241) (cid:109)wiczenie do rozdzia(cid:239)u 1. (cid:109)wiczenia do rozdzia(cid:239)u 2. Poszerzenie mo(cid:285)liwo(cid:258)ci wtyczki MathPlugin Zegar Pomodoro jako aplikacja Chrome (cid:109)wiczenia do rozdzia(cid:239)u 3. (cid:109)wiczenie 1. (cid:109)wiczenie 2. Skorowidz Spis tre(cid:286)ci 275 275 277 278 278 279 281 281 284 285 285 287 287 289 289 290 290 290 292 293 9 Poleć książkęKup książkę Poleć książkęKup książkę 1 Zakupy z Vue.js Vue.js to framework JavaScript u(cid:225)atwiaj(cid:261)cy tworzenie niezwyk(cid:225)ych aplikacji WWW. Vue.js to biblioteka JavaScript do tworzenia interfejsów WWW. Vue.js to narz(cid:266)dzie, które wykorzystuje architektur(cid:266) MVVM. Wed(cid:239)ug strony Simplified JavaScript Jargon Vue.js to biblioteka JavaScript s(cid:239)u(cid:285)(cid:200)ca do tworzenia interfejsów u(cid:285)ytkownika (widoków) na podstawie modeli danych (http://jargon.js.org/_glossary/ VUEJS.md). Oficjalna strona Vue.js (https://vuejs.org/) kilka miesi(cid:218)cy temu charakteryzowa(cid:239)a Vue.js jako zbiór reaktywnych komponentów dla nowoczesnych interfejsów WWW (zob. rysunek 1.1). Rysunek 1.1. Strona domowa Vue.js kilka miesi(cid:218)cy temu Teraz natomiast okre(cid:258)la Vue.js jako progresywny framework JavaScript (zob. rysunek 1.2). Poleć książkęKup książkę Vue.js 2. Tworzenie reaktywnych aplikacji WWW Rysunek 1.2. Strona domowa Vue.js dzi(cid:258) Czym zatem jest Vue.js? Frameworkiem? Narz(cid:218)dziem? Bibliotek(cid:200)? Czy mo(cid:285)na za jego pomoc(cid:200) tworzy(cid:202) ca(cid:239)e aplikacje WWW, czy tylko rozszerza(cid:202) ich funkcjonalno(cid:258)(cid:202)? Czy warto porzuci(cid:202) dla niego swój ulubiony framework? A je(cid:285)eli tak, to dlaczego? Czy mo(cid:285)na go u(cid:285)ywa(cid:202) w swoim pro- jekcie obok innych narz(cid:218)dzi? Co tak naprawd(cid:218) daje? W tym rozdziale spróbuj(cid:218) udzieli(cid:202) odpowiedzi na wszystkie te pytania. Na razie jednak nie b(cid:218)d(cid:218) szczegó(cid:239)owo omawia(cid:202) Vue.js — ogranicz(cid:218) si(cid:218) do kilku prostych przyk(cid:239)adów. W tym rozdziale: (cid:81) poznamy architektur(cid:218) frameworka Vue.js, a tak(cid:285)e jego histori(cid:218); (cid:81) dowiemy si(cid:218), gdzie jest wykorzystywany; (cid:81) zbudujemy za jego pomoc(cid:200) prost(cid:200) list(cid:218) zakupów i porównamy t(cid:218) implementacj(cid:218) z implementacj(cid:200) takiej samej aplikacji utworzonej przy u(cid:285)yciu jQuery; (cid:81) utworzymy prost(cid:200) aplikacj(cid:218) — zegar Pomodoro; (cid:81) wykonamy krótkie, proste (cid:202)wiczenie. Terminologia Ta ksi(cid:200)(cid:285)ka jest pe(cid:239)na modnej nowomowy, dziwnych skrótów i innych hipsterskich kombinacji liter. Ale nie bój si(cid:218)! Aby tworzy(cid:202) aplikacje w Vue.js lub w dowolnym innym frameworku, nie musisz zna(cid:202) ich wszystkich na pami(cid:218)(cid:202)! Je(cid:285)eli jednak w jakim(cid:258) punkcie ksi(cid:200)(cid:285)ki pogubisz si(cid:218) w terminologii, w ka(cid:285)dym momencie mo(cid:285)esz wróci(cid:202) do poni(cid:285)szego s(cid:239)owniczka: (cid:81) Stan aplikacji: Jest to globalny stan aplikacji. Dane stanu aplikacji s(cid:200) inicjalizowane podczas jej uruchamiania. Ka(cid:285)dy komponent aplikacji mo(cid:285)e je odczyta(cid:202), ale nie mo(cid:285)e ich (cid:239)atwo zmieni(cid:202). Ka(cid:285)dy element stanu posiada mutacj(cid:218) — funkcj(cid:218) wywo(cid:239)ywan(cid:200) po wyst(cid:200)pieniu okre(cid:258)lonych zdarze(cid:241) w komponentach aplikacji. (cid:81) Bootstrap: Zestaw stylów i narz(cid:218)dzi JavaScript wspomagaj(cid:200)cych tworzenie eleganckich responsywnych aplikacji bez konieczno(cid:258)ci bezpo(cid:258)redniego stosowania regu(cid:239) CSS. (cid:81) Sieci dystrybucji tre(cid:258)ci (CDN, ang. Content Distribution Network): Specjalny serwer, którego zadaniem jest dostarczenie u(cid:285)ytkownikom danych, charakteryzuj(cid:200)cy si(cid:218) wysok(cid:200) dost(cid:218)pno(cid:258)ci(cid:200) i wydajno(cid:258)ci(cid:200). Twórcy bibliotek i frameworków udost(cid:218)pniaj(cid:200) 20 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Zakupy z Vue.js je cz(cid:218)sto poprzez CDN, poniewa(cid:285) w instrukcji instalacji wystarczy wtedy poda(cid:202) adres URL danego zasobu. Vue.js znajduje si(cid:218) pod adresem https://npmcdn.com/. Ten niezawodny serwer o globalnym zasi(cid:218)gu udost(cid:218)pnia wszystkie pakiety przeznaczone dla npm. (cid:81) Komponenty: Wyodr(cid:218)bnione fragmenty aplikacji posiadaj(cid:200)ce w(cid:239)asne dane oraz widoki, które mog(cid:200) by(cid:202) u(cid:285)yte wielokrotnie. Ich rol(cid:218) w procesie budowy aplikacji mo(cid:285)na porówna(cid:202) do roli cegie(cid:239) przy budowie domu. (cid:81) Kaskadowe arkusze stylów (CSS): Zestaw stylów stosowanych w dokumencie HTML, aby nada(cid:202) mu odpowiedni wygl(cid:200)d. (cid:81) Deklaratywne widoki: Widoki umo(cid:285)liwiaj(cid:200)ce bezpo(cid:258)rednie wi(cid:200)zanie danych modeli JavaScript z ich reprezentacj(cid:200). (cid:81) Dyrektywy: Specjalne atrybuty elementów HTML w Vue.js, które umo(cid:285)liwiaj(cid:200) ró(cid:285)ne sposoby wi(cid:200)zania danych. (cid:81) Model DOM (ang. Document Object Model): Konwencja reprezentacji w(cid:218)z(cid:239)ów w takich j(cid:218)zykach znaczników, jak HTML, XML czy XHTML. W(cid:218)z(cid:239)y dokumentu s(cid:200) zorganizowane w struktur(cid:218) drzewa DOM. Gdy mówimy o interakcji z modelem DOM, mamy na my(cid:258)li interakcj(cid:218) z elementami HTML. (cid:81) npm: Mened(cid:285)er pakietów JavaScript umo(cid:285)liwiaj(cid:200)cy ich wyszukiwanie, instalowanie i zarz(cid:200)dzanie nimi. (cid:81) Markdown: Prosty i przyjazny dla u(cid:285)ytkownika j(cid:218)zyk pozwalaj(cid:200)cy zapisa(cid:202) tekst bez obaw o style i znaczniki HTML. Pliki zawieraj(cid:200)ce tekst zapisany w ten sposób maj(cid:200) rozszerzenie .md. (cid:81) Wzorzec MVVM: Wzorzec architektoniczny Model-Widok-WidokModel (skrócona nazwa pochodzi od ang. Model View ViewModel), którego najwa(cid:285)niejszym elementem jest WidokModel (ang. ViewModel), odgrywaj(cid:200)cy rol(cid:218) po(cid:258)rednika mi(cid:218)dzy widokiem a modelem i umo(cid:285)liwiaj(cid:200)cy przep(cid:239)yw danych mi(cid:218)dzy nimi. (cid:81) Wzorzec MVC: Wzorzec architektoniczny Model-Widok-Kontroler (skrócona nazwa pochodzi od ang. Model View Controller). Umo(cid:285)liwia oddzielenie widoku od modelu i sposobu, w jaki przep(cid:239)ywa mi(cid:218)dzy nimi informacja. (cid:81) Jednokierunkowe wi(cid:200)zanie danych: Rodzaj wi(cid:200)zania danych, w którym zmiany w modelu danych s(cid:200) automatycznie propagowane do warstwy widoku, ale nie na odwrót. (cid:81) Szybkie prototypowanie: Technika (cid:239)atwej i szybkiej budowy makiet interfejsu u(cid:285)ytkownika, umo(cid:285)liwiaj(cid:200)cych niektóre podstawowe interakcje z u(cid:285)ytkownikiem. (cid:81) Reaktywno(cid:258)(cid:202): Natychmiastowa propagacja zmian danych do warstwy widoku. (cid:81) Dwukierunkowe wi(cid:200)zanie danych: Rodzaj wi(cid:200)zania danych, przy którym zmiany w modelu danych s(cid:200) automatycznie propagowane do warstwy widoku, a zmiany zachodz(cid:200)ce w warstwie widoku s(cid:200) natychmiast odzwierciedlane w modelu danych. (cid:81) Interfejs u(cid:285)ytkownika (UI): Zestaw komponentów graficznych umo(cid:285)liwiaj(cid:200)cych u(cid:285)ytkownikowi komunikacj(cid:218) z aplikacj(cid:200). (cid:81) Vuex: Architektura aplikacji Vue. Umo(cid:285)liwia proste zarz(cid:200)dzanie stanem aplikacji. 21 Poleć książkęKup książkę Vue.js 2. Tworzenie reaktywnych aplikacji WWW Historia Vue.js Evan You, twórca Vue.js (http://evanyou.me/), pracowa(cid:239) kiedy(cid:258) w Google Creative Labs nad jed- nym z projektów. W trakcie projektowania aplikacji okaza(cid:239)o si(cid:218), (cid:285)e potrzebny jest szybki proto- typ i dosy(cid:202) rozbudowany interfejs u(cid:285)ytkownika. Poniewa(cid:285) powielanie tych samych fragmentów kodu HTML jest czasoch(cid:239)onne, Evan zacz(cid:200)(cid:239) szuka(cid:202) narz(cid:218)dzi, które mog(cid:239)yby go w tym wyr(cid:218)- czy(cid:202). Ku swojemu zdziwieniu odkry(cid:239), (cid:285)e nie ma narz(cid:218)dzia, biblioteki ani frameworka nadaj(cid:200)ce- go si(cid:218) do szybkiego prototypowania! W tamtym czasie Angular by(cid:239) ju(cid:285) powszechnie stosowany, React.js dopiero startowa(cid:239), a takie frameworki jak Backbone.js by(cid:239)y u(cid:285)ywane jedynie w przy- padku du(cid:285)ych aplikacji na bazie wzorca MVC. Brakowa(cid:239)o niewielkiego i elastycznego frame- worka tylko do celów szybkiego prototypowania interfejsu u(cid:285)ytkownika. Kiedy zdajesz sobie spraw(cid:218), (cid:285)e co(cid:258) fajnego nie istnieje, a Ty jeste(cid:258) w stanie to stworzy(cid:202) — zrób to! Framework Vue.js powsta(cid:239) jako narz(cid:218)dzie do szybkiego prototypowania. Dzi(cid:258) mo(cid:285)na go równie(cid:285) wykorzysta(cid:202) do tworzenia z(cid:239)o(cid:285)onych, skalowalnych i reaktywnych aplikacji WWW. Evan nie zastanawia(cid:239) si(cid:218) ani przez chwil(cid:218). I tak powsta(cid:239)a biblioteka przeznaczona do szybkiego prototypowania, zapewniaj(cid:200)ca prostot(cid:218) i elastyczno(cid:258)(cid:202) przy reaktywnym wi(cid:200)zaniu danych oraz autonomiczne komponenty. Jak ka(cid:285)da dobra biblioteka, tak i Vue.js rozwija si(cid:218) i ewoluuje, dzi(cid:218)ki czemu liczba jej funkcji stale ro(cid:258)nie. Obecna wersja umo(cid:285)liwia do(cid:239)(cid:200)czanie i tworzenie wtyczek, tworzenie i stosowanie domieszek (ang. mixins) oraz dodawanie niestandardowego zachowania. Vue jest na tyle elastyczny i neutralny wzgl(cid:218)dem struktury aplikacji, (cid:285)e z ca(cid:239)(cid:200) pewno(cid:258)ci(cid:200) mo(cid:285)na go uzna(cid:202) za framework wspieraj(cid:200)cy budow(cid:218) kompleksowych aplikacji WWW. Rzeczy, które musisz wiedzie(cid:202) o Vue Vue.js pozwala powi(cid:200)za(cid:202) modele danych z warstw(cid:200) reprezentacji. Umo(cid:285)liwia równie(cid:285) wielokrotne wykorzystywanie komponentów w aplikacji. Nie wymaga tworzenia specjalnych modeli czy kolekcji ani rejestrowania obiektów zdarze(cid:241). Nie wymaga u(cid:285)ywania skomplikowanej sk(cid:239)adni. Nie wymaga tak(cid:285)e instalowania nieko(cid:241)cz(cid:200)cych si(cid:218) kaskad zale(cid:285)no(cid:258)ci. Modele to zwyk(cid:239)e obiekty JavaScript. Mo(cid:285)esz je powi(cid:200)za(cid:202) z dowolnym elementem widoku (tekstem, wprowadzanymi danymi, klasami, atrybutami i tak dalej). Aby ca(cid:239)o(cid:258)(cid:202) zacz(cid:218)(cid:239)a dzia(cid:239)a(cid:202), wystarczy do(cid:239)(cid:200)czy(cid:202) w projekcie plik vue.js. Alternatywnie mo(cid:285)esz skorzysta(cid:202) z narz(cid:218)dzia vue-cli, które pozwala tworzy(cid:202) i konfigurowa(cid:202) szablony projektów na 22 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Zakupy z Vue.js bazie bibliotek Webpack i Browserify. Oprócz tego vue-cli zapewnia obs(cid:239)ug(cid:218) automatycznego od(cid:258)wie(cid:285)ania (ang. hot reloading), a tak(cid:285)e zawiera narz(cid:218)dzia dla programistów. Mo(cid:285)esz oddzieli(cid:202) warstw(cid:218) widoku od stylów i logiki JavaScript albo umie(cid:258)ci(cid:202) je w jednym pliku Vue. Dla wszystkich popularnych (cid:258)rodowisk programistycznych istniej(cid:200) wtyczki do obs(cid:239)ugi Vue. Mo(cid:285)esz u(cid:285)ywa(cid:202) dowolnych preprocesorów i tworzy(cid:202) kod w standardzie ES2015. Mo(cid:285)esz u(cid:285)ywa(cid:202) Vue razem z ulubionym frameworkiem lub osobno. Mo(cid:285)esz z niego korzysta(cid:202) tylko po to, aby wprowadzi(cid:202) w aplikacji drobne zmiany, ale równie dobrze mo(cid:285)esz tworzy(cid:202) od podstaw z(cid:239)o(cid:285)one aplikacje. Je(cid:258)li chcesz si(cid:218) dowiedzie(cid:202), jak Vue wypada na tle innych frameworków, takich jak Angular czy React, odwied(cid:283) stron(cid:218) http://vuejs.org/guide/comparison.html. Aby pozna(cid:202) niesamowite mo(cid:285)liwo(cid:258)ci Vue.js, zajrzyj na stron(cid:218) https://github.com/vuejs/awesome-vue. Idziemy na zakupy! Podejrzewam, (cid:285)e u Ciebie te(cid:285) zbli(cid:285)a si(cid:218) weekend i powoli zaczynasz planowa(cid:202) zakupy na przysz(cid:239)y tydzie(cid:241). O ile nie jeste(cid:258) cz(cid:239)owiekiem z doskona(cid:239)(cid:200) pami(cid:218)ci(cid:200) ani nie prowadzisz ascetycz- nego trybu (cid:285)ycia, prawdopodobnie przed pój(cid:258)ciem do sklepu sporz(cid:200)dzasz list(cid:218) rzeczy do ku- pienia. Mo(cid:285)e nawet u(cid:285)ywasz do tego jakiej(cid:258) aplikacji. Dlaczego jednak nie wykorzysta(cid:202) w tym celu w(cid:239)asnej? Co powiesz na to, (cid:285)eby(cid:258)my j(cid:200) wspólnie zaprojektowali i utworzyli? Zróbmy to! Utwórzmy w(cid:239)asn(cid:200) aplikacj(cid:218) zakupow(cid:200). Zacznijmy od przygotowania szybkiego prototypu. Budowa interaktywnego prototypu dla listy zakupów nie powinna sprawi(cid:202) nam wi(cid:218)kszych problemów. Powinien on wy(cid:258)wietla(cid:202) list(cid:218) i pozwala(cid:202) na dodawanie i usuwanie elementów, podobnie jak na li(cid:258)cie rzeczy do zrobienia. Najpierw spróbujemy podej(cid:258)cia klasycznego — skorzystamy z HTML-a, CSS, JavaScriptu frameworka Bootstrap (http://getbootstrap.com/), dzi(cid:218)ki któremu nadamy interfejsowi odpowiedni wygl(cid:200)d bez konieczno- (cid:258)ci dodawania zbyt wielu regu(cid:239) CSS. (Ta ksi(cid:200)(cid:285)ka nie jest o CSS, a praca z frameworkiem Bootstrap jest niezwykle prosta i przyjemna!). jQuery. U(cid:285)yjemy równie(cid:285) i Implementacja listy zakupów przy u(cid:285)yciu jQuery Poni(cid:285)ej znajduje si(cid:218) jedno z mo(cid:285)liwych rozwi(cid:200)za(cid:241). Kod HTML: div class= container h2 Moja lista zakupów /h2 div class= input-group 23 Poleć książkęKup książkę Vue.js 2. Tworzenie reaktywnych aplikacji WWW input placeholder= dodaj produkt type= text class= js-new-item (cid:180)form-control span class= input-group-btn button @click= addItem class= js-add btn btn-default (cid:180)type= button Dodaj! /button /span /div ul li div class= checkbox label input class= js-item name= list type= checkbox Marchewka /label /div /li li div class= checkbox label input class= js-item name= list type= checkbox Ksi(cid:200)(cid:285)ka /label /div /li li class= removed div class= checkbox label input class= js-item name= list type= checkbox checked (cid:180)Prezent na urodziny cioci /label /div /li /ul /div Kod CSS: .container { width: 40 ; margin: 20px auto 0px auto; } .removed { color: gray; } .removed label { text-decoration: line-through; } ul li { list-style-type: none; } 24 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Zakupy z Vue.js Kod JavaScript i jQuery: $(document).ready(function() { /** * Dodaj procedur(cid:266) obs(cid:225)ugi klikni(cid:266)cia. */ function onAdd() { var $ul, li, $li, $label, $div, value; value = $( .js-new-item ).val(); // Sprawd(cid:296), czy wprowadzono warto(cid:286)(cid:252). if (value === ) { return; } $ul = $( ul ); $li = $( li ).appendTo($ul); $div = $( div ) .addClass( checkbox ) .appendTo($li); $label = $( label ).appendTo($div); $( input ) .attr( type , checkbox ) .addClass( item ) .attr( name , list ) .click(toggleRemoved) .appendTo($label); $label .append(value); $( .js-new-item ).val( ); } /** * Procedura obs(cid:225)ugi klikni(cid:266)cia pola wyboru – * prze(cid:225)(cid:261)cza klas(cid:266) elementu li zawieraj(cid:261)cego element. * @param ev */ function toggleRemoved(ev) { var $el; $el = $(ev.currentTarget); $el.closest( li ).toggleClass( removed ); } $( .js-add ).click(onAdd); $( .js-item ).click(toggleRemoved); }); Kod do wszystkich przyk(cid:239)adów z tej ksi(cid:200)(cid:285)ki dost(cid:218)pny jest na GitHubie pod adresem https:// github.com/PacktPublishing/Learning-Vue.js-2. 25 Poleć książkęKup książkę Vue.js 2. Tworzenie reaktywnych aplikacji WWW W przegl(cid:200)darce strona powinna wygl(cid:200)da(cid:202) tak jak na rysunku 1.3. Rysunek 1.3. Implementacja listy zakupów zrealizowana za pomoc(cid:200) HTML-a, CSS i jQuery Popatrz na kod i na efekt w JSFiddle (https://jsfiddle.net/chudaol/u5pcnLw9/2/). Jest to prosty fragment kodu HTML z nieuporz(cid:200)dkowan(cid:200) list(cid:200) elementów, z których ka(cid:285)dy zawie- ra pole wyboru, pole tekstowe do wprowadzania danych oraz przycisk Dodaj! Po ka(cid:285)dym klik- ni(cid:218)ciu przycisku Dodaj! zawarto(cid:258)(cid:202) pola tekstowego jest przekszta(cid:239)cana w element listy i do(cid:239)(cid:200)- czana na jej ko(cid:241)cu. Klikni(cid:218)cie pola wyboru przy danej pozycji powoduje prze(cid:239)(cid:200)czenie stanu mi(cid:218)dzy kup (bez zaznaczenia) a kupione (zaznaczone). Dodajmy jeszcze mo(cid:285)liwo(cid:258)(cid:202) zmiany nazwy listy zakupów (co mo(cid:285)e by(cid:202) przydatne, gdy w aplikacji b(cid:218)dziemy mieli wiele list). Potrzebujemy wi(cid:218)c dodatkowego kodu HTML oraz dodatkowego kodu jQuery z detektorami i procedurami obs(cid:239)ugi zdarze(cid:241): div class= container h2 Moja lista zakupów /h2 !-- ... -- div class= footer hr/ em Zmie(cid:241) nazw(cid:218) listy zakupów /em input class= js-change-title type= text value= Moja lista zakupów / /div /div // I kod JavaScript: function onChangeTitle() { $( h2 ).text($( .js-change-title ).val()); } $( .js-change-title ).keyup(onChangeTitle); Ca(cid:239)o(cid:258)(cid:202) znajdziesz pod adresem https://jsfiddle.net/chudaol/47u38fvh/3/. 26 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Zakupy z Vue.js Implementacja listy zakupów za pomoc(cid:200) Vue.js To by(cid:239) bardzo prosty przyk(cid:239)ad. Spróbujmy powtórzy(cid:202) wykonane kroki, tym razem przy u(cid:285)yciu Vue.js. Istnieje wiele sposobów korzystania z vue.js w projekcie. Tu zastosujemy najprostszy, umieszczaj(cid:200)c w kodzie plik JavaScript z serwera CDN: script src= https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js /script Zacznijmy od wy(cid:258)wietlenia listy elementów. Utwórz plik HTML i umie(cid:258)(cid:202) w nim nast(cid:218)puj(cid:200)cy kod: div id= app class= container h2 {{ title }} /h2 ul li {{ items[0] }} /li li {{ items[1] }} /li /ul /div Teraz dodaj kod JavaScript: var data = { items: [ Banany , Jab(cid:239)ka ], title: Moja lista zakupów }; new Vue({ el: #app , data: data }); Otwórz stron(cid:218) w przegl(cid:200)darce. Lista powinna wygl(cid:200)da(cid:202) tak jak na rysunku 1.4. Rysunek 1.4. Lista zakupów zaimplementowana przy u(cid:285)yciu Vue.js 27 Poleć książkęKup książkę Vue.js 2. Tworzenie reaktywnych aplikacji WWW Przeanalizujmy ten przyk(cid:239)ad. Kod aplikacji Vue rozpoczyna si(cid:218) od s(cid:239)owa kluczowego new Vue. W jaki sposób powi(cid:200)za(cid:202) fragment kodu HTML z danymi aplikacji? Przekazujemy instancji Vue element DOM, z którym b(cid:218)dzie powi(cid:200)zana. (cid:191)aden inny element strony nie pozna magii Vue. Jak wida(cid:202), ca(cid:239)o(cid:258)(cid:202) naszego kodu mie(cid:258)ci si(cid:218) w elemencie #app, który jest z kolei przekazywany jako pierwszy argument w obiekcie z opcjami Vue. Argument data zawiera obiekty u(cid:285)ywane w kodzie w podwójnych nawiasach klamrowych ({{}}). Nikt, kto mia(cid:239) do czynienia z preproce- sorami szablonów, takimi jak na przyk(cid:239)ad handlebars (wi(cid:218)cej informacji na jego temat znajdziesz pod adresem http://handlebarsjs.com/), nie b(cid:218)dzie mia(cid:239) problemu ze zrozumieniem tego zapisu. I co z tego? — zapytasz. Czego chcesz mnie nauczy(cid:202)? Jak u(cid:285)ywa(cid:202) preprocesorów szablonów? Dzi(cid:218)kuj(cid:218) bardzo, wol(cid:218) i(cid:258)(cid:202) na piwo albo obejrze(cid:202) mecz. Zaczekaj, otwórz sobie piwo i czytaj dalej. Nie po(cid:298)a(cid:225)ujesz! Analiza wi(cid:200)zania danych za pomoc(cid:200) narz(cid:218)dzi programisty Zobaczmy, jak dzia(cid:239)a wi(cid:200)zanie danych w praktyce. Otwórz w swojej przegl(cid:200)darce narz(cid:218)dzia programisty, przejd(cid:283) do kodu JavaScript i dodaj na pocz(cid:200)tku skryptu punkt wstrzymania. Zauwa(cid:285), (cid:285)e zawarto(cid:258)(cid:202) obiektu data przed inicjalizacj(cid:200) aplikacji Vue i po niej jest inna. W tym drugim przypadku obiekt data jest ju(cid:285) przygotowany do reaktywnego wi(cid:200)zania danych (zob. rysunek 1.5). Rysunek 1.5. Obiekt data przed inicjalizacj(cid:200) obiektu Vue i po niej Je(cid:285)eli zmienimy teraz w konsoli narz(cid:218)dzi programisty w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) title obiektu data (mo(cid:285)emy to zrobi(cid:202), poniewa(cid:285) data to obiekt globalny), nazwa strony zostanie automatycznie zaktualizo- wana (zob. rysunek 1.6). 28 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Zakupy z Vue.js Rysunek 1.6. Wi(cid:200)zanie danych: zmiana w(cid:239)a(cid:258)ciwo(cid:258)ci obiektu powoduje natychmiastow(cid:200) aktualizacj(cid:218) widoku Modyfikacja modelu po wprowadzeniu danych przez u(cid:285)ytkownika W naszym przyk(cid:239)adzie uda(cid:239)o si(cid:218) przetransportowa(cid:202) dane z modelu w kodzie JavaScript na stro- n(cid:218). To by(cid:239) lot na trasie kod aplikacji – strona. Czy nie by(cid:239)oby jednak lepiej, gdyby dane mog(cid:239)y podró(cid:285)owa(cid:202) w obu kierunkach? Zobaczmy teraz, jak powi(cid:200)za(cid:202) dane dwukierunkowo, tak aby mo(cid:285)na by(cid:239)o zmienia(cid:202) w(cid:239)a(cid:258)ciwo(cid:258)ci obiektu data poprzez interakcj(cid:218) ze stron(cid:200). Skopiuj kod HTML odpowiedzialny za wy(cid:258)wietlenie nazwy listy i zmodyfikuj pole tekstowe z przyk(cid:239)adu jQuery, dodaj(cid:200)c w nim atrybut v-model= title . Czy s(cid:239)ysza(cid:239)e(cid:258) ju(cid:285) o dyrektywach Vue.js? Gratulacje, w(cid:239)a(cid:258)nie wykorzysta(cid:239)e(cid:258) jedn(cid:200) z nich! Atrybut v-model to dyrektywa Vue.js, która umo(cid:285)liwia dwukierunkowe wi(cid:200)zanie danych. Wi(cid:218)cej informa- cji na jej temat znajdziesz na oficjalnej stronie Vue pod adresem http://vuejs.org/api/#v-model. Teraz kod HTML naszej listy zakupów wygl(cid:200)da nast(cid:218)puj(cid:200)co: div id= app class= container h2 {{ title }} /h2 ul li {{ items[0] }} /li li {{ items[1] }} /li /ul div class= footer hr/ em Zmie(cid:241) nazw(cid:218) listy zakupów /em input v-model= title / /div /div 29 Poleć książkęKup książkę Vue.js 2. Tworzenie reaktywnych aplikacji WWW I tylko tyle! Od(cid:258)wie(cid:285) teraz stron(cid:218) i wprowad(cid:283) dane w polu tekstowym. Nazwa listy b(cid:218)dzie automatycznie aktualizowana w trakcie pisania (zob. rysunek 1.7). Rysunek 1.7. Wi(cid:200)zanie danych: zmiana warto(cid:258)ci w polu tekstowym powi(cid:200)zanym z w(cid:239)a(cid:258)ciwo(cid:258)ci(cid:200) modelu powoduje zmian(cid:218) zawarto(cid:258)ci innych elementów powi(cid:200)zanych z t(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)ci(cid:200) Aplikacja zakupowa dzia(cid:239)a. Jednak na razie pobiera po prostu dwa elementy tablicy i tworzy z nich elementy listy. My natomiast chcieliby(cid:258)my, (cid:285)eby lista by(cid:239)a wy(cid:258)wietlana w ca(cid:239)o(cid:258)ci niezale(cid:285)nie od jej rozmiaru. Wy(cid:258)wietlanie listy elementów za pomoc(cid:200) dyrektywy v-for Potrzebujemy jakiego(cid:258) mechanizmu do iteracyjnego przetworzenia elementów tablicy items i wy- (cid:258)wietlenia ich wewn(cid:200)trz znaczników ul /ul . Na szcz(cid:218)(cid:258)cie Vue.js oferuje wygodn(cid:200) dyrektyw(cid:218) umo(cid:285)liwiaj(cid:200)c(cid:200) przetwarzanie struktur danych JavaScript w p(cid:218)tli. To dyrektywa v-for. U(cid:285)yjemy jej w elemencie listy li . Zmodyfikuj kod listy, aby wygl(cid:200)da(cid:239) tak jak poni(cid:285)ej: ul li v-for= item in items {{ item }} /li /ul W dalszej cz(cid:218)(cid:258)ci ksi(cid:200)(cid:285)ki poznasz wiele innych przydatnych dyrektyw, takich jak v-if, v-else, v-show, v-on, v-bind, czytaj wi(cid:218)c dalej. 30 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Zakupy z Vue.js Od(cid:258)wie(cid:285) stron(cid:218) i popatrz na list(cid:218). Strona powinna wygl(cid:200)da(cid:202) tak samo. Teraz dodaj element do tablicy items w konsoli, w narz(cid:218)dziach programisty. Spróbuj te(cid:285) jaki(cid:258) element usun(cid:200)(cid:202). Zgodnie z oczekiwaniami wszystkie operacje na tablicy s(cid:200) natychmiast odzwierciedlane na stronie (zob. rysunek 1.8). Rysunek 1.8. Wi(cid:200)zanie danych: zmiana tablicy powoduje zmiany na li(cid:258)cie, z któr(cid:200) jest powi(cid:200)zana Mamy teraz list(cid:218) elementów, do której wy(cid:258)wietlenia na stronie potrzebowali(cid:258)my tylko jednego wiersza kodu. Wci(cid:200)(cid:285) jednak brakuje pól wyboru, które pozwol(cid:200) zaznaczy(cid:202) zakupione rzeczy lub, w razie potrzeby, usun(cid:200)(cid:202) zaznaczenie. Zaznaczanie elementów listy zakupów Aby to osi(cid:200)gn(cid:200)(cid:202), musimy nieco zmodyfikowa(cid:202) tablic(cid:218) items. Zamiast ci(cid:200)gów znaków b(cid:218)dzie ona teraz zawiera(cid:202) obiekty z dwiema w(cid:239)a(cid:258)ciwo(cid:258)ciami: text (okre(cid:258)laj(cid:200)c(cid:200) tekst elementu) i checked (okre(cid:258)laj(cid:200)c(cid:200) jego stan). Zmodyfikujemy te(cid:285) kod HTML, dodaj(cid:200)c w ka(cid:285)dym elemencie listy pole wyboru. Kod JavaScript z deklaracj(cid:200) danych b(cid:218)dzie wygl(cid:200)da(cid:239) nast(cid:218)puj(cid:200)co: var data = { items: [{ text: Banany , checked: true }, { text: Jab(cid:239)ka , checked: false }], title: Moja lista zakupów , newItem: }; A kod HTML listy b(cid:218)dzie mia(cid:239) tak(cid:200) posta(cid:202): ul li v-for= item in items v-bind:class= { removed :item.checked } div class= checkbox 31 Poleć książkęKup książkę Vue.js 2. Tworzenie reaktywnych aplikacji WWW label input type= checkbox v-model= item.checked {{ item.text }} /label /div /li /ul Od(cid:258)wie(cid:285) stron(cid:218) i zauwa(cid:285), (cid:285)e w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) checked pola wyboru i klasa removed ka(cid:285)dego elementu listy li s(cid:200) zale(cid:285)ne od warto(cid:258)ci checked elementów tablicy items. Poeksperymentuj z polami wyboru, aby zobaczy(cid:202), co si(cid:218) dzieje. Czy to nie jest fantastyczne, (cid:285)e za pomoc(cid:200) jednie dwóch dyrektyw jeste(cid:258)my w stanie propagowa(cid:202) stan elementów tablicy i zmieni(cid:202) klas(cid:218) odpowiedniego elementu li ? Dodawanie nowych elementów do listy zakupów za pomoc(cid:200) dyrektywy v-on Nasz kod wymaga ju(cid:285) tylko drobnej modyfikacji — umo(cid:285)liwienia dodawania elementów do listy. Aby osi(cid:200)gn(cid:200)(cid:202) ten cel, w zmiennej data umie(cid:258)cimy jeszcze jeden obiekt, który nazwiemy newItem. Dodamy te(cid:285) krótk(cid:200) metod(cid:218), odpowiedzialn(cid:200) za dodawanie nowego elementu tablicy. Wywo(cid:239)amy j(cid:200) z poziomu kodu HTML za pomoc(cid:200) dyrektywy v-on. Dyrektyw(cid:218) t(cid:218) zastosujemy w elemencie input (polu tekstowym zawieraj(cid:200)cym nazw(cid:218) nowego elementu) i w przycisku, po którego klikni(cid:218)ciu element zostanie dodany do listy. Kod JavaScript b(cid:218)dzie mia(cid:239) tak(cid:200) posta(cid:202): var data = { items: [{ text: Banany , checked: true }, { text: Jab(cid:239)ka , checked: false }], title: Moja lista zakupów , newItem: }; new Vue({ el: #app , data: data, methods: { addItem: function() { var text; text = this.newItem.trim(); if (text) { this.items.push({ text: text, checked: false }); this.newItem = ; } 32 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Zakupy z Vue.js } } }); Dodali(cid:258)my w obiekcie data now(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) o nazwie newItem. Nast(cid:218)pnie, przy inicjalizacji Vue, dodali(cid:258)my opcj(cid:218) methods i umie(cid:258)cili(cid:258)my w niej metod(cid:218) addItem. Wewn(cid:200)trz elementu methods dost(cid:218)p do wszystkich w(cid:239)a(cid:258)ciwo(cid:258)ci obiektu data mo(cid:285)na uzyska(cid:202) za pomoc(cid:200) s(cid:239)owa kluczo- wego this. Dlatego w tej metodzie pobieramy po prostu warto(cid:258)(cid:202) this.newItem i dodajemy j(cid:200) do tablicy this.items. Teraz trzeba powi(cid:200)za(cid:202) wywo(cid:239)anie metody addItem z jakim(cid:258) dzia(cid:239)aniem u(cid:285)ytkownika. U(cid:285)yjemy do tego dyrektywy v-on. Zastosujemy j(cid:200) w polu tekstowym (uzale(cid:285)niaj(cid:200)c wywo(cid:239)anie metody od wyst(cid:200)pienia zdarzenia keyup.enter) oraz w przycisku Dodaj! (metoda zostanie wywo(cid:239)ana po jego klikni(cid:218)ciu). Wstaw przed list(cid:200) podany kod HTML: div class= input-group input v-model= newItem v-on:keyup.enter= addItem placeholder= dodaj (cid:180)produkt type= text class= form-control span class= input-group-btn button v-on:click= addItem class= btn btn-default (cid:180)type= button Dodaj! /button /span /div Dyrektywa v-on do(cid:239)(cid:200)cza do elementu detektor zdarze(cid:241). Skrótowo mo(cid:285)na j(cid:200) zapisa(cid:202) za pomoc(cid:200) znaku @. A wi(cid:218)c zapis v-on:keyup= addItem jest równoznaczny z zapisem @keyup= addItem . Wi(cid:218)cej informacji na temat dyrektywy v-on znajdziesz w oficjalnej dokumen- tacji pod adresem http://vuejs.org/api/#v-on. Podsumujmy. Ca(cid:239)o(cid:258)(cid:202) kodu aplikacji zaprezentowano poni(cid:285)ej. Kod HTML: div id= app class= container h2 {{ title }} /h2 div class= input-group input v-model= newItem @keyup.enter= addItem placeholder= dodaj (cid:180)produkt type= text class= form-control span class= input-group-btn button @click= addItem class= btn btn-default (cid:180)type= button Dodaj! /button /span /div ul li v-for= item in items :class= { removed : item.checked } div class= checkbox label 33 Poleć książkęKup książkę Vue.js 2. Tworzenie reaktywnych aplikacji WWW input type= checkbox v-model= item.checked {{ item.text }} /label /div /li /ul div class= footer hidden hr/ em Zmie(cid:241) nazw(cid:218) listy zakupów /em input v-model= title / /div /div Kod JavaScript: var data = { items: [{ text: Banany , checked: true }, { text: Jab(cid:239)ka , checked: false }], title: Moja lista zakupów , newItem: }; new Vue({ el: #app , data: data, methods: { addItem: function() { var text; text = this.newItem.trim(); if (text) { this.items.push({ text: text, checked: false }); this.newItem = ; } } } }); Dzia(cid:239)anie aplikacji mo(cid:285)esz sprawdzi(cid:202) w JSFiddle pod adresem https://jsfiddle.net/chudaol/vxfkxjzk/3/. Korzystanie z Vue.js w istniej(cid:200)cym projekcie Podejrzewam, (cid:285)e widz(cid:200)c (cid:239)atwo(cid:258)(cid:202), z jak(cid:200) mo(cid:285)na powi(cid:200)za(cid:202) w(cid:239)a(cid:258)ciwo(cid:258)ci modelu z warstw(cid:200) prezenta- cji, ju(cid:285) zastanawiasz si(cid:218), jak wykorzysta(cid:202) Vue we w(cid:239)asnym projekcie. Jednak chwil(cid:218) pó(cid:283)niej przychodzi zw(cid:200)tpienie: przecie(cid:285) b(cid:218)d(cid:218) musia(cid:239) zainstalowa(cid:202) kilka rzeczy, uruchomi(cid:202) polecenie 34 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Zakupy z Vue.js npm install, za(cid:239)adowa(cid:202) brakuj(cid:200)ce pakiety, dostosowa(cid:202) struktur(cid:218) projektu i dopiero wtedy doda(cid:202) dyrektywy i zmodyfikowa(cid:202) kod. Tutaj musz(cid:218) zaprotestowa(cid:202): nie! (cid:191)adnych instalacji, (cid:285)adnych pakietów. Wystarczy pobra(cid:202) plik vue.js i wstawi(cid:202) go w kodzie HTML strony. Tylko tyle! Nie ma konieczno(cid:258)ci dokonywania zmian w strukturze projektu ani podejmowania jakichkolwiek innych decyzji dotycz(cid:200)cych archi- tektury. Nie musisz si(cid:218) nad niczym zastanawia(cid:202)! Poka(cid:285)(cid:218) Ci, jak zastosowali(cid:258)my Vue.js w projekcie EdEra (https://www.ed-era.com) do utworzenia prostej sekcji „Sprawd(cid:283) si(cid:218)” na ko(cid:241)cu rozdzia(cid:239)u ksi(cid:200)(cid:285)ki GitBooka. EdEra to ukrai(cid:241)ski portal edukacyjny, który postawi(cid:239) sobie za cel unowocze(cid:258)nienie systemu o(cid:258)wiaty, wprowadzaj(cid:200)c we(cid:241) elementy interaktywnej zabawy. Jestem jednym z za(cid:239)o(cid:285)ycieli tej m(cid:239)odej firmy i osob(cid:200) odpowiedzialn(cid:200) za techniczn(cid:200) stron(cid:218) przedsi(cid:218)wzi(cid:218)cia. W EdEra mamy kilka kursów online zbudowanych na bazie otwartej platformy EdX (https://open.edx.org/), a tak(cid:285)e kilka interaktywnych ksi(cid:200)(cid:285)ek edukacyjnych, które bazuj(cid:200) na rewelacyjnym frameworku GitBook (http://www.gitbook.com). GitBook to platforma stworzona w technologii Node.js. Pozwala ka(cid:285)dej osobie z elementarn(cid:200) znajomo(cid:258)ci(cid:200) j(cid:218)zyka Markdown i podstawowych polece(cid:241) Gita pisa(cid:202) ksi(cid:200)(cid:285)ki i udost(cid:218)pnia(cid:202) je na serwerach GitBooka. Ksi(cid:200)(cid:285)ki EdEra mo(cid:285)na znale(cid:283)(cid:202) pod adresem http://ed-era.com/books (uwaga, wszystkie s(cid:200) napisane w j(cid:218)zyku ukrai(cid:241)skim). Oto co zrobili(cid:258)my w naszych ksi(cid:200)(cid:285)kach za pomoc(cid:200) Vue.js. W pewnym momencie postanowi(cid:239)am umie(cid:258)ci(cid:202) krótki quiz na ko(cid:241)cu rozdzia(cid:239)u o zaimkach oso- bowych w podr(cid:218)czniku do angielskiego. W zwi(cid:200)zku z tym do(cid:239)(cid:200)czy(cid:239)am plik vue.js i dokona(cid:239)am edycji odpowiedniego pliku .md, wstawiaj(cid:200)c taki oto kod HTML: div id= pronouns p strong Check yourself :) /strong /p textarea class= textarea v-model= text v-on:keyup= checkText {{ text }} /textarea i v-bind:class= { correct : correct, incorrect : !correct } /i /div Nast(cid:218)pnie doda(cid:239)am w(cid:239)asny plik JavaScript z podanym kodem: $(document).ready(function() { var initialText, correctText; initialText = Me is sad because he is more clever than I. ; correctText = I am sad because he is more clever than me. ; new Vue({ el: #pronouns , data: { text: initialText, correct: false }, methods: { checkText: function() { var text; 35 Poleć książkęKup książkę Vue.js 2. Tworzenie reaktywnych aplikacji WWW text = this.text.trim(); this.correct = text === correctText; } } }); }); Kod jest dost(cid:218)pny na stronie GitHuba https://github.com/chudaol/ed-era-book-english. Stron(cid:218) utworzon(cid:200) w Markdownie z wstawionym fragmentem kodu HTML znajdziesz pod adre- sem https://github.com/chudaol/ed-era-book-english/blob/master/2/osobovi_zaimenniki.md. A kod JavaScript dost(cid:218)pny jest pod adresem https://github.com/chudaol/ed-era-book-english/ blob/master/custom/js/quiz-vue.js. Mo(cid:285)esz nawet pobra(cid:202) ca(cid:239)e repozytorium i wypróbowa(cid:202) ksi(cid:200)(cid:285)k(cid:218) na swoim komputerze za pomoc(cid:200) narz(cid:218)dzia gitbook-cli (https://github.com/GitbookIO/gitbook/blob/master/docs/setup.md). Przyjrzyjmy si(cid:218) temu kodowi. Niektóre jego fragmenty powinny wygl(cid:200)da(cid:202) znajomo: (cid:81) Obiekt data zawiera dwie w(cid:239)a(cid:258)ciwo(cid:258)ci: (cid:81) text typu string, (cid:81) correct typu Boolean. (cid:81) Metoda checkText pobiera warto(cid:258)(cid:202) w(cid:239)a(cid:258)ciwo(cid:258)ci text, porównuje j(cid:200) z poprawnym tekstem i nadaje odpowiedni(cid:200) warto(cid:258)(cid:202) w(cid:239)a(cid:258)ciwo(cid:258)ci correct. (cid:81) Dyrektywa v-on powoduje wywo(cid:239)anie metody checkText po zwolnieniu klawisza (na skutek zdarzenia keyup). (cid:81) Dyrektywa v-bind wi(cid:200)(cid:285)e klas(cid:218) correct z w(cid:239)a(cid:258)ciwo(cid:258)ci(cid:200) correct. W moim IDE ten kod wygl(cid:200)da tak jak na rysunku 1.9. Rysunek 1.9. Korzystanie z Vue w projekcie bazuj(cid:200)cym na Markdownie 36 Poleć książkęKup książkę Rysunki 1.10 i 1.11 przedstawiaj(cid:200) stron(cid:218) wy(cid:258)wietlon(cid:200) w przegl(cid:200)darce. Rozdzia(cid:225) 1. • Zakupy z Vue.js Rysunek 1.10. Vue.js w akcji na stronie GitBooka Rysunek 1.11. Vue.js w akcji na stronie GitBooka Wspomnian(cid:200) stron(cid:218) mo(cid:285)esz zobaczy(cid:202) pod adresem http://english.ed-era.com/2/osobovi_ zaimenniki.html. Imponuj(cid:200)ca, prawda? Prosta i do tego reaktywna! Vue.js 2.0! Gdy pisa(cid:239)am t(cid:218) ksi(cid:200)(cid:285)k(cid:218), zapowiedziano premier(cid:218) Vue.js 2.0 (https://vuejs.org/2016/04/27/ announcing-2.0/). Pierwsze recenzje nowej wersji frameworka znajdziesz na stronach: (cid:81) http://www.infoworld.com/article/3063615/javascript/vuejs-lead-our-javascript- -framework-is-faster-than-react.html, (cid:81) https://www.reddit.com/r/vuejs/comments/4gq2r1/announcing_vuejs_20/. 37 Poleć książkęKup książkę Vue.js 2. Tworzenie reaktywnych aplikacji WWW Druga wersja Vue.js pod pewnymi wzgl(cid:218)dami znacz(cid:200)co ró(cid:285)ni si(cid:218) od pierwszej, zaczynaj(cid:200)c od sposobu wi(cid:200)zania danych, a ko(cid:241)cz(cid:200)c na interfejsie API. Do renderowania u(cid:285)ywa lekkiej wirtualnej implementacji drzewa DOM, obs(cid:239)uguje renderowanie po stronie serwera, jest szybsza i mniejsza obj(cid:218)to(cid:258)ciowo. W chwili, gdy pisa(cid:239)am te s(cid:239)owa, Vue 2.0 by(cid:239) we wczesnej wersji alfa. Ale nie martw si(cid:218). Wszystkie przyk(cid:239)ady omawiane w tej ksi(cid:200)(cid:285)ce bazuj(cid:200) na najnowszej stabilnej wersji Vue 2.0 i s(cid:200) w pe(cid:239)ni kompatybilne z poprzedni(cid:200). Projekty, w których wykorzystano Vue.js Prawdopodobnie zastanawiasz si(cid:218), jakie strony zosta(cid:239)y zbudowane w ca(cid:239)o(cid:258)ci lub cz(cid:218)(cid:258)ciowo na bazie Vue.js. W sieci istnieje ich wiele — od rozwi(cid:200)za(cid:241) typu open source, przez projekty badaw- cze, po aplikacje klasy enterprise. Pe(cid:239)n(cid:200) i stale aktualizowan(cid:200) list(cid:218) tych projektów mo(cid:285)na zna- le(cid:283)(cid:202) pod adresem https://github.com/vuejs/awesome-vue#projects-using-vuejs. Przyjrzyjmy si(cid:218) niektórym z nich. Grammarly Grammarly (https://www.grammarly.com/) to us(cid:239)uga, która pomaga poprawnie pisa(cid:202) w j(cid:218)zyku angielskim. Obejmuje kilka aplikacji, w tym proste rozszerzenie przegl(cid:200)darki Chrome, sprawdzaj(cid:200)ce poprawno(cid:258)(cid:202) wprowadzanego tekstu. Jest tak(cid:285)e internetowy edytor przeznaczony do sprawdzania d(cid:239)u(cid:285)szych fragmentów tekstu. Ten edytor zosta(cid:239) zbudowany przy u(cid:285)yciu Vue.js! Na rysunku 1.12 pokazano tekst, który w(cid:239)a(cid:258)nie czytasz (w oryginale — przyp. t(cid:239)um.), edytowany w internetowym edytorze Grammarly: Rysunek 1.12. Grammarly — projekt bazuj(cid:200)cy na frameworku Vue.js 38 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Zakupy z Vue.js Optimizely Optimizely (https://www.optimizely.com/) to us(cid:239)uga, która pomaga testowa(cid:202), optymalizowa(cid:202) i per- sonalizowa(cid:202) witryny. Aby sprawdzi(cid:202), czy serwis rzeczywi(cid:258)cie korzysta z Vue.js, utworzy(cid:239)am nowy eksperyment, w którym wykorzysta(cid:239)am stron(cid:218) wydawnictwa Packt (zob. rysunek 1.13). Rysunek 1.13. Optimizely: projekt bazuj(cid:200)cy na frameworku Vue.js Po umieszczeniu kursora myszy nad danym elementem strony mo(cid:285)na otworzy(cid:202) menu kon- tekstowe pozwalaj(cid:200)ce wprowadza(cid:202) na stronie ró(cid:285)ne zmiany. Najprostsza polega na edycji tekstu (zob. rysunki 1.14 i 1.15). Rysunek 1.14. Vue.js w trakcie dzia(cid:239)ania w serwisie Optimizely 39 Poleć książkęKup książkę Vue.js 2. Tworzenie reaktywnych aplikacji WWW Rysunek 1.15. Vue.js w trakcie dzia(cid:239)ania w serwisie Optimizely Na ekranie pojawi(cid:239)o si(cid:218) pole tekstowe. Wprowadzanie tekstu powoduje reaktywn(cid:200) zmian(cid:218) tytu(cid:239)u. Widzieli(cid:258)my to ju(cid:285) wcze(cid:258)niej, w naszej aplikacji Vue. FilterBlend FilterBlend (https://github.com/ilyashubin/FilterBlend) to narz(cid:218)dzie typu open source, które s(cid:239)u(cid:285)y do eksperymentowania z w(cid:239)a(cid:258)ciwo(cid:258)ciami CSS background-blend-mode oraz filter. Pozwala za(cid:239)adowa(cid:202) w(cid:239)asne zdj(cid:218)cia i stosowa(cid:202) do nich ró(cid:285)ne kombinacje filtrów i trybów mieszania. Je(cid:285)eli chcesz wypróbowa(cid:202) narz(cid:218)dzie FilterBlend, mo(cid:285)esz je zainstalowa(cid:202) lokalnie. W tym celu wykonaj nast(cid:218)puj(cid:200)ce kroki: 1. Sklonuj repozytorium: git clone https://github.com/ilyashubin/FilterBlend.git 2. Przejd(cid:283) do katalogu FilterBlend: cd FilterBlend 3. Zainstaluj zale(cid:285)no(cid:258)ci: npm install 4. Uruchom projekt: gulp Wpisz w przegl(cid:200)darce adres localhost:8000 i spróbuj wygenerowa(cid:202) jaki(cid:258) ciekawy efekt. Zauwa(cid:285), (cid:285)e ka(cid:285)da zmiana w menu po prawej stronie zostanie natychmiast odzwierciedlona na obrazie po lewej. Jest to zas(cid:239)uga Vue.js. Je(cid:285)eli nie wierzysz, zajrzyj do kodu na GitHubie. Narz(cid:218)dzie FilterBlend pokazano na rysunku 1.16. 40 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Zakupy z Vue.js Rysunek 1.16. FilterBlend: projekt zbudowany na bazie Vue.js PushSilver PushSilver (https://pushsilver.com) to eleganckie i proste narz(cid:218)dzie dla zapracowanych, wspoma- gaj(cid:200)ce obs(cid:239)ug(cid:218) faktur. Umo(cid:285)liwia tworzenie, wysy(cid:239)anie i ponowne przesy(cid:239)anie faktur do klientów, a tak(cid:285)e prowadzenie ich ewidencji. Jego autor, niezale(cid:285)ny konsultant, by(cid:239) zm(cid:218)czony konieczno(cid:258)ci(cid:200) nieustannego tworzenia faktur przy okazji ka(cid:285)dego ma(cid:239)ego projektu. To przydatne narz(cid:218)dzie tak(cid:285)e powsta(cid:239)o dzi(cid:218)ki Vue.js (zob. rysunki 1.17 i 1.18). Organizacja ksi(cid:200)(cid:285)ki Wi(cid:218)kszo(cid:258)ci ksi(cid:200)(cid:285)ek technicznych nie trzeba czyta(cid:202) od pocz(cid:200)tku do ko(cid:241)ca. Tak jest i w tym przypadku. Mo(cid:285)esz wybra(cid:202) fragmenty, które interesuj(cid:200) Ci(cid:218) najbardziej, i pomin(cid:200)(cid:202) ca(cid:239)(cid:200) reszt(cid:218). Ksi(cid:200)(cid:285)ka zosta(cid:239)a podzielona na nast(cid:218)puj(cid:200)ce rozdzia(cid:239)y: (cid:81) Rozdzia(cid:239) 1.: poniewa(cid:285) przeczyta(cid:239)e(cid:258) ju(cid:285) prawie ca(cid:239)y, zak(cid:239)adam, (cid:285)e nie ma potrzeby omawiania jego zawarto(cid:258)ci. (cid:81) Rozdzia(cid:239) 2., „Podstawy — instalacja i u(cid:285)ytkowanie”: ma charakter teoretyczny, obja(cid:258)nia, co si(cid:218) dzieje za kulisami Vue.js, oraz zawiera omówienie budowy frameworka. Je(cid:258)li nie przepadasz za teori(cid:200) i chcesz od razu przej(cid:258)(cid:202) do programowania, pomi(cid:241) ten rozdzia(cid:239). Omówimy w nim równie(cid:285) instalacj(cid:218) i konfiguracj(cid:218) Vue. 41 Poleć książkęKup książkę Vue.js 2. Tworzenie reaktywnych aplikacji WWW Rysunek 1.17. PushSilver: aplikacja do zarz(cid:200)dzania fakturami bazuj(cid:200)ca na frameworku Vue Rysunek 1.18. PushSilver: aplikacja do zarz(cid:200)dzania fakturami bazuj(cid:200)ca na frameworku Vue (cid:81) W rozdzia(cid:239)ach 3. – 8. zbudujemy kilka aplikacji. W ka(cid:285)dym z nich skoncentrujemy si(cid:218) na innym obszarze funkcjonalno(cid:258)ci Vue.js: (cid:81) W rozdziale 3., „Komponenty — zasada dzia(cid:239)ania i zastosowanie”, wprowadzimy komponenty Vue. Zdobyt(cid:200) wiedz(cid:218) na ich temat wykorzystamy przy budowie naszych aplikacji. 42 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Zakupy z Vue.js (cid:81) W rozdziale 4., „Reaktywno(cid:258)(cid:202) — wi(cid:200)zanie danych”, poznamy wszystkie mechanizmy wi(cid:200)zania danych dost(cid:218)pne w Vue.js. (cid:81) W rozdziale 5., „Vuex — zarz(cid:200)dzanie stanem aplikacji”, omówimy system zarz(cid:200)dzania stanem Vuex i wyja(cid:258)nimy, jak z niego korzysta(cid:202) w aplikacjach. (cid:81) W rozdziale 6., „Wtyczki — buduj dom ze swoich w(cid:239)asnych cegie(cid:239)”, utworzymy kilka wtyczek Vue i dowiemy si(cid:218), jak z nich korzysta(cid:202) w aplikacjach, aby zwi(cid:218)kszy(cid:202) ich funkcjonalno(cid:258)(cid:202). (cid:81) W rozdziale 7., „Testy — sprawdzanie poprawno(cid:258)ci dzia(cid:239)ania aplikacji”, poznamy niestandardowe dyrektywy Vue.js i sami utworzymy oraz wykorzystamy kilka z nich w naszej aplikacji. (cid:81) W rozdziale 8., „Wdra(cid:285)anie — startujemy w sieci!”, nauczymy si(cid:218) testowa(cid:202) i wdra(cid:285)a(cid:202) aplikacje JavaScript napisane w Vue.js. (cid:81) W rozdziale 9., „Co dalej?”, podsumujemy to, czego si(cid:218) nauczyli(cid:258)my, i zastanowimy si(cid:218), w jaki sposób mo(cid:285)emy jeszcze ulepszy(cid:202) nasze aplikacje. Zarz(cid:200)dzamy czasem! Teraz wiem ju(cid:285) na pewno, (cid:285)e jeste(cid:258) entuzjastycznie nastawiony do tej ksi(cid:200)(cid:285)ki i (cid:285)e chcesz j(cid:200) przeczyta(cid:202) jednym tchem. Ale nie o to chodzi. Sztuka zarz(cid:200)dzania czasem polega na tym, aby umiej(cid:218)tnie dzieli(cid:202) go mi(cid:218)dzy prac(cid:218) i odpoczynek. Utwórzmy ma(cid:239)(cid:200) aplikacj(cid:218), zegar, który pomo(cid:285)e nam efektywnie zarz(cid:200)dza(cid:202) czasem pracy za pomoc(cid:200) techniki Pomodoro. Technika Pomodoro to technika zarz(cid:200)dzania czasem, której nazwa pochodzi od kuchennego minutnika w kszta(cid:239)cie pomidora (Pomodoro to po w(cid:239)osku „pomidor”). Istot(cid:200) tej techniki s(cid:200) cz(cid:218)ste i krótkie przerwy w pracy co okre(cid:258)lon(cid:200) liczb(cid:218) minut. Wi(cid:218)cej informacji o technice Pomodo- ro znajdziesz na jej oficjalnej stronie: http://pomodorotechnique.com/. Nasze zadanie jest wi(cid:218)c (cid:239)atwe. Wystarczy, (cid:285)e utworzymy bardzo prosty licznik, który b(cid:218)dzie odlicza(cid:239) sekundy pozosta(cid:239)e do ko(cid:241)ca czasu pracy, a nast(cid:218)pnie uruchomi si(cid:218) ponownie, tym razem odliczaj(cid:200)c sekundy pozosta(cid:239)e do ko(cid:241)ca odpoczynku, i tak dalej. Zajmijmy si(cid:218) tym! W obiekcie Vue wprowadzimy dwie zmienne z danymi: minute oraz second. Dzi(cid:218)ki pierwszej wy(cid:258)wietlimy na naszej stronie minuty, a dzi(cid:218)ki drugiej — sekundy. Metoda _tick wraz z up(cid:239)ywem czasu b(cid:218)dzie zmniejsza(cid:202) warto(cid:258)(cid:202) zmiennej second. Kiedy ta ostatnia b(cid:218)dzie równa 0, zmniejszy równie(cid:285) warto(cid:258)(cid:202) zmiennej minute o 1. Kiedy obie zmienne osi(cid:200)gn(cid:200) warto(cid:258)(cid:202) 0, aplikacja prze(cid:239)(cid:200)czy si(cid:218) mi(cid:218)dzy czasem pracy a odpoczynkiem: 43 Poleć książkęKup książkę Vue.js 2. Tworzenie reaktywnych aplikacji WWW Kod JavaScript b(cid:218)dzie wygl(cid:200)da(cid:202) nast(cid:218)puj(cid:200)co: const POMODORO_STATES = { WORK: work , REST: rest }; const WORKING_TIME_LENGTH_IN_MINUTES = 25; const RESTING_TIME_LENGTH_IN_MINUTES = 5; new Vue({ el: #app , data: { minute: WORKING_TIME_LENGTH_IN_MINUTES, second: 0, pomodoroState: POMODORO_STATES.WORK, timestamp: 0 }, methods: { start: function() { this._tick(); this.interval = setInterval(this._tick, 1000); }, _tick: function() { // Je(cid:298)eli warto(cid:286)(cid:252) second jest wi(cid:266)ksza od 0, zmniejsz j(cid:261) o 1. if (this.second !== 0) { this.second--; return; } // Je(cid:298)eli second ma warto(cid:286)(cid:252) 0, a minute nie, // zmniejsz minute o 1 i nadaj second warto(cid:286)(cid:252) 59. if (this.minute !== 0) { this.minute--; this.second = 59; return; } // Je(cid:298)eli second i minute s(cid:261) równe 0, // prze(cid:225)(cid:261)cz mi(cid:266)dzy czasem pracy a odpoczynkiem. this.pomodoroState = this.pomodoroState === POMODORO_STATES.WORK ? POMODORO_STATES.REST : POMODORO_STATES.WORK; if (this.pomodoroState === POMODORO_STATES.WORK) { this.minute = WORKING_TIME_LENGTH_IN_MINUTES; } else { this.minute = RESTING_TIME_LENGTH_IN_MINUTES; } } } }); 44 Poleć książkęKup książkę W kodzie HTML zarezerwujemy miejsce na minut(cid:218) i sekund(cid:218) oraz utworzymy przycisk startu naszego zegara Pomodoro: Rozdzia(cid:225) 1. • Zakupy z Vue.js div id= app class= container h2 span Pomodoro /span button @click= start() i class= glyphicon glyphicon-play /i /button /h2 div class= well div class= pomodoro-timer span {{ minute }} /span : span {{ second }} /span /div /div /div Do stylizacji ponownie u(cid:285)yjemy Bootstrapa, co pozwoli nada(cid:202) zegarowi elegancki wygl(cid:200)d (zob. rysunek 1.19). Rysunek 1.19. Zegar odliczaj(cid:200)cy czas, zbudowany za pomoc(cid:200) Vue.js Nasza aplikacja prezentuje si(cid:218) dobrze, ale ma przynajmniej trzy wady: (cid:81) Nic nie wiemy o jej aktualnym stanie. Nie wiemy zatem, czy powinni(cid:258)my pracowa(cid:202), czy odpoczywa(cid:202). Dodajmy tytu(cid:239), który b(cid:218)dzie si(cid:218) zmienia(cid:202) przy ka(cid:285)dej zmianie stanu aplikacji. (cid:81) Minuty i sekundy te(cid:285) nie s(cid:200) wy(cid:258)wietlane prawid(cid:239)owo. Na przyk(cid:239)ad warto(cid:258)(cid:202) 24 minuty i 5 sekund powinna by(cid:202) prezentowana na stronie jako 24:05, a nie jako 24:5. Naprawimy to, zast(cid:218)puj(cid:200)c zwyk(cid:239)(cid:200) warto(cid:258)(cid:202) warto(cid:258)ci(cid:200) obliczan(cid:200). (cid:81) Przycisk startu mo(cid:285)na klika(cid:202) wielokrotnie, a po ka(cid:285)dym klikni(cid:218)ciu tworzony jest nowy zegar. Spróbuj go klikn(cid:200)(cid:202) kilka razy i zobacz, co si(cid:218) dzieje z zegarem. Naprawimy to, dodaj(cid:200)c przyciski pauzy i stopu. Nast(cid:218)pnie uzale(cid:285)nimy stan poszczególnych przycisków (aktywny, nieaktywny) od stanu aplikacji. Zmiana tytu(cid:239)u przy u(cid:285)yciu w(cid:239)a(cid:258)ciwo(cid:258)ci obliczanych Zacznijmy od rozwi(cid:200)zania pierwszego problemu. Dodamy w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) obliczan(cid:200) title i u(cid:285)yjemy jej w kodzie HTML. 45 Poleć książkęKup książkę Vue.js 2. Tworzenie reaktywnych aplikacji WWW W(cid:239)a(cid:258)ciwo(cid:258)ci obliczane (ang. computed properties) to w(cid:239)a(cid:258)ciwo(cid:258)ci wewn(cid:200)trz obiektu data, które pozwalaj(cid:200) unikn(cid:200)(cid:202) osadzania oblicze(cid:241) bezpo(cid:258)rednio w kodzie szablonu. Wi(cid:218)cej in- formacji na temat w(cid:239)a(cid:258)ciwo(cid:258)ci obliczanych znajdziesz w oficjalnej dokumentacji na stronie http://vuejs.org/guide/computed.html. Dodaj w obiekcie opcji Vue sekcj(cid:218) computed i umie(cid:258)(cid:202) w niej w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) title: data: { //... }, computed: { title: function() { return this.pomodoroState === (cid:180)POMODORO_STATES.WORK ? Pracuj! : Odpoczywaj! } }, methods: { //... Teraz wystarczy u(cid:285)y(cid:202) w(cid:239)a(cid:258)ciwo(cid:258)ci w kodzie HTML tak jak zwyk(cid:239)ej w(cid:239)a(cid:258)ciwo(cid:258)ci modelu danych Vue: h2 span Pomodoro /span !--! /h2 h3 {{ title }} /h3 div class= well Gotowe! Tytu(cid:239) zmienia si(cid:218) teraz po ka(cid:285)dym prze(cid:239)(cid:200)czeniu stanu zegara (zob. rysunek 1.20). Rysunek 1.20. Automatyczna zmiana tytu(cid:239)u na podstawie stanu zegara Prawda, (cid:285)e fajne? 46 Poleć książkęKup książkę Rozdzia(cid:225) 1. • Zakupy z Vue.js Dope(cid:239)nienie warto(cid:258)ci za pomoc(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)ci obliczanych Podobne rozwi(cid:200)zanie zastosujemy, aby dope(cid:239)ni(cid:202) liczb(cid:218) minut i sekund zerem po lewej stronie. Dodamy w sekcji computed dwie obliczane w(cid:239)a(cid:258)ciwo(cid:258)ci, min i sec, i zastosujemy prosty algorytm wstawiaj(cid:200)cy 0 po lewej stronie. Oczywi(cid:258)cie mogliby(cid:258)my u(cid:285)y(cid:202) s(cid:239)ynnej biblioteki left-pad (https://github.com/stevemao/left-pad), ale aby zachowa(cid:202) prostot(cid:218) i nie popsu(cid:202) ca(cid:239)ego internetu (http://www.spidersweb.pl/2016/03/domek-z-kart-left-pad.html), zastosujemy w(cid:239)asne rozwi(cid:200)zanie: computed: { title: function() { return this.pomodoroState === (cid:180)POMODORO_STATES.WORK ? Pracuj! : Odpoczywaj! }, min: function() { if (this.minute 10) { return 0 + this.minute; } return this.minute; }, sec: function() { if (this.second 10) { return 0 + this.second; } return this.second; } } Nowe w(cid:239)a(cid:258)ciwo(cid:258)ci wstawimy w kodzie HTML w miejsce zmiennych minute i second: div class= pomodoro-timer span {{ min }} /span : span {{ sec }} /span /div Od(cid:258)wie(cid:285) stron(cid:218) i sprawd(cid:283), czy liczby wygl(cid:200)daj(cid:200) teraz tak jak na rysunku 1.21. Rysunek 1.21. Dope(cid:239)nienie zerem za pomoc(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)ci obliczanych 47 Poleć książkęKup książkę Vue.js 2. Tworzenie reaktywnych aplikacji WWW Kontrola stanu przy u(cid:285)yciu przycisków startu, pauzy i stopu Aby rozwi(cid:200)za(cid:202) trzeci problem, wprowadzimy trzy stany aplikacji: started (uruchomiona), paused (wstrzymana) i stopped (zatrzymana) oraz trzy odpowiadaj(cid:200)ce im metody, których zadaniem b(cid:218)dzie prze(cid:239)(cid:200)czanie mi(cid:218)dzy tymi stanami. Poniewa(cid:285) mamy ju(cid:285) metod(cid:218) start, odpowiedzialn(cid:200) za uruchomienie aplikacji, wystarczy doda(cid:202) w niej instrukcj(cid:218) prze(cid:239)(cid:200)czaj(cid:200)c(cid:200) stan na wa
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Vue.js 2. Tworzenie reaktywnych aplikacji WWW
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: