Dyrektywy w Vue.js można określić jako mniejszą wersję funkcji. Powodują one zmianę zachowania danego elementu, przez co np. tekst zapisany w HTML-u zostanie odpowiednio sformatowany i wyświetlony.

Dyrektywy warunkowe

Poprzedni wpis poświeciłem dyrektywom warunkowym, które działają w sposób zbliżony do instrukcji warunkowych w czystym JS-ie. Poznaliśmy tam 3 dyrektywy: v-show, v-if oraz v-else. Myślę, że nie ma sensu powielać tej wiedzy w tym artykule, dlatego zachęcam do rzucenia okiem samodzielnie: Dyrektywy warunkowe w Vue.js.

Dyrektywy w Vue.js

Warto zaznaczyć, że dyrektywy w Vue.js zapisujemy jako atrybuty HTML-owe, poprzedzone prefiksem v-. Co prawda z HTML-em mają niewiele wspólnego - są interpretowane przez nasz kochany Vue ;)

v-model

Dyrektywa v-model pozwala na dynamiczne przekazywanie danych. Przykładowo, wprowadzając dane do pola tekstowego zbindowanego z odpowiednią zmienną w obiekcie data, możemy z tych danych korzystać w kodzie. Przykład, który powinien nieco rozjaśnić tę dyrektywę wrzucam niżej. Wystarczy podać liczbę naturalną, która zostanie przekazana do Vue i od niej będzie zależna wielkość tekstu.

See the Pen PygadO by Kacper Stawiński (@kstawinski) on CodePen.

v-bind

Dyrektywa v-bind służy do podpinania HTML-owych atrybutów jako dynamiczne wartości Vue.js. Sposoby zapisania są dwa:

<a v-bind:href="url">Pełna wersja dyrektywy v-bind</a>
<a :href="url">Skrócona wersja dyrektywy v-bind</a>

Efektem wykonania takiego kodu będzie link o atrybucie [href="{{ url }}"].

v-text

Dyrektywa v-text działa identycznie, jak zapis zmiennej w tzw. wąsach (czyli podwójnych klamrach). Różnica jest jedynie w sposobie zapisania.

<p v-text="message"></p>

<p>{{ message }}</p>

Żadnej różnicy w działaniu pomiędzy takimi zapisami nie ma.

v-html

Dyrektywa v-html powoduje, że tekst zapisany za pomocą HTML-a w zmiennej zostanie zinterpretowany przez przeglądarkę przed wyświetleniem. Otrzymamy wówczas sformatowany wynik.

Załóżmy, że zmienna message jest równa <b>endfront</b>.

<div>Znajdujesz się na blogu {{ message }}.</div>
<!-- // => "Znajdujesz się na blogu <b>endfront</b>" -->

<div v-html>Znajdujesz się na blogu {{ message }}.</div>
<!-- // => "Znajdujesz się na blogu endfront"
(przy czym słowo "endfront" będzie pogrubione). -->

v-pre

Dyrektywa v-pre pozwala na stosowanie znaków zarezerwowanych dla Vue, takich jak wcześniej wspomniane klamry otaczające zmienne. Innymi słowy, jest to dyrektywa pozwalająca na ominięcie interpretacji przez Vue.js.

<span v-pre>{{ przykładowy tekst, który nie zostanie zinterpretowany }}</span>

Podsumowanie

Dzisiaj krótko, ale konkretnie. W miarę rozwoju projektu będziemy poznawać więcej dyrektyw, opartych na konkretnych przykładach. Te najważniejsze omówiłem dzisiaj - na resztę przyjdzie czas podczas pisania własnego projektu.

Ćwiczenie na dziś:


Wzorując się na przykładzie z v-model stwórz projekt, w którym po podaniu kilku atrybutów (np. wielkość czcionki, kolor tekstu i kolor tła) zmiany zastosują się automatycznie do paragrafu z określonym tekstem.

Podpowiedź: zbiór z takimi danymi powinien być obiektem.


Powodzenia i do przeczytania!