crazy_coder
Moderatör
- Katılım
- 20 Şub 2026
- Mesajlar
- 204
- Tepkime puanı
- 0
- Puanları
- 16
1. Vue.js Nedir?
Vue.js, kullanıcı arayüzleri (UI) oluşturmak için kullanılan ilerlemeci (progressive) bir framework'tür. İlerlemeci denmesinin sebebi, Vue'yu projenizin sadece küçük bir kısmında (örneğin sadece bir form kontrolünde) kullanabileceğiniz gibi, devasa tek sayfalık uygulamalar (SPA) inşa etmek için de kullanabilmenizdir.
Temel Felsefesi:
HTML dostu: Standart HTML, CSS ve JavaScript bilginizle anında başlayabilirsiniz.
Reaktiflik (Reactivity): Siz JavaScript tarafında bir veriyi değiştirdiğinizde, Vue bunu anında fark eder ve ekrandaki ilgili kısmı otomatik günceller.
Hafiflik: Boyutu oldukça küçüktür ve yüksek performans sunar.
2. Temel Yapı: Declarative Rendering
Vue, veriyi DOM'a (ekrana) bağlamak için çift süslü parantez {{ }} (Mustache) yöntemini kullanır.
HTML:
<div id="app">
<h1>{{ mesaj }}</h1>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
mesaj: 'Vue.js dünyasına hoş geldiniz!'
}
}
}).mount('#app');
</script>3. Vue Direktifleri (v-directives)
Vue'yu asıl güçlü kılan şey, HTML etiketlerine eklediğimiz "v-" ile başlayan özel özelliklerdir.
v-if: Bir koşul doğruysa elementi gösterir, değilse DOM'dan kaldırır.
v-for: Bir dizi (array) içindeki verileri listelemek için kullanılır.
v-model: Form elemanları (input, textarea) ile JavaScript verisi arasında çift yönlü bağ (two-way binding) kurar.
v-on (@): Tıklama veya tuş basımı gibi olayları dinler.
JavaScript:
// v-model ve v-on örneği
createApp({
data() {
return {
kullaniciAdi: ''
}
},
methods: {
selamla() {
alert("Merhaba " + this.kullaniciAdi);
}
}
}).mount('#app');4. Bileşen Sistemi (Component System)
React gibi Vue da bileşen tabanlıdır. Her bileşen kendi HTML (template), JavaScript (script) ve stil (style) kodunu barındırır. Genellikle bu üçü .vue uzantılı dosyalarda toplanır (Single File Components).
Vue.js vs. React.js
| Özellik | Vue.js | React.js |
|---|---|---|
| Öğrenme Eğrisi | Çok Hızlı (HTML temelli) | Orta (JSX ve JS ağırlıklı) |
| Veri Bağlama | Çift Yönlü (v-model) | Tek Yönlü (State-Props) |
| Esneklik | Kuralcı ama çok esnek | Tamamen özgür (Kütüphane ağırlıklı) |
Sonuç
Vue.js, "kod yazarken yorulmamak" isteyen geliştiriciler için mükemmel bir tercihtir. Harika dökümantasyonu ve sezgisel yapısı sayesinde, bir projeyi hayata geçirme süreniz kısalır. İster küçük bir script, ister büyük bir kurumsal uygulama; Vue size her adımda yardımcı olur.