Frontend Academy · Ders

Yönergeler: v-if v-for v-bind v-on

v-if ve v-show ile koşullu oluşturma yapın, v-for ile döngü kurun, öznitelikleri v-bind ile dinamik olarak bağlayın ve DOM olaylarını v-on ile dinleyin.

Yönergeler: v-if v-for v-bind v-on, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Vue Yönergeleri Nedir?

Yönergeler, Vue'ya bir DOM öğesi üzerinde bir işlem yapmasını söyleyen ve v- ön ekiyle başlayan özel özniteliklerdir. JavaScript ifadeleri olarak değerlendirilir ve reaktif veri değişikliklerine tepki verirler.

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

v-if, bir öğeyi doğruluk değeri doğru olan bir ifadeye göre koşullu olarak oluşturur. İfade yanlış olduğunda öğe DOM'dan tamamen kaldırılır. v-else yedek durumu sağlar.

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

v-show — Görünürlük Değiştirme

v-show, DOM'a eklemek veya DOM'dan kaldırmak yerine CSS display: none değerini değiştirir. Öğe sık sık görünürlük değiştiriyorsa v-show, koşul nadiren değişiyorsa v-if kullanın.

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

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

v-for — Listeleri Oluşturma

v-for="item in items", öğeyi her item için oluşturur. Kararlı güncellemeler için her zaman :key ekleyin.

<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>

Nesneyle v-for

Bir nesnenin değerleri veya anahtar-değer çiftleri üzerinde yineleme yapın.

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

v-bind — Öznitelikleri Bağlama

v-bind:attr veya kısa biçimi olan :attr, bir HTML özniteliğini dinamik olarak reaktif bir değere bağlar.

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

v-bind Nesne Sözdizimi

Bir nesne kullanarak aynı anda birden fazla öznitelik bağlayın.

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

Sınıf Bağlama: :class

CSS sınıflarını bir nesneyle (anahtar = sınıf adı, değer = koşul) veya bir diziyle koşullu olarak bağlayın.

<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 }"

Stil Bağlama: :style

Satır içi stilleri camelCase biçimindeki bir nesneyle bağlayın.

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

v-on — Olayları Dinleme

v-on:event veya kısa biçimi olan @event, olay dinleyicileri ekler.

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

Olay Değiştiricileri

Vue, yerleşik olay değiştiricileri sağlar: .prevent (preventDefault), .stop (stopPropagation), .once (bir kez çalışır), .self (yalnızca hedef öğenin kendisi olduğunda) ve .passive (kaydırma performansını iyileştirir).

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

Hızlı Kontrol

v-if yerine ne zaman v-show kullanmalısınız?

Vue Yönergeleri Özeti

v-if, DOM'a ekler veya DOM'dan kaldırır. v-show, görünürlüğü değiştirir. v-for listeleri oluşturur (her zaman :key kullanın). v-bind (:), öznitelikleri; :class ve :style ise sınıfları ve stilleri bağlar. v-on (@), olay dinleyicileri ekler. Olay değiştiricileri: .prevent, .stop, .once. v-model, çift yönlü bağlama sağlar (v-bind:value ile v-on:input birleşimidir).

Sıkça Sorulan Sorular

“Yönergeler: v-if v-for v-bind v-on” dersi ücretsiz mi?

Evet — “Yönergeler: v-if v-for v-bind v-on” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Yönergeler: v-if v-for v-bind v-on” dersinde ne öğreneceğim?

v-if ve v-show ile koşullu oluşturma yapın, v-for ile döngü kurun, öznitelikleri v-bind ile dinamik olarak bağlayın ve DOM olaylarını v-on ile dinleyin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Yönergeler: v-if v-for v-bind v-on” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Frontend Academy Sayfasına Dön