Vue.js Rehberi: Modern Web Uygulamaları İçin Başlangıç
Yazar: Burak Balkı | Kategori: Full Stack Development | Okuma Süresi: 9 dk
Modern web geliştirme dünyasının en popüler framework'lerinden biri olan Vue.js için kapsamlı başlangıç rehberi. Kurulum, temel kavramlar, reaktivite ve best...
## Vue.js Nedir? Modern Web Geliştirmenin Esnek Gücü
**Vue.js**, kullanıcı arayüzleri oluşturmak için kullanılan progresif bir JavaScript framework'üdür. Evan You tarafından geliştirilen bu framework, öğrenme eğrisinin düşüklüğü ve yüksek performansı ile bilinir. Diğer monolitik framework'lerin aksine, Vue.js çekirdek kütüphanesi yalnızca görünüm katmanına (view layer) odaklanır, bu da onu mevcut projelere entegre etmeyi veya karmaşık tek sayfa uygulamaları (SPA) geliştirmeyi oldukça kolaylaştırır.
Vue.js'in temel felsefesi, **reaktivite** ve **bileşen tabanlı mimari** üzerine kuruludur. Bu sayede verileriniz değiştiğinde arayüzünüz otomatik olarak güncellenir ve kodunuzu modüler parçalara bölerek yönetebilirsiniz.
## Temel Kavramlar ve Vue.js Mimarisi
Vue.js ekosistemini anlamak için üç temel kavramı kavramak gerekir:
1. **Reaktivite (Reactivity):** Vue, JavaScript objelerini izler ve bir özellik değiştiğinde DOM'u (Document Object Model) verimli bir şekilde günceller.
2. **Bileşenler (Components):** Uygulamanın her bir parçası (header, sidebar, form vb.) kendi mantığına ve stiline sahip bağımsız birer bileşendir.
3. **Sanal DOM (Virtual DOM):** Performansı artırmak için Vue, gerçek DOM yerine bellekte bir kopya tutar ve sadece değişen kısımları gerçek DOM'a yansıtır.
| Kavram | Açıklama | Avantaj |
| :--- | :--- | :--- |
| Declarative Rendering | Şablon sözdizimi ile HTML çıktısını tanımlama | Okunabilirlik |
| Reactive State | Veri ve görünümün senkronize olması | Otomasyon |
| Component System | Tekrar kullanılabilir kod blokları | Bakım Kolaylığı |
## Vue.js Kurulumu ve Proje Yapılandırması
Modern bir Vue.js projesi başlatmak için en hızlı ve önerilen araç **Vite**'tır. Vite, yeni nesil bir frontend derleme aracıdır ve geliştirme sürecini inanılmaz derecede hızlandırır.
### Gereksinimler
- **Node.js:** En az v16.0 veya daha yeni bir sürüm.
- **Terminal/Komut Satırı Bilgisi.**
### Adım Adım Kurulum
Terminalinizi açın ve aşağıdaki komutu çalıştırın:
```bash
npm create vue@latest
```
Bu komut size proje ismini, TypeScript desteğini ve Vue Router gibi ek kütüphaneleri isteyip istemediğinizi soracaktır. Kurulum tamamlandıktan sonra:
```bash
cd proje-adin
npm install
npm run dev
```
Artık projeniz `http://localhost:5173` adresinde yayındadır.
## İlk Adımlar: Hello World ve Declarative Rendering
Vue.js'in en basit haliyle nasıl çalıştığını anlamak için bir CDN bağlantısı üzerinden örnek verelim. Bu yöntem, framework'ü bir HTML dosyasına dahil etmenin en hızlı yoludur.
```html
{{ message }}
```
> **Not:** `ref` fonksiyonu, bir değeri reaktif hale getirmek için kullanılır. Değişkenin değeri değiştiğinde, HTML içindeki `{{ message }}` alanı otomatik olarak güncellenir.
## Vue.js Direktifleri (Directives)
Direktifler, HTML elementlerine özel davranışlar ekleyen `v-` ön ekiyle başlayan özel özniteliklerdir.
### v-if ve v-show
Koşullu render işlemleri için kullanılırlar.
```vue
Bu metin sadece 'visible' true ise görünür.
Diğer durumda bu görünür.
``` ### v-for ile Liste Render Etme Bir dizi içindeki verileri döngüye sokmak için kullanılır. ```vue- {{ item.name }}
Hoş geldin, {{ username }}!
``` ## Computed Properties (Hesaplanmış Özellikler) Karmaşık mantık içeren verileri şablon içinde hesaplamak yerine `computed` kullanmalısınız. Bu özellikler bağımlılıkları değişmediği sürece cache'lenir (önbelleğe alınır). ```vueToplam Tutar: {{ total }} TL
``` ## Bileşenler Arası İletişim: Props ve Emits Vue.js'de veri akışı yukarıdan aşağıya (parent to child) **props** ile, aşağıdan yukarıya (child to parent) ise **events** ile gerçekleşir. ### Alt Bileşen Örneği (ChildComponent.vue) ```vue