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.
