COMPREHENSIVE VUE.JS EĞİTİMİ

Vue 3 ile uçtan uca uygulama kurun

Vue 3 reaktivite, Composition API, Vue Router ve Pinia ile tek sayfa uygulamalar geliştirin

Comprehensive Vue.js Eğitimi, Vue 3'ü temellerinden üretime kadar kapsamlı biçimde öğretir. Program template söz dizimi, direktifler ve reaktivite ile başlar; bileşen, props, emit ve slot ile iletişimi, Composition API, ref, reactive, computed, watch ve compo…

4 gün Orta Seviye Online / Yüz Yüze / Hibrit Sertifikalı

Eğitim Hakkında

Template söz diziminden Composition API'ye, Vue Router ve Pinia ile durum yönetimine kapsamlı Vue 3

Comprehensive Vue.js Eğitimi, Vue 3'ü temellerinden üretime kadar kapsamlı biçimde öğretir. Katılımcılar template söz dizimini, direktifleri ve reaktiviteyi kavrar; bileşen, props, emit ve slot ile arayüz kurar. Composition API, ref, reactive, computed, watch ve composable'lar derinlemesine işlenir. Vue Router ile yönlendirme, Pinia ile durum yönetimi, Vite ve test araçlarıyla üretime hazır uygulama geliştirme ele alınır.

Süre ve Format

4 Gün. Her gün dört modül; Vue temellerinden Composition API'ye, yönlendirme ve durum yönetiminden üretime kademeli olarak ilerlenir.

Seviye

Orta Seviye — Vue 3 temellerinden Composition API'ye, Vue Router ve Pinia ile uçtan uca uygulama

Öğrenme Metodu

Her modülde kavram anlatımının ardından canlı kodlama yapılır; dört gün boyunca tek sayfa bir Vue uygulaması adım adım kurulur.

Neden Bu Eğitim?

💚Yumuşak öğrenme

Vue 3, template temelli yaklaşımı ve net belgeleriyle öğrenmesi en kolay çerçevelerden biridir; hızla üretken olursunuz.

🧩Composition API

ref, reactive ve composable'larla mantığı yeniden kullanılabilir biçimde düzenlemeyi ve karmaşık bileşenleri sadeleştirmeyi öğrenirsiniz.

🚀Üretime hazır

Vue Router, Pinia, Vite ve test araçlarıyla küçük bir prototipten ölçeklenebilir gerçek bir uygulamaya geçişi deneyimlersiniz.

Anahtar Konular

vue.js eğitimivue 3 eğitimivue js kursucomposition api eğitimipinia eğitimivue router eğitimiön yüz geliştirme eğitimijavascript vue kursuvue derslerifrontend framework eğitimi
“Vue, basit olanı basit, karmaşık olanı mümkün kılar; reaktiviteyi anladığınızda arayüz, verinin doğal bir yansımasına dönüşür.”

Ön Koşullar

Eğitimden en yüksek verimi almak için önerilen bilgi ve geliştirme ortamı

1
JavaScript bilgisi

Fonksiyon, dizi metotları, destructuring ve modüller gibi modern JavaScript konularına hakimiyet beklenir.

2
HTML ve CSS

Temel HTML yapısı ve CSS ile düzen kurma bilgisi, bileşen şablonlarını oluştururken işinizi kolaylaştırır.

3
Geliştirme ortamı

Node.js, bir kod editörü ve tarayıcı kurulu olmalı; projeler Vite ile oluşturulup çalıştırılacaktır.

4
Temel terminal

npm komutlarını çalıştırabilecek düzeyde terminal kullanımı, paket kurulumu ve proje başlatmada faydalı olur.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı Vue uygulamasının nasıl kurulduğunu kavrar, template söz dizimini ve direktifleri kullanır, temel reaktivite mantığını anlar.
Modül 1
Vue Uygulama Kurulumu
  • Vite ile Vue 3 projesi oluşturma
  • createApp ile uygulamanın bağlanması
  • Tek dosya bileşeni (SFC) yapısı
  • template, script ve style bölümleri
  • Geliştirme sunucusu ve hızlı yenileme
  • Vue DevTools ile uygulama incelemesi
Modül 2
Template Söz Dizimi
  • Çift süslü parantezle metin bağlama
  • v-bind ile öznitelik bağlama kısayolu
  • v-on ile olay dinleme ve kısayolu
  • Hesaplanmış sınıf ve stil bağlama
  • İfade ve metotların şablonda kullanımı
  • Ham HTML için v-html dikkatleri
Modül 3
Direktifler ve Koşul/Döngü
  • v-if, v-else-if ve v-show farkı
  • v-for ile liste render ve key kullanımı
  • Nesne ve dizi üzerinde döngü kurma
  • Koşullu ve listeli render birlikte
  • v-model ile iki yönlü veri bağlama
  • Form girişlerinde değiştirici (modifier)
Modül 4
Reaktivite Temeli
  • ref ile ilkel değerin reaktifleştirilmesi
  • reactive ile nesne reaktivitesi
  • Reaktif değişimin arayüze yansıması
  • Şablonda ref'in otomatik açılması
  • computed ile türetilmiş değer üretme
  • Reaktivitenin çalışma mantığına bakış
Günün hedefiKatılımcı yeniden kullanılabilir bileşenler kurar, props ve emit ile iletişim sağlar, slot ile esnek kompozisyon ve bileşen yaşam döngüsünü uygular.
Modül 1
Bileşen Tasarımı
  • Bileşenin tanımı ve yeniden kullanımı
  • Bileşenin kayıt ve kullanım biçimi
  • Tek sorumluluk ilkesiyle bileşen bölme
  • Bileşen adlandırma ve dosya organizasyonu
  • Global ve yerel bileşen kaydı farkı
  • Dinamik bileşen için component etiketi
Modül 2
Props ile Veri Aktarımı
  • props ile ebeveynden çocuğa veri
  • Prop tipi, varsayılan ve zorunluluk
  • Prop doğrulama ve tek yönlü akış
  • Nesne ve dizi prop'larda dikkat
  • Boolean ve dinamik prop kullanımı
  • Prop'u doğrudan değiştirmeme kuralı
Modül 3
Emit ile Olay İletişimi
  • emit ile çocuktan ebeveyne olay
  • defineEmits ile olayların tanımı
  • Olayla veri (payload) gönderme
  • v-model'in bileşende özelleştirilmesi
  • Çoklu v-model ile birden fazla bağlama
  • Olay temelli gevşek bağlı tasarım
Modül 4
Slot ve Yaşam Döngüsü
  • Varsayılan slot ile içerik yerleştirme
  • Adlandırılmış (named) slot kullanımı
  • Kapsamlı (scoped) slot ile veri paylaşımı
  • mounted ve unmounted yaşam kancaları
  • onMounted ile başlangıç işlemleri
  • Yaşam döngüsünde kaynak temizliği
Günün hedefiKatılımcı Composition API ile mantığı düzenler, ref, reactive, computed ve watch'ı etkin kullanır, tekrar eden mantığı composable'a taşır.
Modül 1
Composition API'ye Geçiş
  • script setup ile sade bileşen yazımı
  • Options API ve Composition API farkı
  • Mantığın ilgiye göre gruplanması
  • ref ve reactive seçimi ve dengesi
  • toRef ve toRefs ile reaktiflik koruma
  • Reaktif değerlerin açılması (unwrap)
Modül 2
computed ve watch
  • computed ile türetilmiş reaktif değer
  • Okunabilir ve yazılabilir computed
  • watch ile belirli kaynağı izleme
  • watchEffect ile otomatik bağımlılık
  • Derin (deep) ve anında izleme seçenekleri
  • İzleyici temizliği ve yan etki yönetimi
Modül 3
Composable Yazımı
  • Tekrar eden mantığı composable'a çıkarma
  • useMouse gibi örnek composable
  • Reaktif durum döndüren fonksiyonlar
  • Composable içinde yaşam kancası kullanımı
  • Composable'ların test edilebilirliği
  • Topluluk composable kütüphaneleri
Modül 4
Provide/Inject ve Paylaşım
  • provide ile ağaç boyunca veri sağlama
  • inject ile derin bileşende tüketme
  • Prop drilling sorununun azaltılması
  • Reaktif değerlerin provide edilmesi
  • Enjeksiyon anahtarları ve varsayılanlar
  • Global durumla ne zaman karşılaştırılır
Günün hedefiKatılımcı Vue Router ile çok sayfalı yapı kurar, Pinia ile global durumu yönetir, uygulamayı test edip üretim için derleyerek dağıtır.
Modül 1
Vue Router ile Yönlendirme
  • Rota tanımı ve router kurulumu
  • router-link ve router-view kullanımı
  • Dinamik segment ve rota parametreleri
  • İç içe (nested) rotalar ve düzen
  • Navigation guard ile erişim denetimi
  • Tembel yükleme ile rota bazlı bölme
Modül 2
Pinia ile Durum Yönetimi
  • Store tanımı ve state yapısının kurgusu
  • getters ile türetilmiş durum üretimi
  • actions ile durumun değiştirilmesi
  • Bileşen içinde store'un kullanımı
  • storeToRefs ile reaktiflik koruma
  • Pinia eklentileri ve kalıcılık
Modül 3
Test ve Kalite Güvencesi
  • Vitest ile birim testlerinin yazımı
  • Vue Test Utils ile bileşen testi
  • mount ve shallowMount arasındaki fark
  • Kullanıcı etkileşiminin simülasyonu
  • Composable ve store'ların test edilmesi
  • Test kapsamı ve sürdürülebilirlik
Modül 4
Üretim ve Dağıtım
  • Vite ile üretim derlemesi alma
  • Ortam değişkenleri ile yapılandırma
  • SPA yönlendirme yeniden yazımı
  • Statik barındırmaya dağıtım adımları
  • Nuxt ile sunucu tarafı render'a bakış
  • Performans ve paket boyutu denetimi

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
Şablon ve direktif

Template söz dizimi ve v-if, v-for, v-model gibi direktiflerle reaktif, etkileşimli arayüzleri rahatlıkla kurarsınız.

✅
Reaktivite

ref, reactive ve computed ile verinin arayüze nasıl yansıdığını kavrar, reaktif durumu bilinçli biçimde yönetirsiniz.

✅
Bileşen iletişimi

Props, emit ve slot ile yeniden kullanılabilir bileşenler kurar, ebeveyn-çocuk iletişimini temiz biçimde tasarlarsınız.

✅
Composition API

script setup, watch ve toRefs ile mantığı ilgiye göre düzenler, okunabilir ve ölçeklenebilir bileşenler yazarsınız.

✅
Composable

Tekrar eden mantığı composable'a taşıyarak yeniden kullanır, bileşenleri sadeleştirir ve test edilebilir hale getirirsiniz.

✅
Yönlendirme

Vue Router ile çok sayfalı yapı, dinamik rotalar, guard'lar ve tembel yüklemeyle gerçek uygulama akışları kurarsınız.

✅
Pinia durumu

Pinia ile global durumu state, getter ve action'larla yönetir, bileşenler arası paylaşımı sade ve reaktif tutarsınız.

✅
Test ve dağıtım

Vitest ve Vue Test Utils ile test yazar, uygulamayı üretim için derleyip statik barındırmaya dağıtmayı öğrenirsiniz.

Kimler İçin Uygundur?

  • HTML
  • CSS ve modern JavaScript bilen
  • Vue 3
  • sıfırdan modern arayüzler geliştirmek isteyen ön yüz geliştiricileri ve başka bir çerçeveden Vue'ya geçmek isteyen yazılımcılar için uygundur

Sıkça Sorulan Sorular

Bu Vue.js eğitimi kimler için uygundur?
HTML, CSS ve modern JavaScript bilen, Vue 3 ile sıfırdan modern arayüzler geliştirmek isteyen ön yüz geliştiricileri ve başka bir çerçeveden Vue'ya geçmek isteyen yazılımcılar için uygundur. Fonksiyon, dizi metotları ve destructuring gibi JavaScript konularına hakimiyet beklenir; Vue deneyimi gerekmez.
Options API mı Composition API mı öğretiliyor?
Eğitim güncel yaklaşım olan Composition API ve script setup üzerine kuruludur; ref, reactive, computed, watch ve composable'lar derinlemesine işlenir. Options API'ye farkların anlaşılması için kısaca değinilir, ancak odak bugün önerilen ve ölçeklenen Composition API yapısıdır. Her iki yaklaşım da karşılaştırmalı anlatılır.
Pinia mı Vuex mi kullanılıyor?
Durum yönetimi için Vue 3'ün resmi önerisi olan Pinia kullanılır; store tanımı, state, getter, action, storeToRefs ve eklentiler uygulamalı işlenir. Vuex'e yalnızca eski projelerde karşılaşabileceğiniz için kısaca değinilir. Pinia daha sade, tip dostu ve Composition API ile uyumlu olduğu için esas alınır.
Eğitimin süresi ve formatı nedir?
Eğitim dört gün sürer ve her gün dört modülden oluşur. Vue temellerinden başlayıp bileşenler, Composition API, Vue Router, Pinia, test ve dağıtıma uygulamalı ilerler. Her modülde canlı kodlama yapılır ve tek sayfa bir uygulama adım adım kurulur. Yüz yüze veya online yapılabilir ve kurumun ihtiyacına göre uyarlanabilir.
Eğitim sonunda sertifika veriliyor mu?
Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve eğitim boyunca geliştirilen Vue uygulamasını belgeler; kurumsal gruplara eğitim, mevcut proje ve teknoloji tercihlerine göre özelleştirilerek sunulabilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika d Digital Vizyon AKADEMİ KATILIM SERTİFİKASI Bu sertifika [Katılımcı Adı Soyadı] adlı katılımcının aşağıdaki eğitim programını başarıyla tamamladığını belgeler. Comprehensive Vue.js Eğitimi Sertifika Kodu DV-2026XX00 Tarih 15.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

Süre4 gün
SeviyeOrta Seviye
FormatOnline / Yüz Yüze / Hibrit
KonuVue.js
Sertifika✓ Var
Hemen Bilgi Al
İlgili Eğitimler

Bu Eğitimle Birlikte Tercih Edilenler

Vue.jsVue.js Öğrenmeye Başlangıç Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Vue.js Öğrenmeye Başlangıç Eğitimi

2 günBaşlangıçOnline / Yüz Yüze / Hibrit

Vue 3 temellerini sıfırdan öğreten giriş eğitimi: reaktivite, direktifler, bileşenler, props, olaylar ve form işleme ile ilk Vue uygulamanızı kurun.

Detayları Gör →
Vue.jsGelişmiş Vue.js Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Gelişmiş Vue.js Eğitimi

4 günİleriOnline / Yüz Yüze / Hibrit

Reaktivite içleri, composable, ileri bileşen desenleri, Pinia, Vue Router, TypeScript ve Vitest testi ile Vue 3'te usta düzeyi kazandıran ileri eğitim.

Detayları Gör →
Vue.jsGelişmiş Vue.js: Ölçeklenebilir Uygulamalar ve Optimizasyon Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Gelişmiş Vue.js: Ölçeklenebilir Uygulamalar ve Optimizasyon Eğitimi

3 günİleriOnline / Yüz Yüze / Hibrit

Büyük Vue uygulamalarında modüler mimari, kod bölme, reaktivite maliyeti, SSR ve Core Web Vitals optimizasyonunu uygulamalı öğreten ileri eğitim.

Detayları Gör →
Vue.jsJavascript ve Vue.js için Başlangıç Seviye Kursu Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Javascript ve Vue.js için Başlangıç Seviye Kursu Eğitimi

2 günBaşlangıçOnline / Yüz Yüze / Hibrit

Modern JavaScript temellerinden Vue 3 reaktivitesine uzanan başlangıç kursu: değişken, fonksiyon, ES6, async ve Vue bileşenleriyle sıfırdan öğrenin.

Detayları Gör →
Vue.jsMicro-Frontendleri Vue.js ile Oluşturma Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Micro-Frontendleri Vue.js ile Oluşturma Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

Module Federation ve single-spa ile Vue micro-frontend mimarisi kurmayı, bağımlılık paylaşımı, MFE iletişimi ve bağımsız dağıtımı öğreten eğitim.

Detayları Gör →
Vue.jsNuxt SEO Ustalık Kursu Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Nuxt SEO Ustalık Kursu Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

Nuxt ile teknik SEO eğitimi: SSR render stratejileri, useSeoMeta, JSON-LD structured data, sitemap, çok dilli SEO ve Core Web Vitals optimizasyonu.

Detayları Gör →
+90 (501) 369 40 14 WhatsApp [email protected] LinkedIn