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.

<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

    <script src="https://unpkg.com/vue"></script>

    <div id="app"></div>
    
  </body>
</html>

Warunki IF / ELSE

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

<p v-if="selected">Wybrany widoczny element</p>

var app = new Vue({
  el: '#app',
  data: {
    selected: true
  }
})

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

<p v-if="selected">selected true</p>
<p v-else>selected false</p>

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.

<p v-show="selected">Wybrany widoczny element SHOW</p>

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

Pętle FOR

Tak samo łatwo użyć v-for

<ol>
  <li v-for="category in categories">
    {{ category }}
  </li>
</ol>
     
var app = new Vue({
  el: '#app',
  data: {
    categories: ['Frontend', 'Backend', 'Marketing', 'Po godzinach']
  }
})

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

Dodaj na LinkedIn
Mirosław Okoński
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. Miłośnik piwa i Metaxy. W czasie pomiędzy kontuzjami biega.