Vue.js — Frontend Kütüphaneler Rehberi

Özellikler

Temel Özellikler

Reactivity System

Proxy tabanlı reaktif veri sistemi ile değişiklikler anında arayüze yansır.

İki Yönlü Veri Bağlama

v-model direktifi ile form elemanları ve veri arasında kolay iki yönlü bağlama.

Computed Properties

Önbelleğe alınmış, sadece bağımlılıkları değiştiğinde yeniden hesaplanan değerler.

Şablon Sözdizimi

Sezgisel direktifler (v-if, v-for, v-bind) ile hızlı geliştirme imkanı.

Composition API

Fonksiyon tabanlı bileşen mantığı ile daha iyi kod organizasyonu ve tekrar kullanılabilirlik.

Aşamalı Çerçeve

İhtiyacınız olduğu kadar kullanın: Basit bir script eklentisinden tam teşekküllü bir SPA'ya kadar.

Değerlendirme

Avantajlar ve Dezavantajlar

✅ Avantajlar

Hafif öğrenme eğrisi
Mükemmel dokümantasyon
İki yönlü veri bağlama
Şablon sözdizimi
Aşamalı benimseme
Güçlü TypeScript desteği

❌ Dezavantajlar

React'e göre daha küçük ekosistem
Daha az iş ilanı
Daha az kurumsal destek (Google/Facebook gibi devlerin arkasında olmaması)
Topluluk bölünmesi (Options API vs Composition API)

Canlı Örnekler

İnteraktif Demolar

1. İki Yönlü Veri Bağlama (v-model)

Form elemanları ile reaktif durum arasında iki yönlü bağlama sağlayan v-model örneği.

Metin Girişi:

Çoklu Satır:

Onay Kutusu ({{ checked }})

Seçenekler:
A B

Seçim Kutusu:

Çıktı Sonuçları:

Metin: {{ text }}

Mesaj: {{ message }}

Onay Durumu: {{ checked ? 'Onaylandı' : 'Bekliyor' }}

Seçilen Radyo: {{ picked }}

Seçilen Meyve: {{ selected }}

<div id="app">
  <input v-model="text" placeholder="Bir şeyler yazın...">
  <p>Metin: {{ text }}</p>

  <input type="checkbox" v-model="checked">
  <p>Onay Durumu: {{ checked }}</p>

  <select v-model="selected">
    <option>Elma</option>
    <option>Muz</option>
  </select>
  <p>Seçilen: {{ selected }}</p>
</div>

<script>
  const { createApp, ref } = Vue;
  
  createApp({
    setup() {
      const text = ref('');
      const checked = ref(false);
      const selected = ref('');
      
      return { text, checked, selected };
    }
  }).mount('#app');
</script>

2. Computed Properties ve Watchers

Alışveriş sepeti toplamını otomatik hesaplayan (computed) ve limit aşıldığında uyarı veren (watcher) yapı.

Ürünler

{{ item.name }} - {{ item.price }}₺

Sepetiniz (Limit: 500₺)

{{ item.name }} - {{ item.price }}₺

Sepetiniz boş.

Toplam: {{ totalPrice }}₺

const { createApp, ref, computed, watch } = Vue;

createApp({
  setup() {
    const products = ref([
      { id: 1, name: 'Klavye', price: 150 },
      { id: 2, name: 'Fare', price: 80 },
      { id: 3, name: 'Monitör', price: 400 }
    ]);
    const cart = ref([]);
    const warning = ref('');

    const addToCart = (product) => cart.value.push(product);
    const removeFromCart = (index) => cart.value.splice(index, 1);

    // Otomatik hesaplanan toplam (Computed)
    const totalPrice = computed(() => {
      return cart.value.reduce((sum, item) => sum + item.price, 0);
    });

    // Toplam tutarı izleyen yapı (Watcher)
    watch(totalPrice, (newTotal) => {
      if (newTotal > 500) {
        warning.value = 'Uyarı: Sepet tutarı 500₺ limitini aştı!';
      } else {
        warning.value = '';
      }
    });

    return { products, cart, warning, addToCart, removeFromCart, totalPrice };
  }
}).mount('#app2');

3. Animasyonlu Dinamik Listeler

v-for ve <transition-group> kullanarak eleman ekleme/çıkarma animasyonları.

{{ item }} ×

<style>
  .list-enter-active, .list-leave-active { transition: all 0.5s ease; }
  .list-enter-from, .list-leave-to { opacity: 0; transform: translateY(30px); }
  .list-item { display: inline-block; margin-right: 10px; padding: 5px 10px; }
</style>

<div id="app">
  <input v-model="newItem" @keyup.enter="addItem">
  <button @click="addItem">Ekle</button>
  
  <transition-group name="list" tag="div">
    <span v-for="(item, index) in items" :key="item" class="list-item">
      {{ item }} <span @click="removeItem(index)">×</span>
    </span>
  </transition-group>
</div>

4. Bileşen İletişimi (Props & Events)

Ebeveyn bileşenin çocuğa "prop" ile veri göndermesi ve çocuğun "event" ile değişiklikleri haber vermesi.

Ebeveyn Bileşen (Parent)

Şu anki renk: {{ activeColor }}

const app = Vue.createApp({
  setup() {
    const activeColor = Vue.ref('#42b883');
    
    // Alt bileşenden gelen olayı (event) dinleyen metod
    const handleColorChange = (newColor) => {
      activeColor.value = newColor;
    };
    
    return { activeColor, handleColorChange };
  }
});

// Alt Bileşen (Child) Tanımlaması
app.component('color-picker', {
  props: ['initialColor'],
  emits: ['color-change'],
  setup(props, { emit }) {
    const localColor = Vue.ref(props.initialColor);
    
    const updateColor = () => {
      // Ebeveyne değişikliği bildir
      emit('color-change', localColor.value);
    };
    
    return { localColor, updateColor };
  },
  template: `
    <div>
      <h4 style="margin-top: 0;">Alt Bileşen (Child)</h4>
      <label>Renk Seçin: </label>
      <input type="color" v-model="localColor" @input="updateColor" style="vertical-align: middle; cursor: pointer;">
    </div>
  `
});

app.mount('#app4');

Kullanım Alanları

Kullanım Senaryoları

Hızlı Prototipleme

HTML şablonlarına kolayca entegre edilebildiği için çok hızlı bir şekilde çalışan prototipler oluşturulabilir.

Yönetici Panelleri (Admin Dashboards)

Reaktif veri yönetimi ve bileşen mimarisi sayesinde karmaşık yönetici panelleri verimli bir şekilde geliştirilebilir.

İçerik Yönetim Sistemleri (CMS)

İki yönlü veri bağlama özelliği, form ağırlıklı CMS uygulamalarında büyük kolaylık sağlar.

Mevcut Projelere Kısmi Entegrasyon

Tüm projeyi baştan yazmak yerine, sadece belirli sayfalarda veya widget'larda (hibrit kullanım) rahatlıkla kullanılabilir.