- Katılım
- 7 Nis 2025
- Konular
- 367
- Mesajlar
- 780
- Çözümler
- 1
- Tepkime puanı
- 121
- Puan
- 93
- Konum
- İstanbul
- Web sitesi
- forumagel.com
Hazır Kod Bankası - Konu 27: JavaScript Frontend Frameworklerine Giriş (Vue.js Temelleri)
Hazır Kod Bankası Serimizin Yirmi Yedinci Konusu: Vue.js ile Frontend Frameworklere Giriş!
Merhaba arkadaşlar! Web'in temel dilleri olan HTML, CSS ve JavaScript'i gördük. JavaScript ile DOM manipülasyonu yaparak (Konu 8) ve API'lerden veri çekip sayfayı güncelleyerek (Konu 25) dinamizm kattık. Ancak daha karmaşık web uygulamaları (sosyal medya akışları, yönetim panelleri, e-ticaret siteleri gibi) geliştirmek, sadece bu temel yöntemlerle oldukça zahmetli ve kodun yönetimini zorlaştıran bir hal alabilir.
İşte bu noktada JavaScript Frontend Frameworkleri (veya kütüphaneleri) devreye girer. React, Vue, Angular gibi frameworkler, büyük ve dinamik kullanıcı arayüzlerini (UI) daha düzenli, yönetilebilir ve etkili bir şekilde geliştirmemizi sağlarlar. Bu frameworkler genellikle şu faydaları sunar:
- Bileşen Tabanlı (Component-Based) Yaklaşım: UI'ı yeniden kullanılabilir küçük parçalara (buton, form alanı, ürün kartı gibi) bölmenizi sağlar.
- Veri Yönetimi ve Reaktivite: JavaScript veriniz (state) değiştiğinde, framework otomatik olarak ilgili HTML kısımlarını günceller (manuel DOM manipülasyonu derdini azaltır).
- Etkin UI Güncellemeleri: Sadece değişen kısımları güncelleyerek performansı artırır (Sanal DOM gibi mekanizmalarla).
- Standart Yapılar: Projelerinizi organize etmek için belirli yapılar ve yöntemler sunar.
2. Vue.js'e Başlarken (CDN Kullanımı)[/B]
Vue.js'i denemenin ve öğrenmeye başlamanın en basit yolu, bir HTML dosyasına CDN (Content Delivery Network) linki ile doğrudan eklemektir. Bu, kurulum gerektirmez ve hemen kodlamaya başlamanızı sağlar.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js Temelleri</title>
{# Vue 3 CDN linki #}
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
{# Vue uygulamasının bağlanacağı (mount olacağı) HTML elementi #}
{# Genellikle id="app" kullanılır #}
<div id="app">
{# Vue tarafından yönetilecek HTML içeriği buraya gelir #}
<p>{{ message }}</p> {# Vue data'sındaki 'message' buraya bağlanacak #}
</div>
[B]<script>[/B]
// JavaScript kodlarımız buraya gelecek
// Vue uygulaması objesini oluşturup mount edeceğiz
[B]</script>[/B]
</body>
</html>3. Vue Uygulama Örneği (App Instance) ve Veri Yönetimi[/B]
Vue.js'in kontrol edeceği HTML elementini belirttikten sonra, JavaScript tarafında bir Vue uygulaması örneği (app instance) oluşturup bu elemente bağlamanız (mount etmeniz) gerekir. Uygulamanın reaktif verileri (yani değiştiğinde UI'ı etkileyecek veriler) `data()` fonksiyonu içinde tanımlanır.
JavaScript:
const app = Vue.createApp({ // Yeni bir Vue uygulaması objesi oluştur
// Uygulamanın reaktif verilerini tanımlayan fonksiyon
data() {
return { // Bir obje döndürülür
message: 'Merhaba Vue.js!', // Bu veri HTML şablonunda kullanılabilir
sayac: 0,
goster: true,
urunler: ['Laptop', 'Klavye', 'Fare'] // Bir liste de olabilir
}
},
// Uygulamanın metotlarını (fonksiyonlarını) tanımlayan obje
methods: {
sayaciArtir() {
this.sayac++; // 'this' keyword'ü data objesini temsil eder
},
mesajiDegistir(yeniMesaj) {
this.message = yeniMesaj;
}
// Diğer metotlar buraya eklenebilir
}
// Computed properties, watchers gibi diğer seçenekler de buraya eklenebilir (İleri konular)
});
// Oluşturulan Vue uygulamasını HTML'deki id='app' elementine bağla (mount et)
app.mount('#app');
// Artık #app içindeki HTML, bu Vue objesinin kontrolündedir4. Veri Bağlama (Data Binding) ve Direktifler (Directives)[/B]
Vue'da veri bağlama (data binding), JavaScript objesindeki veriyi HTML şablondaki UI ile senkronize etmektir. Veri değiştiğinde UI otomatik güncellenir. Vue'da özel HTML özellikleri olarak kullanılan "direktifler" (directives) (genellikle `v-` ön ekli) bu veri bağlamayı ve UI manipülasyonunu sağlar.
- Metin Bağlama: Veriyi HTML içeriğine göstermek için çift süslü parantez `{{ }}` kullanılır.
HTML:<div id="app"> <p>{{ message }}</p> {# data'daki message değeri burada görünür #} <p>Sayaç Değeri: {{ sayac }}</p> {# data'daki sayac değeri burada görünür #} </div> {# İlgili Vue JS kodu yukarıdaki data ve mount kısmı ile aynı #} - Özellik Bağlama (`v-bind` veya `:`): HTML elementlerinin özelliklerine (attribute - `src`, `href`, `class`, `id` vb.) JavaScript verisini bağlamak için `v-bind:` direktifi veya kısaltması `:` kullanılır.
HTML:<div id="app"> <img v-bind:src="imageUrl" alt="Resim"> {# v-bind:src kullanılır #} <a :href="linkUrl">Siteye Git</a> {# Kısa yazım :href kullanılır #} </div> [B]<script>[/B] const app = Vue.createApp({ data() { return { imageUrl: 'https://via.placeholder.com/150', linkUrl: 'https://www.example.com' } } }); app.mount('#app'); [B]</script>[/B] - Diğer Yaygın Direktifler:
- `v-if`: Koşula göre elementi gösterir/gizler (DOM'dan tamamen kaldırır/ekler).
- `v-show`: Koşula göre elementi gösterir/gizler (`display: none;` stili ile gizler).
- `v-for`: Bir liste veya obje üzerindeki verilere göre birden çok elementi render eder.
- `v-on` veya `@`: Olay dinleyicileri ekler (örn: tıklama olayı için `@click`).
- `v-model`: Form input elemanları ile veriyi iki yönlü bağlar (input değeri değişince data değişir, data değişince input değeri değişir). (İleri konu)
5. Şartlı (Conditional) ve Liste (List) Render Etme (`v-if`, `v-for`)[/B]
Vue'da `v-if` ile bir elementin gösterilip gösterilmeyeceğini bir boolean veriye bağlayabilir, `v-for` ile bir listedeki her eleman için tekrar eden HTML blokları oluşturabiliriz.
HTML:
<div id="app">
<h2>Şartlı Gösterme (v-if)</h2>
{# 'goster' true ise bu paragraf görünür #}
<p v-if="goster">Bu mesaj bazen görünür.</p>
{# 'goster' false ise bu paragraf görünür #}
<p v-else>Bu mesaj bazen görünür (v-else ile).</p>
<button @click="goster = !goster">Göster/Gizle</button> {# Buton tıklaninca data'daki 'goster' değerini tersine çevir #}
<h2>Liste Render Etme (v-for)</h2>
<ul>
{# 'urunler' listesindeki her eleman ('urun') için bir 'li' elementi oluştur #}
<li v-for="urun in urunler" :key="urun"> {# :key v-for için performans ve takipte önemlidir, benzersiz olmalı #}
{{ urun }} {# Liste elemanını göster #}
</li>
</ul>
{# İndeks ile birlikte listeleme #}
<h3>İndeks ile Listeleme</h3>
<ul>
<li v-for="(urun, index) in urunler" :key="index">
{{ index + 1 }}. {{ urun }}
</li>
</ul>
</div>
[B]<script>[/B]
const app = Vue.createApp({
data() {
return {
goster: true, // v-if için boolean veri
urunler: ['Laptop', 'Klavye', 'Fare'] // v-for için liste
}
}
// methods kısmı aşağıda eklenecek
});
app.mount('#app');
[B]</script>[/B]6. Olay (Event) Yönetimi (`v-on` veya `@`) ve Metotlar[/B]
Kullanıcı etkileşimlerine (tıklama, form gönderme vb.) tepki vermek için `v-on:` direktifi veya kısaltması `@` kullanılır ve bunlar genellikle Vue uygulamasının `methods` objesinde tanımlanmış fonksiyonları çağırır.
HTML:
<div id="app">
<h2>Olay Yönetimi</h2>
<p>Sayaç: {{ sayac }}</p>
{# Buton tıklaninca data'daki sayaciArtir metodunu çağır #}
<button v-on:click="sayaciArtir">Sayacı Artır</button> {# v-on:click kullanılır #}
<button @click="sayaciAzalt">Sayacı Azalt</button> {# Kısa yazım @click kullanılır #}
{# Argüman alan metot çağırma #}
<button @click="mesajiDegistir('Yeni Başlık')">Başlığı Değiştir</button>
</div>
[B]<script>[/B]
const app = Vue.createApp({
data() {
return {
sayac: 0,
message: 'Varsayılan Mesaj'
}
},
// Metotlar buraya tanımlanır
methods: {
sayaciArtir() {
// 'this' data'yı temsil eder
this.sayac++;
},
sayaciAzalt() {
this.sayac--;
},
mesajiDegistir(yeniMesaj) {
this.message = yeniMesaj;
}
}
});
app.mount('#app');
[B]</script>[/B]7. Tam Bir Vue.js Temelleri Örneği (Tek HTML Dosyası)[/B]
Aşağıdaki kod, yukarıda öğrendiğimiz tüm temel kavramları bir araya getiren tek bir HTML dosyasıdır. Tarayıcıda çalıştırarak Vue.js'in nasıl çalıştığını gözlemleyebilirsiniz.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js Temelleri Örnek Uygulama</title>
{# Vue 3 CDN linki #}
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
.kirmizi { color: red; }
.mavi { color: blue; }
</style>
</head>
<body>
<div id="app">
<h1>{{ appTitle }}</h1> {# Metin bağlama #}
<h2>Sayaç</h2>
<p>Sayaç Değeri: {{ sayac }}</p>
<button @click="sayaciDegistir(1)">Artır</button> {# @click ile metot çağır #}
<button @click="sayaciDegistir(-1)">Azalt</button>
<hr>
<h2>Şartlı Gösterme</h2>
<p v-if="mesajGorunur">Bu paragraf görünürse, 'mesajGorunur' true demektir.</p>
<p v-else>Bu paragraf görünürse, 'mesajGorunur' false demektir.</p>
<button @click="mesajGorunur = !mesajGorunur">Mesajı Göster/Gizle</button>
<hr>
<h2>Liste Render Etme (Ürünler)</h2>
<input type="text" v-model="yeniUrunAdi" placeholder="Yeni ürün adı girin"> {# v-model iki yönlü bağlama (İleri konu ama yaygın) #}
<button @click="urunEkle">Ürün Ekle</button>
<ul>
{# 'urunler' listesini gez #}
<li v-for="(urun, index) in urunler" :key="index">
{{ index + 1 }}. {{ urun }}
<button @click="urunSil(index)">Sil</button> {# Metot çağır, indeksi argüman olarak gönder #}
</li>
</ul>
<p v-if="urunler.length === 0">Henüz ürün eklenmedi.</p> {# Liste boşsa mesaj göster #}
<hr>
<h2>Özellik Bağlama ve Stil</h2>
<p :class="{ kirmizi: sayac < 0, mavi: sayac > 0 }">Sayaç değeri negatifse kırmızı, pozitifse mavi olur.</p> {# Sayac değerine göre CSS class'ı bağla #}
</div>
[B]<script>[/B]
const app = Vue.createApp({
data() {
return {
appTitle: 'Vue.js İlk Uygulamam',
sayac: 0,
mesajGorunur: true,
urunler: ['Laptop', 'Klavye'],
yeniUrunAdi: '' // Yeni ürün ekleme inputu için data
}
}
, // virgül önemli
methods: {
sayaciDegistir(miktar) {
this.sayac += miktar;
}
, // virgül önemli
urunEkle() {
if (this.yeniUrunAdi.trim() !== '') { // Boş değilse
this.urunler.push(this.yeniUrunAdi.trim()); // Listeye ekle
this.yeniUrunAdi = ''; // Inputu temizle
}
}
, // virgül önemli
urunSil(index) {
this.urunler.splice(index, 1); // Belirtilen indeksteki 1 elemanı sil
}
}
// , // Son objeden sonra virgül opsiyonel
});
app.mount('#app'); // Vue uygulamasını bağla
[B]</script>[/B]
</body>
</html>Sıra Sizde![/B]
Vue.js ile modern frontend dünyasına ilk adımınızı attık.
- Yukarıdaki tam örneği yazıp çalıştırabildiniz mi?
- Kendi Vue uygulamanızı oluşturup `data` objesine yeni değişkenler ekleyip `{{ }}` ve `:bind` ile HTML'de göstermeyi denediniz mi?
- `v-if`, `v-else` kullanarak bir koşula bağlı element gösterip gizlemeyi denediniz mi?
- `v-for` ile bir listedeki veriyi HTML olarak render etmeyi denediniz mi? `:key` kullanımına dikkat ettiniz mi?
- `@click` ile bir butona tıklama olayı bağlayıp `methods` içindeki bir fonksiyonu çağırmayı ve bu fonksiyonda `this.dataDegiskeni` ile data'ya erişmeyi denediniz mi?
- Sayfa elemanlarını manuel DOM metotları (`getElementById`, `innerHTML` vb.) yerine Vue'nun veri bağlama (`{{ }}`, `v-if`, `v-for`) ve olay yönetimi (`@click`) ile güncelleyerek aradaki farkı hissettiniz mi?
Serinin Geleceği?[/B]
Vue.js ile frontend framework dünyasına giriş yaptık. Bu alan oldukça geniştir.
Seriyi buradan sonra nasıl devam ettirelim?
- Vue.js'te daha ileri konular (Bileşenler - Components detaylı, Props, Emit, Computed Properties, Watchers, Lifecycle Hooks, Form Input Binding - v-model detaylı)?
- Vue Router ile SPA (Tek Sayfa Uygulama) navigasyonu?
- Vuex veya Pinia ile State Management (karmaşık veri yönetimi)?
- Vue ile API çağrıları yapma (Fetch API veya Axios kullanımı)?
- Diğer popüler JavaScript Frontend Frameworklerine giriş (React veya Angular temelleri)?
- Webpack/Vite gibi Modül Paketleyiciler ve modern Frontend geliştirme ortamı?
- Veya başka önerileriniz mi var?
Umarım bu konu, modern ve yönetilebilir web arayüzleri geliştirmeye başlarken faydalı olmuştur. Görüşmek üzere!
Bu konu, "Hazır Kod Bankası" serisinin yirmi yedinci parçasıdır ve "Yazılım Bilgi ve Yeni Başlayanlar İçin" kategorisi altında paylaşılmıştır.