Vue Academy · Ders

v-bind ile Dinamik ve Çoklu Bağlamalar

Dinamik özellik adları :[dynamicAttr], v-bind nesne söz dizimi, birden çok özelliği aynı anda bağlama.

v-bind ile Dinamik ve Çoklu Bağlamalar, CoddyKit'te ücretsiz bir Vue 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, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Öznitelikleri Dinamik Olarak Bağlama

v-bind yönergesi (kısa biçimi :), bir HTML özniteliğini reaktif bir değere bağlar. Dinamik sınıfları, stilleri ve hatta dinamik olarak adlandırılmış öznitelikleri mümkün kılar.

Temel v-bind

Herhangi bir özniteliği bir ifadeye bağlayın. Değer değiştiğinde Vue özniteliği günceller.

<img :src="imageUrl" :alt="description" />

Sınıf Bağlama: Nesne Sözdizimi

Sınıflar için nesne sözdizimi, bir sınıfı doğruluk değerine göre açıp kapatır. Anahtar sınıf adıdır; değer, sınıfın uygulanıp uygulanmayacağını belirler.

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

Sınıf Bağlama: Dizi Sözdizimi

Dizi sözdizimi, bir sınıf listesi uygular. Durağan dizeleri ve reaktif değişkenleri birleştirebilir veya koşullu girdiler için bir nesneyi iç içe yerleştirebilirsiniz.

<div :class="[baseClass, isActive ? activeClass : '']"></div>

Dizi ve Nesneyi Birleştirme

Her iki yaklaşımın avantajından yararlanmak için nesne biçimini dizinin içine yerleştirebilirsiniz — her zaman etkin sınıflar ile koşullu sınıfları birlikte kullanabilirsiniz.

<div :class="[baseClass, { active: isActive }]"></div>

Stil Bağlama: Nesne Sözdizimi

Satır içi stilleri bir nesneyle bağlayın. camelCase özellik adlarını (veya tırnak içinde tireli yazımı) kullanın. Değerler reaktif olabilir.

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

Stil Bağlama: Nesne Dizisi

Temel stil ve tema üzerine yazması gibi birden çok stil kaynağını birleştirmek için stil nesnelerinden oluşan bir dizi aktarın.

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

Birçok Özniteliği Aynı Anda Bağlama

v-bind bir bağımsız değişken olmadan kullanıldığında, özniteliklerden oluşan bir nesnenin tamamını öğeye yayar. Her anahtar bir öznitelik olur.

<script setup>
const attrs = { id: 'main', class: 'box', 'data-role': 'panel' }
</script>

<template>
  <div v-bind="attrs"></div>
</template>

Dinamik Öznitelik Adları

Çalışma zamanında öznitelik adının kendisini hesaplamak için köşeli parantezleri kullanın. Parantez içindeki ifade değerlendirilir ve öznitelik anahtarı olarak kullanılır.

<script setup>
const attrName = 'title'
const attrValue = 'Hello'
</script>

<template>
  <div :[attrName]="attrValue"></div>
</template>

Her Birini Ne Zaman Kullanmalı

Nesne sınıfı sözdizimi — koşula göre birkaç sınıfı açıp kapatmak için.
Dizi sınıfı sözdizimi — bir temel sınıfı koşullu sınıflarla birleştirmek için.
v-bind="obj" — bir öznitelik kümesinin tamamını iletmek için.
Dinamik ad :[name] — öznitelik anahtarına çalışma zamanında karar verildiğinde.

Birleşik Bir Örnek

Bu öğe dinamik sınıfı, dinamik stili ve yayılmış öznitelikleri birlikte kullanır — hepsi reaktiftir.

<div
  :class="[base, { active: isActive }]"
  :style="{ color: textColor }"
  v-bind="extraAttrs"
></div>

Hızlı Kontrol

v-bind bilginizi sınayın.

Özet

v-bind'in kapsamını öğrendiniz:

Nesne sınıfı sözdizimi sınıfları koşula göre açıp kapatır; dizi sözdizimi bunları birleştirir.
Stil bağlama, nesneleri (camelCase) veya nesne dizilerini kullanır.
v-bind="obj" bir nesnedeki tüm öznitelikleri yayar.
:[name]="val" dinamik olarak adlandırılmış bir özniteliği bağlar.

Sıkça Sorulan Sorular

“v-bind ile Dinamik ve Çoklu Bağlamalar” dersi ücretsiz mi?

Evet — “v-bind ile Dinamik ve Çoklu 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 4 dersten oluşur.

“v-bind ile Dinamik ve Çoklu Bağlamalar” dersinde ne öğreneceğim?

Dinamik özellik adları :[dynamicAttr], v-bind nesne söz dizimi, birden çok özelliği aynı anda bağlama. 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, 4 dersinin 3. dersidir.

“v-bind ile Dinamik ve Çoklu 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