Kurs Vue.js krok po kroku – Komponenty

Po serii podstaw dzisiaj wreszcie możemy przejść do czegoś co jest w zasadzie kluczowe w całej idei Vue.js czyli do komponentów.

Czym są komponenty

Zobacz na dowolną stronę www. Na ogół składa się ze stałych elementów. Mamy nagłówek, nawigację, jakąś treść i stopkę. Do tego właśnie możemy użyć komponentów. Mogą to być elementy jednorazowe ale też i takie powtarzane wielokrotnie jak np. listy z treścią. I tu właśnie tkwi siła w wielokrotnie wykorzystywanych komponentach. Definiujemy jakiś fragment np. element z tytułem autorem, datą i zajawką wpisu blogowego i możemy go w prosty sposób wykorzystywać w naszej aplikacji wielokrotnie.

W późniejszych lekcjach nauczymy się zagnieżdżać komponenty czy komunikować się między nimi. Dzisiaj zajmiemy się samymi podstawami.

Definiowanie komponentu

Trzymajmy się przykładu z listowaniem notek na blogu. Powiedzmy, że chcemy uzyskać docelowo taką konstrukcję:

Zdefiniujmy sobie komponent:

Nazwaliśmy komponent blog-entry i od tego momentu możemy go użyć w naszym HTMLu jako

Jak zauważyłeś w komponencie też mamy sekcję data. I tutaj dosyć istotna informacja w kontekście tego samego w instancji Vue.js. O ile tam data to był obiekt, o tyle w komponentach jest to funkcja, która zwraca obiekt.

W zmiennej template umieszczamy naszego wcześniej ustalonego HTMLa. Tutaj uwaga nr 2: pamiętaj, że każdy template musi mieć jeden nadrzędny element co sprowadza się po prostu do objęcia naszej treści jakimś nadrzędnym divem.

W ten prosty sposób uzyskaliśmy komponent blog-entry który możemy wielokrotnie używać w naszej aplikacji. Jak pewnie zauważyłeś nie jest to jakieś specjalnie piękne i przy wielu komponentach, rozbudowanej aplikacji zrobiłoby się z tego przynajmniej spaghetti. Ciężkie w pisaniu, utrzymywaniu i zrozumieniu.

Spokojnie! Mam dobra wiadomość: dochodzimy do siły i prostoty Vue.js – w kolejnym odcinku nauczymy się jak rozbić komponenty na osobne pliki czyniąc naszą aplikację bardziej czytelną ale też ułatwiając sobie pracę.

Subskrybuj kanał na YouTube

Ten kurs to przede wszystkim kurs VIDEO co oznacza, że więcej informacji, przykładów, omówienie poszczególnych kroków i w ogóle dużo więcej niż w powyższym tekście znajdziesz w materiale video. Materiał pojawi się w tym miejscu w ciągu najbliższych 2 tygodni. Nie chcesz przegapić? Subskrybuj kanał na YouTube!

Przede wszystkim admin, potem webdeveloper choć kiedyś było odwrotnie. Obecnie Full Stack Engineer, CTO i System Architect. Po godzinach fan dobrych seriali, których nigdy nie ma czasu obejrzeć. Kawożłop. Koneser prawdziwego piwa. W czasie pomiędzy kontuzjami biega.

Send this to a friend

webmastah.weekly
Cotygodniowa porcja linków ze świata WEBDEV BEZ spamu, TYLKO samo mięcho!
Zobacz poprzednie wydania. Dołącz do 2 tysięcy webdeveloperów!
HTML5, CSS3, JS (React, Angular, Ember, Vue), PHP, SQL