Direktifler
Vue.js’de direktifler, DOM elemanlarına reaktif davranış kazandıran özel atributelardır ve v- ile başlarlar. Direktifler, kullanıcı arayüzünü dinamik ve etkileşimli hale getirmek için kullanılır ve geliştiricilerin DOM’u manuel olarak manipüle etmesine gerek bırakmadan veri ile UI arasında köprü kurar. Temel direktifler arasında v-if, v-for, v-model ve v-on bulunur. Bu direktifler, koşullu render, listeleme, iki yönlü veri bağlama ve olay yönetimi gibi işlevleri sağlar.
Direktifleri doğru kullanmak, Vue.js uygulamalarında performans optimizasyonu ve hata yönetimi açısından kritiktir. Örneğin, v-if ile DOM elemanlarını koşullu olarak render etmek veya v-for ile listeleri verimli şekilde döngülemek, uygulamanın hızını ve bakımını doğrudan etkiler. Bu tutorialde, hem yerleşik direktifler hem de özel direktifler incelenecek, veri yapıları, algoritmalar ve OOP prensipleriyle nasıl entegre edileceği gösterilecektir. Öğrenenler, direktifleri etkin şekilde kullanarak komponent tabanlı mimarilerde yüksek kaliteli, sürdürülebilir ve reaktif uygulamalar geliştirmeyi öğrenecekler.
Temel Örnek <template>
text<div>
<h1 v-if="baslikGoster">Vue.js Direktiflerine Hoşgeldiniz</h1>
<ul>
<li v-for="item in itemler" :key="item.id">{{ item.isim }}</li>
</ul>
<input v-model="yeniItem" placeholder="Yeni öğe ekle" />
<button @click="ekleItem">Ekle</button>
</div>
</template>
<script>
export default {
data() {
return {
baslikGoster: true,
yeniItem: '',
itemler: [
{ id: 1, isim: 'Öğe 1' },
{ id: 2, isim: 'Öğe 2' }
]
};
},
methods: {
ekleItem() {
if (this.yeniItem.trim() !== '') {
this.itemler.push({ id: this.itemler.length + 1, isim: this.yeniItem });
this.yeniItem = '';
}
}
}
};
</script>Bu temel örnekte, v-if direktifi başlığın görünürlüğünü kontrol ederken, v-for direktifi itemler array’ini döngüleyerek her öğeyi li elementi olarak DOM’a ekler. :key kullanımı, sanal DOM’un verimli güncellenmesini sağlar. v-model direktifi, input ile veri arasında iki yönlü bağ kurarak kullanıcı girişini anlık olarak senkronize eder. ekleItem metodu, kullanıcı girişini doğrular, array’e ekler ve input alanını temizler. Bu yapı, direktiflerin veri ile UI arasındaki reaktiviteyi nasıl sağladığını ve Vue.js best-practice’lerini açıkça gösterir.
Pratik Örnek <template>
text<div>
<h2 v-show="gorevGoster">Görev Listesi</h2>
<ul>
<li v-for="gorev in gorevler" :key="gorev.id">
<input type="checkbox" v-model="gorev.tamamlandi" /> {{ gorev.isim }}
<button @click="silGorev(gorev.id)">Sil</button>
</li>
</ul>
<input v-model="yeniGorev" placeholder="Yeni görev ekle" />
<button @click="ekleGorev">Ekle</button>
</div>
</template>
<script>
export default {
data() {
return {
gorevGoster: true,
yeniGorev: '',
gorevler: [
{ id: 1, isim: 'Kodu İncele', tamamlandi: false },
{ id: 2, isim: 'Dokümantasyon Yaz', tamamlandi: true }
]
};
},
methods: {
ekleGorev() {
const isim = this.yeniGorev.trim();
if (isim) {
this.gorevler.push({ id: Date.now(), isim, tamamlandi: false });
this.yeniGorev = '';
}
},
silGorev(id) {
this.gorevler = this.gorevler.filter(g => g.id !== id);
}
}
};
</script>Pratik örnekte, v-show direktifi başlığın görünürlüğünü CSS ile kontrol eder, DOM’dan kaldırmaz; bu, sık değişen içeriklerde performansı artırır. v-for döngüsü, array’i iterasyona sokar ve :key ile DOM optimizasyonu sağlanır. v-model, checkbox’lar ile gorev.tamamlandi özelliğini bağlayarak reaktif davranış sağlar. ekleGorev ve silGorev metodları, listeyi güvenli şekilde günceller. Bu örnek, algoritmalar ve OOP prensipleriyle entegre edilmiş, performans ve hata yönetimi açısından iyi uygulamaları gösterir.
En iyi uygulamalar, v-for ile :key kullanımı, computed properties ile karmaşık hesaplamaların yapılması ve DOM manipülasyonunu minimize etmeyi içerir. Yaygın hatalar; gereksiz v-if/v-show kullanımı, büyük listelerde verimsiz iterasyon ve eksik event handler’lerdir. Vue DevTools ile debugging ve performans analizi yapılabilir. Güvenlik açısından v-html ile dış veri kullanımı XSS riskini artırabilir. Performans optimizasyonu için DOM güncellemelerini seçici yapmak, computed ve watchers kullanımını optimize etmek gerekir.
📊 Referans Tablosu
| Vue.js Element/Concept | Description | Usage Example |
|---|---|---|
| v-if | Koşullu render | <div v-if="baslikGoster">Göster</div> |
| v-show | DOM’dan kaldırmadan görünürlük | <div v-show="baslikGoster">Göster</div> |
| v-for | Array veya object iterasyonu | <li v-for="item in itemler" :key="item.id">{{ item.isim }}</li> |
| v-model | İki yönlü veri bağlama | <input v-model="yeniItem" /> |
| v-on | Olay bağlama | <button @click="ekleItem">Ekle</button> |
| Özel Direktifler | Tekrarlayan DOM mantığını kapsülleme | Vue.directive('focus', { inserted: el => el.focus() }) |
Direktifleri iyi öğrenmek, reaktif ve etkileşimli arayüzler oluşturmanın temelidir. Yerleşik direktifler çoğu senaryoyu kapsarken, özel direktifler karmaşık mantığı kapsülleyip yeniden kullanılabilir hale getirir. Bu bilgi ile Vuex, dinamik komponentler ve performans optimizasyonu gibi ileri konulara geçmek mümkündür. Pratik uygulamalar, bilgiyi pekiştirir ve yazılım mimarisini güçlendirir. Resmi dokümantasyon ve topluluk kaynakları ek öğrenim için faydalıdır.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek