Miałem zacząć ten post od oznajmienia jak przyjemnie pracuje mi się z biblioteką Vue, ale wydaje mi się że chyba nie muszę robić tego kolejny raz. Na potrzeby tworzenia niewielkich aplikacji webowych jest dla mnie w tym momencie wyborem numer jeden.
Mechanizm, który dziś przedstawię, jeszcze bardziej zwiększy ‚używalność’ Vue. Komponenty, bo o nich mowa, pozwalają na modularyzację widoku aplikacji. Dzięki temu możemy tworzyć fragmenty widoku, które później bardzo łatwo jest ‚wstrzyknąć’ do aplikacji.
Dzisiejszy przykładowy dokument HTML zawiera taki oto element body:
|
1 2 3 4 5 6 7 8 9 |
<body> <div id="vueApp"> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script> <script type="text/javascript" src="app.js"></script> </body> |
Ten setup powinien wyglądać już dość znajomo dla tych, którzy śledzą moje wpisy o Vue. Kod biblioteki dołączm z CDNu. Następnie dodaję plik ze skryptem app.js (początkowo jest pusty). Element, w którym dodaję moje przykłady to div o ID vueApp.
Pierwszym krokiem w tworzeniu nowego komponentu jest dodanie jego definicji do naszego skryptu. Aby to zrobić, w skrypcie app.js, wewnątrz obiektu definiującego instancję Vue, dodaję nowe pole: components (Nie jest to jedyny sposób na tworzenie komponentu, ale o tym później).
|
1 2 3 4 5 6 |
var vueApp = new Vue({ el: '#vueApp', components: { } }) |
Zawartością components jest obiekt, którego pola z kolei będą już definicjami moich komponentów. Na początek stworzę jeden komponent, będzie to zmodyfikowany nagłówek witający użytkownika.
Oto jak wygląda podstawowa definicja komponentu:
|
1 2 3 4 5 6 7 8 |
var vueApp = new Vue({ el: '#vueApp', components: { 'my-header': { template: '<h2>Welcome User</h2>', }, } }) |
Każde pole obiektu components to zarazem nazwa tworzonego komponentu. Wartość takiego pola to kolejny obiekt. W swej najprostszej postaci, obiekt taki (który jest już definicją konkretnego komponentu), posiada jedno pole: template. Zawartość tego pola to łańcuch znaków definiujący kod html konstruowanego komponentu. Może to być dowolna ilość zagnieżdżonego kodu, zarówno duże jak i małe komponenty. W moim przypadku, jest to bardzo mały komponent – nagłówek z powitaniem.
Tak przygotowany komponent mogę dodać do mojego widoku:
|
1 2 3 |
<div id="vueApp"> <my-header></my-header> </div> |
I gotowe, tak przygotowany komponent można dodawać do widoku wielokrotnie. W tym miejscu muszę zaznaczyć jedną bardzo ważną rzecz, wielowyrazowe nazwy wszystkich tych zmiennych które będą trafiać do widoku w formie literalnej, najlepiej jest zapisywać z myślnikami, nie camelCasem. To dlatego, że w dokumencie HTML wielkość liter nie ma znaczenia i może to doprowadzić do nieprzewidywalnego zachowania.
Obiekt komponentu ma bardzo wiele możliwości. Można do niego dodawać praktycznie takie same opcje jak do głównego widoku Vue. Jest oczywiście kilka różnic. Najważniejsza, to taka, że obiekt data zwraca nie obiekt a funkcje zwracającą obiekt:
|
1 2 3 4 5 6 7 8 |
components: { 'my-header': { template: '<h2>Welcome</h2>', data: function(){ return {} } }, } |
Dlaczego w ten sposób? Zazwyczaj tworzone komponenty wykorzystujemy wiele razy w widoku. Powstaje wiele ich „instancji”, a zakres obiektów w ich definicji jest wspólny. Dlatego data wrzuca się do funkcji, która tworzy osobny zakres dla każdej wersji komponentu.
Oto jak można by wykorzystać obiekt data wewnątrz komponentu:
|
1 2 3 4 5 6 7 8 9 10 11 |
components: { 'my-header': { //props: ['userName'], template: '<h2>Welcome {{ userName }}</h2>', data: function(){ return { userName: 'John' } } }, } |
Wystarczy, że nazwę utworzonego pola dodam do komponentu, tak jakbym dodawał je do widoku. Odpowiednia informacja zostanie wyświetlona w przeglądarce. Mogę tu stosować takie same techniki i mechanizmy jak w głównym widoku aplikacji. Jak widać w Vue można budować bardzo wszechstronne komponenty.
To wszystko na dziś, w kolejnym poście opiszę jak dynamicznie wpływać na treść komponentu od strony głównego widoku, oraz jak budować komponenty poza główną instancją Vue, co pozwala na tworzenie bibliotek komponentów. Jeśli chcesz być na bieżąco z postami na blogu zachęcam do polubienia mojej strony na facebooku. Zawsze zamieszczam tam informacje o wszystkich nowościach. Jest to też dobre miejsce na kontakt ze mną. Na wszystkie pytania zawsze odpowiem :).