Frontend Academy · Lekcja

Dyrektywy: v-if, v-for, v-bind, v-on

Proszę renderować warunkowo za pomocą v-if i v-show, iterować za pomocą v-for, dynamicznie wiązać atrybuty przez v-bind oraz nasłuchiwać zdarzeń DOM za pomocą v-on.

Dyrektywy: v-if, v-for, v-bind, v-on to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Czym są dyrektywy Vue?

Dyrektywy to specjalne atrybuty z prefiksem v-, które informują Vue, aby wykonało określone działanie na elemencie DOM. Są obliczane jako wyrażenia JavaScript i reagują na zmiany danych reaktywnych.

v-if, v-else-if, v-else

v-if warunkowo renderuje element na podstawie wyrażenia, którego wartość jest prawdziwa. Gdy warunek jest fałszywy, element jest całkowicie usuwany z DOM-u. v-else zapewnia wariant alternatywny.

<div v-if="isLoggedIn">
  <UserDashboard />
</div>
<div v-else-if="isLoading">
  <Spinner />
</div>
<div v-else>
  <LoginForm />
</div>

v-show — przełączanie widoczności

v-show przełącza CSS-ową właściwość display: none, zamiast dodawać element do DOM-u i usuwać go z niego. Proszę używać v-show, gdy widoczność elementu często się zmienia, a v-if, gdy warunek rzadko się zmienia.

<!-- Good for frequently toggling: -->
<div v-show="isDropdownOpen">...</div>

<!-- Good for rarely changing: -->
<div v-if="userHasPremium">...</div>

v-for — renderowanie list

v-for="item in items" renderuje element dla każdego elementu listy. Proszę zawsze dołączać :key, aby aktualizacje były stabilne.

<ul>
  <li v-for="user in users" :key="user.id">
    {{ user.name }} — {{ user.email }}
  </li>
</ul>

<!-- With index: -->
<li v-for="(item, index) in items" :key="item.id">
  {{ index + 1 }}. {{ item.title }}
</li>

v-for z obiektem

Proszę iterować po wartościach obiektu lub parach klucz-wartość.

<dl>
  <template v-for="(value, key) in user" :key="key">
    <dt>{{ key }}</dt>
    <dd>{{ value }}</dd>
  </template>
</dl>

v-bind — wiązanie atrybutów

v-bind:attr lub skrócona forma :attr dynamicznie wiąże atrybut HTML z wartością reaktywną.

<img :src="user.avatar" :alt="user.name">
<a :href="getLink(post.id)">{{ post.title }}</a>
<button :disabled="isLoading" :class="{ active: isActive }">Save</button>

Składnia obiektowa v-bind

Proszę wiązać wiele atrybutów jednocześnie za pomocą obiektu.

<input v-bind="{
  type: 'email',
  placeholder: 'Enter email',
  disabled: isSubmitting
}">

Wiązanie klas: :class

Proszę warunkowo wiązać klasy CSS za pomocą obiektu (klucz = nazwa klasy, wartość = warunek) lub tablicy.

<div :class="{ 'is-active': isActive, 'has-error': hasError }">...</div>

<!-- Array syntax: -->
<div :class="[baseClass, isActive ? 'active' : '']">

<!-- Dynamic in script setup: -->
:class="{ card: true, [variantClass]: true }"

Wiązanie stylów: :style

Proszę wiązać style inline za pomocą obiektu w notacji camelCase.

<div :style="{ backgroundColor: brandColor, padding: spacing + 'px' }">

v-on — nasłuchiwanie zdarzeń

v-on:event lub skrócona forma @event dołącza procedury obsługi zdarzeń.

<button @click="handleClick">Click Me</button>
<input @input="value = $event.target.value">
<form @submit.prevent="handleSubmit">...</form>

Modyfikatory zdarzeń

Vue udostępnia wbudowane modyfikatory zdarzeń: .prevent (preventDefault), .stop (stopPropagation), .once (wywołanie raz), .self (tylko gdy element jest celem zdarzenia), .passive (poprawia wydajność przewijania).

<form @submit.prevent="submit">
<button @click.stop="selectItem">
<div @click.self="closeModal">
<div @scroll.passive="onScroll">

Szybkie sprawdzenie

Kiedy należy użyć v-show zamiast v-if?

Podsumowanie: dyrektywy Vue

v-if dodaje element do DOM-u i usuwa go z niego. v-show przełącza właściwość display. v-for renderuje listy (zawsze używaj :key). v-bind (:) wiąże atrybuty, :class i :style. v-on (@) dołącza procedury obsługi zdarzeń. Modyfikatory zdarzeń .prevent, .stop i .once. v-model służy do dwukierunkowego wiązania (łączy v-bind:value i v-on:input).

Często zadawane pytania

Czy lekcja „Dyrektywy: v-if, v-for, v-bind, v-on” jest bezpłatna?

Tak — pełny tekst „Dyrektywy: v-if, v-for, v-bind, v-on” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Dyrektywy: v-if, v-for, v-bind, v-on”?

Proszę renderować warunkowo za pomocą v-if i v-show, iterować za pomocą v-for, dynamicznie wiązać atrybuty przez v-bind oraz nasłuchiwać zdarzeń DOM za pomocą v-on. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Dyrektywy: v-if, v-for, v-bind, v-on”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Frontend Academy