Vue Academy · Ders

Öznitelik ve Class Bağlamaları

Öznitelikleri, class'ları ve stilleri dinamik olarak bağlayın.

Öznitelik ve Class Bağlamaları, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 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, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 3 dersten oluşur.

Sınıfları ve Stilleri Bağlama

Yaygın bir gereksinim, bir öğenin sınıfını veya stilini duruma göre değiştirmektir.

Vue, yalnızca dizeler yerine nesneleri ve dizileri geçirebilmeniz için :class ve :style ifadelerine özel destek sunar.

:class Nesne Söz Dizimi

:class ifadesine bir nesne geçirin. Anahtarlar sınıf adlarıdır; doğru olarak değerlendirilen değerler bu sınıfları içerir.

<div :class="{ active: isActive, disabled: isDisabled }">
  Status box
</div>

<!-- if isActive is true, the "active"
     class is applied -->

Statik ve Dinamik Sınıfları Birleştirme

Statik bir class özniteliği ile dinamik bir :class birlikte birleştirilir.

<div class="card" :class="{ highlighted: isSelected }">
  Always has "card";
  adds "highlighted" when selected.
</div>

:class Dizi Söz Dizimi

Bir sınıf listesini uygulamak için bir dizi geçirin.

<div :class="[baseClass, themeClass]">Box</div>

<!-- data:
     baseClass = "panel"
     themeClass = "dark" -->

Dizi İçindeki Koşullar

Dizi içinde koşullu ifadeleri birleştirebilirsiniz.

<div :class="[isActive ? 'active' : '', errorClass]">
  ...
</div>

<!-- or nest an object inside the array -->
<div :class="[baseClass, { active: isActive }]">
  ...
</div>

Satır İçi Stilleri Bağlama

:style yönergesi, bir nesne kullanarak satır içi stilleri bağlar.

fontSize gibi camelCase özellik adlarını kullanın.

<p :style="{ color: textColor, fontSize: size + 'px' }">
  Styled text
</p>

<!-- data: textColor = "red", size = 18 -->

Diziyle :style

Bir stil nesneleri dizisi aktarabilirsiniz; Vue bunları birleştirir.

<div :style="[baseStyles, overrideStyles]">
  Merged styles
</div>

Otomatik Ön Ek Ekleme

Bir CSS özelliğinin sağlayıcı ön eklerine ihtiyacı olduğunda Vue, tarayıcının desteklediği durumlarda bunları otomatik olarak ekleyebilir.

Standart özelliği yazarsınız
Gerekirse Vue doğru ön eki uygular

Bu, stil bağlamalarınızı temiz tutar.

Dinamik Öznitelik Bağlama

Herhangi bir öznitelik :attr ile dinamik olarak bağlanabilir.

<img :src="photoUrl" :alt="photoCaption" />
<input :placeholder="hintText" :maxlength="limit" />
<a :href="link" :target="openInNewTab ? '_blank' : '_self'">Go</a>

Boole Öznitelikleri

disabled gibi boole özniteliklerinde Vue, özniteliği yalnızca değer doğru kabul edildiğinde ekler.

<button :disabled="isSubmitting">Submit</button>

<!-- if isSubmitting is false,
     the disabled attribute is removed -->

Birden Çok Sınıfı Koşullu Olarak Bağlama

Birden çok sınıfı aynı anda açıp kapatan pratik bir örnek.

<li
  class="todo"
  :class="{
    done: task.completed,
    overdue: task.isLate,
    priority: task.urgent
  }"
>
  {{ task.title }}
</li>

Hızlı Kontrol

Sınıf ve stil bağlamaları hakkındaki anlayışınızı sınayın.

Özet: Öznitelik ve Sınıf Bağlamaları

Dinamik bağlamaları öğrendiniz:

:class nesne söz dizimi, doğru kabul edilen değere göre sınıfları açıp kapatır
:class dizi söz dizimi, bir liste uygular
:style, camelCase anahtarlarıyla satır içi stilleri bağlar
Herhangi bir öznitelik :attr ile bağlanabilir
Boole öznitelikleri yalnızca değer doğru kabul edildiğinde görünür

Sırada: component temelleri ve iletişim.

Sıkça Sorulan Sorular

“Öznitelik ve Class Bağlamaları” dersi ücretsiz mi?

Evet — “Öznitelik ve Class Bağlamaları” 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 Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 3 dersten oluşur.

“Öznitelik ve Class Bağlamaları” dersinde ne öğreneceğim?

Öznitelikleri, class'ları ve stilleri dinamik olarak bağlayın. Vue 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.

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

Önceden deneyim gerekmez. CoddyKit'te Vue 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, 3 dersinin 3. dersidir.

“Öznitelik ve Class Bağlamaları” 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 Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue 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

← Vue Academy Sayfasına Dön