Kurs Vue.js krok po kroku – warunki i pętle

Po dwóch odcinkach wprowadzających wreszcie możemy przystąpić do konkretów. Dzisiaj nauczymy się jak korzystać z warunków i pętli w Vue.js.

Środowisko do pracy

W pierwszym odcinku mówiłem, że do nauki możesz użyć np. serwisu JSFiddle. Fajna sprawa jeżeli chcemy coś porobić w dowolnym miejscu, na dowolnej maszynie byle z dostępem do internetu.

Ja jednak dla swojej wygody skorzystam klasycznie z edycji na swoim własnym laptopie. Utwórz sobie jakiś katalog, wrzuć do niego index.html i nie zapomnij załadować do niego biblioteki Vue.js. Ja skorzystam z hostowanego pliku na CDN https://unpkg.com/vue, który zawsze odnosi się do najnowszej wersji.

Warunki IF / ELSE

Jak już wspominałem wcześniej dyrektywy Vue.js prosto poznać – zaczynają się od przedrostka „v-”. v-if to banalna konstrukcja.

Możesz też użyć v-else pamiętając, że musi się on znaleźć bezpośrednio za elementem z warunkiem IF.

Warunek SHOW

Podobny wynik da dyrektywa v-show aczkolwiek różnica między nimi tkwi w działaniu. Podczas kiedy v-if determinuje renderowanie danego elementu, v-show zawsze element renderuje, aczkolwiek ustawi mu niewidoczność w CSS.

Zobacz podane przykłady na filmie (na dole) – wtedy wszystko będzie jasne.

Pętle FOR

Tak samo łatwo użyć v-for

Przykłady działania

Tutaj za kilka dni pojawi się film prezentujący więcej przykładów użycia. Tekst ma to do siebie, że ciężko przekazać w nim wszystkie możliwości dlatego zachęcam obejrzeć film gdzie omawiam te przykłady.

Subskrybuj kanał, żeby nie przeoczyć tego odcinka


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.

  • mercs600

    Generalnie fajnie, widzę, że w polskiej sieci się ostatnio więcej dzieje jeżeli chodzi o dev blogi… ale czasami zastanawiam się jaki sens jest przepisywać dokumentację. Czy nie lepiej byłoby gdybyśmy przetłumaczyli oryginalną na polski ? byłaby spójna i dostępna w jednym miejscu. Uważam, że takie blogi jak ten powinny przynosić więcej merytoryki na temat niuansów, które każdy z nas musiał kiedyś rozgryźć – to przydałoby się początkującym. Bo opisane powyżej metody są jasne i czytelne nawet bez znajomości języka angielskiego.

    • nrm

      Oczywiście masz rację. To dlatego, że to bardziej kurs video niż tekst, ciężko przełożyć szersze opowiadanie i pokazywanie na pare zdań. Druga sprawa to założenie „od podstaw”, co dla nas jest jasne, niekonieczne jest jasne dla kogoś innego 😉

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