Vue.js Working with Components Eğitimi

Eğitim Hakkında

Tek dosya bileşenlerden yaşam döngüsü ve dinamik bileşenlere kadar bileşen odaklı akış

Vue.js: Working with Components Eğitimi, Vue uygulamalarının temel yapı taşı olan bileşenleri doğru tasarlamayı ve yönetmeyi öğretir. Katılımcılar tek dosya bileşen yapısını, reaktif state ile template ilişkisini, bileşen yaşam döngüsü kancalarını ve dinamik ile async bileşenleri öğrenir. Program global ve yerel kayıt, teleport, keep-alive ve composable ile yeniden kullanılabilir mimari konularıyla gerçek bir bileşen kütüphanesi üzerinde tamamlanır.

Süre ve Format

3 Gün. Her gün dört modül; bileşen tasarımı ve yaşam döngüsü konuları gerçek bir bileşen kütüphanesi üzerinde adım adım uygulanır.

Seviye

Orta Seviye — bileşen tasarımı, yaşam döngüsü, dinamik bileşenler ve yeniden kullanılabilir mimari

Öğrenme Metodu

Her modülde öğrenilen bileşen kalıpları gerçek bileşenler üzerinde kodlanır ve tarayıcıda canlı olarak çalıştırılıp test edilir.

Neden Bu Eğitim?

🧩Yeniden kullanım

İyi tasarlanmış bileşenlerle kodu tekrarlamadan, aynı arayüz parçalarını uygulamanın her yerinde güvenle yeniden kullanabilirsiniz.

♻️Yaşam döngüsü kontrolü

Yaşam döngüsü kancalarını doğru kullanarak veri yükleme, temizlik ve yan etkileri bileşenin doğru anlarında yönetirsiniz.

🏗️Sağlam mimari

Dinamik bileşenler, teleport ve composable kalıplarıyla büyüyen uygulamalarda düzenli ve bakımı kolay bir yapı kurarsınız.

Anahtar Konular

vue.js eğitimivue bileşen eğitimivue components kursuvue yaşam döngüsüvue composition apivue composabledinamik bileşen vueön yüz geliştirme eğitimivue script setupvue kursu

“Vue'da güçlü uygulamalar, iyi düşünülmüş bileşenlerden doğar; her bileşen tek bir işi net yaptığında bütün sistem sağlam durur.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve geliştirme ortamı

1

Vue temelleri

Template sözdizimi, direktifler ve temel reaktivite gibi Vue konularına aşinalık beklenir; eğitim bunun üzerine kurulur.

2

JavaScript bilgisi

Fonksiyon, nesne ve dizi metotları gibi modern JavaScript konularını bilmek örnekler için gereklidir.

3

HTML ve CSS

Semantik HTML ve temel CSS bilgisi, bileşenlerin yapısını ve stillenmesini anlamak için faydalı olur.

4

Node ve editör

Node.js kurulu bir ortam ve VS Code gibi bir editör, Vue projesini çalıştırmak ve örnekleri uygulamak için yeterlidir.

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ı, tek dosya bileşen yapısını kavrar; script setup ile reaktif state tanımlar, computed ve watch kullanarak template ile veri arasındaki ilişkiyi doğru kurar.

Modül 1

Tek Dosya Bileşen Anatomisi

template, script ve style bloklarının rolü ve ilişkisi
script setup sözdizimiyle sade ve okunabilir bileşen yazımı
scoped stil ile bileşene özel CSS kapsülleme
Bileşen adlandırma kuralları ve dosya organizasyonu
Template içinde ifade ve direktif kullanımının temelleri
Bileşenin dışa aktarımı ve uygulama içinde kullanımı

Modül 2

Reaktif State: ref ve reactive

ref ile ilkel değerler için reaktif referans oluşturma
reactive ile nesne tabanlı reaktif state tanımlama
ref ve reactive arasındaki fark ve doğru seçim
Template içinde ref değerlerine otomatik erişim (unref)
toRefs ile reaktif nesneyi bozulmadan destructuring
Reaktivite tuzakları ve referans kaybının önlenmesi

Modül 3

Computed ile Türetilmiş Değerler

computed ile bağımlılıklara dayalı türetilmiş veri üretme
Computed'in önbellekleme davranışı ve performans avantajı
Metot ve computed arasındaki farkın kavranması
Yazılabilir (writable) computed ile get ve set tanımı
Filtreleme ve sıralama gibi liste dönüşümlerinde computed
Zincirli computed değerlerle karmaşık türetimlerin yönetimi

Modül 4

Watch ve watchEffect

watch ile belirli reaktif kaynakların değişimini izleme
Eski ve yeni değerlere erişerek koşullu tepki verme
watchEffect ile bağımlılıkların otomatik toplanması
immediate ve deep seçenekleriyle izleme davranışı ayarı
Yan etkilerin temizliği için onCleanup kullanımı
Watch ile computed arasında doğru kullanım senaryosu seçimi

Günün hedefiKatılımcı, bileşen yaşam döngüsü kancalarını kullanarak veri yükleme ve temizliği yönetir; global ve yerel bileşen kaydını ve template ref ile DOM erişimini uygular.

Modül 1

Bileşen Yaşam Döngüsü

onMounted ile bileşen DOM'a eklendiğinde çalışan mantık
onBeforeMount ve onBeforeUnmount kancalarının kullanımı
onUnmounted ile zamanlayıcı ve dinleyicilerin temizliği
onUpdated ile güncelleme sonrası işlemlerin yönetimi
Yaşam döngüsü akışının bütünsel olarak kavranması
Veri çekme işlemlerinin uygun kancada tetiklenmesi

Modül 2

Global ve Yerel Bileşen Kaydı

app.component ile global bileşen kaydı ve kullanım alanı
Yerel kayıt ile bileşeni yalnızca gerektiği yerde kullanma
Global kaydın paket boyutuna ve performansa etkisi
Bileşen isimlendirme ve PascalCase kullanım kuralları
Üçüncü parti bileşen kütüphanelerinin kayıt yöntemleri
Plugin yapısıyla toplu bileşen kaydının organize edilmesi

Modül 3

Template Ref ve DOM Erişimi

ref özniteliğiyle DOM elemanına doğrudan erişim
useTemplateRef ile template referanslarının yönetimi
Mount sonrası DOM işlemleri için doğru zamanlama
Odaklanma, kaydırma ve ölçüm gibi gerçek DOM senaryoları
Alt bileşen metotlarına defineExpose ile erişim verme
Ref kullanımının reaktiviteden ne zaman tercih edileceği

Modül 4

Koşullu ve Liste Render

v-if ve v-show ile koşullu gösterim ve performans farkı
v-for ile liste render ve key kullanımının önemi
Bileşen listesi render ederken benzersiz anahtar seçimi
Liste güncellemelerinde render verimliliğinin korunması
Boş durum ve yükleniyor gösteriminin bileşenle yönetimi
v-for ile v-if birlikte kullanımında doğru yaklaşım

Günün hedefiKatılımcı, dinamik ve async bileşenleri kurar; teleport ve keep-alive ile gelişmiş render senaryolarını yönetir ve composable ile yeniden kullanılabilir bir bileşen mimarisi tamamlar.

Modül 1

Dinamik Bileşenler

component is özelliğiyle çalışma anında bileşen değiştirme
Sekme ve adım bileşenlerinde dinamik bileşen kullanımı
Dinamik bileşene prop ve olay bağlama
shallowRef ile bileşen referanslarının performanslı yönetimi
Koşullu bileşen seçiminde haritalama (map) kalıbı
Dinamik bileşenlerde erişilebilirlik ve odak yönetimi

Modül 2

Async Bileşenler ve Suspense

defineAsyncComponent ile bileşenleri gecikmeli yükleme
Yükleniyor ve hata bileşenleriyle bekleme deneyimi tasarımı
Kod bölme ile ilk yük boyutunu küçültme
Suspense ile async bağımlılıkların yönetimi
Yükleme zaman aşımı ve yeniden deneme yapılandırması
Async bileşenlerin yönlendirme ile birlikte kullanımı

Modül 3

Teleport ve Keep-Alive

teleport ile modal ve bildirimleri DOM'da taşıma
z-index ve overflow sorunlarını teleport ile çözme
keep-alive ile bileşen durumunu bellekte koruma
include ve exclude ile önbelleklenecek bileşenleri seçme
onActivated ve onDeactivated kancalarının kullanımı
Sekmeli arayüzlerde durum korumanın kullanıcı deneyimine etkisi

Modül 4

Composable ile Yeniden Kullanım

Bileşenlerden ortak mantığı composable fonksiyona taşıma
Reaktif state döndüren composable tasarım ilkeleri
Fare, pencere boyutu gibi gerçek composable örnekleri
Composable içinde yaşam döngüsü ve temizlik yönetimi
Bileşen ve composable sorumluluklarının net ayrımı
Yeniden kullanılabilir bir bileşen kütüphanesinin tamamlanması

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Tek dosya bileşen tasarımı

script setup ile sade, okunabilir ve scoped stilli tek dosya bileşenler tasarlayarak temiz bir bileşen yapısı kurabilirsiniz.

✅

Reaktif state yönetimi

ref ve reactive ile reaktif state tanımlar, computed ve watch kullanarak türetilmiş veri ve yan etkileri doğru yönetebilirsiniz.

✅

Yaşam döngüsü kullanımı

onMounted ve onUnmounted gibi kancalarla veri yükleme ve temizlik işlemlerini bileşenin doğru anlarında çalıştırabilirsiniz.

✅

Bileşen kaydı

Global ve yerel bileşen kaydı arasında doğru seçimi yaparak paket boyutunu ve bileşen organizasyonunu yönetebilirsiniz.

✅

Template ref ve DOM

Template ref ile DOM elemanlarına ve defineExpose ile alt bileşen metotlarına güvenli şekilde erişebilirsiniz.

✅

Dinamik ve async bileşen

component is ve defineAsyncComponent ile dinamik ve gecikmeli yüklenen bileşenleri performanslı biçimde kurabilirsiniz.

✅

Teleport ve keep-alive

teleport ile modalleri doğru konumlandırır, keep-alive ile bileşen durumunu koruyarak akıcı bir arayüz deneyimi sağlarsınız.

✅

Composable ile mimari

Ortak mantığı composable'lara taşıyarak yeniden kullanılabilir, test edilebilir ve bakımı kolay bir bileşen mimarisi kurabilirsiniz.

Kimler İçin Uygundur?

Vue temellerini bilen ve bileşen yapısını derinleştirmek isteyen ön yüz geliştiriciler
sağlam bir bileşen mimarisi kurmak isteyen arayüz geliştiricileri
yeniden kullanılabilir bileşenler üretmek isteyen web ekipleri için uygundur

Sıkça Sorulan Sorular

Bu Vue bileşen eğitimi kimler için uygundur?

Vue temellerini bilen ve bileşen yapısını derinleştirmek isteyen ön yüz geliştiriciler, sağlam bir bileşen mimarisi kurmak isteyen arayüz geliştiricileri ve yeniden kullanılabilir arayüz bileşenleri üretmek isteyen web ekipleri için uygundur.

Eğitim kaç gün sürüyor ve nasıl işleniyor?

Eğitim üç gün sürer ve her gün dört modül içerir. Bileşen tasarımı, yaşam döngüsü ve dinamik bileşen konuları gerçek bir bileşen kütüphanesi üzerinde uygulamalı işlenir; her kalıp bileşenlerde kodlanıp tarayıcıda çalıştırılarak test edilir.

Katılmak için hangi ön bilgiler gerekli?

Template sözdizimi, direktifler ve temel reaktivite gibi Vue konularına, modern JavaScript'e ve temel HTML/CSS bilgisine aşinalık beklenir. Node.js kurulu bir ortam ve bir kod editörü örnekleri uygulamak için yeterlidir.

Composition API mı Options API mı anlatılıyor?

Eğitim ağırlıklı olarak Composition API ve script setup sözdizimiyle işlenir; ref, reactive, computed ve composable kalıpları bu yaklaşımla anlatılır. Options API ile çalışan ekipler için temel karşılıklar da gerektiğinde açıklanır.

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, katılımcının Vue bileşen tasarımı ve yönetimi konularını tamamladığını belgeler.

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

VUE.JS: WORKING WITH COMPONENTS EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Tek Dosya Bileşen Anatomisi

Reaktif State: ref ve reactive

Computed ile Türetilmiş Değerler

Watch ve watchEffect

Bileşen Yaşam Döngüsü

Global ve Yerel Bileşen Kaydı

Template Ref ve DOM Erişimi

Koşullu ve Liste Render

Dinamik Bileşenler

Async Bileşenler ve Suspense

Teleport ve Keep-Alive

Composable ile Yeniden Kullanım

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Comprehensive Vue.js Eğitimi

İleri Seviye Vue.JS Eğitimi

Laravel and Vue.JS Eğitimi

Nuxt.JS and Vue.JS Eğitimi

Quasar Framework and Vue.JS Eğitimi

Vue.JS Giriş Eğitimi