• Buradasın

    Vue.js

    Özetteki ilgi çekici içerikler

    • Vue.js ile Kelime Yazma Hız Testi Projesi Eğitimi

      Bu video, "Codignite Hocası" tarafından sunulan bir Vue.js eğitim içeriğidir. Eğitmen, PHP ve PHP frameworkleri üzerine bir YouTube kanalı sahibi olup, bu videoda Vue.js framework'ü kullanarak bir kelime yazma hız testi projesi geliştirmeyi anlatmaktadır. Video, Vue.js 3'ün kurulumundan başlayarak, gerekli programların (npm, npm-cli, Visual Studio Code) kurulumunu, Vue CLI ile yeni bir proje oluşturma sürecini ve projenin temel yapılandırmasını adım adım göstermektedir. Eğitmen, projenin temelini oluşturmak için Türkçe kelime listesini JSON formatına dönüştürmüş ve bu dosyayı videonun açıklamasında paylaşacağını belirtmektedir. Videoda ayrıca Babel, TypeScript, Router, Vuex, CSS Preprocessors ve ESLint gibi teknolojilerin projede nasıl kullanılacağı, assets klasörünün işlevi ve komponent yapısı hakkında bilgiler verilmektedir. Eğitmen, bu proje ile ilerleyen derslerde Laravel ile API backend yazma ve Vue ile bu API'yi işleme gibi ileriki projeleri hazırlamak için temel bir yapı oluşturacağını belirtmektedir.

      • youtube.com

    • Vue.js ile COVID-19 Bilgilendirme Uygulaması Geliştirme Eğitimi

      Bu video, bir eğitmen tarafından sunulan teknik bir yazılım eğitim içeriğidir. Eğitmen, Vue.js ve Vuex kullanarak COVID-19 hakkında bilgilendirici bir uygulama geliştirme sürecini adım adım göstermektedir. Video, COVID-19 verilerine erişmek için API servislerinin kullanımı ile başlayıp, Vue.js ve Vuex ile uygulama yapısının oluşturulmasına geçmektedir. Eğitim boyunca, uygulamanın kullanıcı arayüzü tasarımı, responsive tasarım, veri çekme işlemleri, Vuex state yönetimi ve ApexCharts ile veri görselleştirme konuları ele alınmaktadır. Uygulama, ana sayfa, tüm dünya ve haberler gibi bölümlerden oluşmakta ve Türkiye'deki vakalar, en çok etkilenen ülkeler ve son haberler gibi bilgileri sunmaktadır. Eğitimde ayrıca grid ve flexbox düzenlemeleri, medya sorguları, CSS değişkenleri, computed properties, Vuex actions, mutations ve state yönetimi gibi konular detaylı olarak gösterilmektedir. Uygulama, mobil ve büyük ekranlar için farklı görünümlere sahip olacak şekilde tasarlanmaktadır.

      • youtube.com

    • Vue.js ile Alışveriş Uygulaması Geliştirme Eğitimi

      Bu video, bir konuşmacının Vue.js kullanarak alışveriş uygulaması geliştirme sürecini adım adım anlattığı bir eğitim içeriğidir. Eğitim, Vue.js'te komponent oluşturma ve kullanma konusunu ele almaktadır. Konuşmacı, "Hello World" uygulamasından başlayarak, ürün listesi oluşturacak bir komponent oluşturma sürecini göstermektedir. Video, HTML, script ve style bölümlerinin kullanımı, v-for döngüsü ile veritabanından ürün listeleme, Bootstrap entegrasyonu ve arayüz tasarımı gibi temel konuları kapsamaktadır. Eğitimde ayrıca ürün detay sayfasına yönlendirme, ücretsiz teslimat etiketi oluşturma, ürün özelliklerinin listelenmesi, fiyat hesaplama, sayısal input kullanımı ve para birimi seçimi gibi pratik uygulamalar da gösterilmektedir. Video, bir sonraki bölümde ürün listeleme için JSON verisi kullanarak komponentin nasıl kullanılacağına değineceğini belirterek sona ermektedir.

      • youtube.com

    • Laravel'da Vue.js Kullanımı Eğitim Videosu

      Bu video, bir eğitim içeriği olup, eğitmen tarafından Laravel framework'ünde Vue.js kütüphanesinin nasıl kullanılacağı anlatılmaktadır. Video, Vue.js'in Laravel sayfasına nasıl dahil edileceğini ve temel kullanımını göstermektedir. Eğitmen önce Vue.js'in web sitesine giriş yaparak versiyon seçimi yapmakta, ardından bir HTML dosyası oluşturarak Vue.js'i sayfaya dahil etme sürecini adım adım göstermektedir. Ayrıca, Vue.js'in temel kullanımını göstermek için basit bir örnek üzerinden ekrana mesaj yazdırma işlemi yapılmaktadır. Video, ilerleyen derslerde Laravel'da Vue.js'in daha detaylı kullanımını ele alacağını belirtmektedir.

      • youtube.com

    • Pinia State Yönetim Kütüphanesi Kullanım Eğitimi

      Bu video, bir eğitmen tarafından sunulan Pinia state yönetim kütüphanesinin kullanımını anlatan kapsamlı bir eğitim içeriğidir. Video, Pinia'nın ne olduğu, özellikleri ve kullanım alanları hakkında bilgi vererek başlıyor, ardından kurulum adımları ve temel kullanım örnekleri gösteriliyor. Eğitimde Pinia'nın store'ları, action'ları, state yönetimi, login ve logout işlemleri, loading efektleri ve router yönlendirmeleri gibi konular adım adım anlatılıyor. Ayrıca Pinia Persisted State paketi kullanılarak verilerin sayfa yenilendikten sonra da saklanması ve kullanıcı giriş durumuna göre erişim kontrolü yapılarak yönlendirme işlemleri de gösteriliyor. Video, izleyicilerin Pinia'yı kendi projelerinde nasıl kullanabileceklerini gösteren bir rehber niteliğindedir ve özellikle Pinia ve router kullanımını öğrenmek isteyenler için faydalı olacaktır.

      • youtube.com

    • Vue.js'te Çoklu Dil Desteği ve Dinamik Çeviri Kullanımı

      Bu video, bir yazılım eğitim içeriğidir. Eğitmen, Vue.js'te çoklu dil desteği ve dinamik çeviri kullanımını göstermektedir. Video, Vue.js'te çoklu dil desteği sağlayan i18n kütüphanesi kullanarak tablo altındaki "9 kayıttan 1 ile 5 arası gösteriliyor" yazısının dinamik olarak çevrilmesini anlatmaktadır. Eğitmen önce statik çeviri yaparak başlayıp, ardından dinamik çeviri için v-translate kütüphanesinin content interpolation özelliğini kullanarak HTML elementleri ile birlikte çeviri yapma yöntemini göstermektedir. Ayrıca, güvenlik zafiyeti oluşturmadan HTML elementleri ile çeviri yapma teknikleri de paylaşılmaktadır.

      • youtube.com

    • Vue.js ve React Komponent Mantığı Eğitimi

      Bu video, Engin adlı bir yazılım geliştiricisi tarafından sunulan Vue.js ve React framework'lerinde komponent mantığını anlatan bir eğitim içeriğidir. Engin, frontend alanında geliştirici olarak çalışmakta ve bilgisayar mühendisliği okumaktadır. Video, üç ana bölümden oluşmaktadır: İlk bölümde Vue.js 3. versiyonunun kurulumu adım adım gösterilmekte, ikinci bölümde Vue.js'te komponent oluşturma ve kullanma süreci anlatılmakta, üçüncü bölümde ise React'te komponent mantığı ve props kullanımı açıklanmaktadır. Her bölümde pratik kod örnekleri üzerinden konular detaylı şekilde ele alınmaktadır. Eğitim, pure JavaScript, HTML ve CSS bilenlerin framework'e geçişte yaşadığı zorlukları ele alarak başlamakta ve ilerleyen videolarda daha karmaşık projeler ve farklı konulara değineceğini belirtmektedir. Ayrıca, best practice olarak tüm aksiyonların app içerisinde yapılması gerektiği vurgulanmaktadır.

      • youtube.com

    • Vue.js Komponent Yaşam Döngüsü Eğitimi

      Bu video, bir eğitim içeriği olup, bir eğitmen tarafından Vue.js komponentlerinin yaşam döngüsü hakkında bilgi verilmektedir. Video, Vue.js komponentlerinin yaşam döngüsünü detaylı şekilde ele almaktadır. Eğitmen, created, mounted, updated ve watch gibi yaşam döngüsü aşamalarını açıklamakta ve bunların nasıl çalıştığını kod örnekleriyle göstermektedir. Ayrıca, komponent içindeki verilerin nasıl izlenebileceği ve değişikliklerin nasıl yakalanabileceği konusunda pratik uygulamalar sunulmaktadır. Video, Vue.js geliştiricileri için temel yaşam döngüsü kavramlarını öğrenmek isteyenler için faydalı olacaktır.

      • youtube.com

    • Vue.js'te Büyücü ile Farklı Layout Kullanımı Eğitimi

      Bu video, bir eğitim içeriği olup, izleyicilere Vue.js'te Büyücü (Router) kullanarak farklı layout'ların nasıl kullanılacağını göstermektedir. Video, boş bir Vue.js projesi oluşturma ile başlayıp, router ve rahat paketlerinin kurulumunu göstermektedir. Ardından home ve users gibi farklı sayfalar için layout'lar oluşturulmakta, meta etiketleri kullanılarak farklı sayfaların farklı layout'larla görüntülenmesi sağlanmaktadır. Eğitmen, home sayfası için header ve slot içeren bir layout, users sayfası için ise sol ve sağ taraflı bir layout oluşturarak, bu layout'ların nasıl kullanılacağını adım adım göstermektedir.

      • youtube.com

    • Atomik Tasarım ve Front-End Geliştirme Eğitimi

      Bu video, Fatih Kadir Akın tarafından sunulan bir eğitim içeriğidir. Fatih, Protel'de yazılım geliştiricisi olarak çalışmakta, C: Istanbul Org topluluğuna üyesidir ve "Modern JavaScript" adlı bir kitabın yazarıdır. Video, atomik tasarım kavramını, tasarım tarihindeki gelişim sürecini ve Brad Frost'un bu kavramı sistematikleştirmesini anlatmaktadır. İçerikte atomik tasarımın temel prensipleri (atom, molekül, organizma, şablon), style guide kavramı ve tasarım dilinin önemi detaylı olarak ele alınmaktadır. Ayrıca, React, Vue.js ve Angular gibi farklı framework'lerde komponent yapısının nasıl uygulanabileceği ve dosya dizin yapısının nasıl ayarlanacağı konuları da işlenmektedir. Videoda ayrıca tasarım analizi süreci Instagram örneği üzerinden gösterilmekte, kendi şirketinde geliştirilen bir style guide örneği paylaşılmakta ve atomik tasarımın iş akışını nasıl değiştirdiği anlatılmaktadır. Son bölümde ise Suat Bey ile yapılan bir teknik sohbet formatında dosya dizin yapısı hakkında bilgiler paylaşılmaktadır.

      • youtube.com

    • Angular ve Vue.js'te Ürün Silme İşlemi Eğitimi

      Bu video, bir eğitmen tarafından sunulan Angular ve Vue.js uygulamalarında ürün silme işlemi yapma konulu bir eğitim serisidir. Eğitmen, izleyicilerden gelen dönütler sayesinde bir hatayı fark etmiş ve bu hatayı düzeltmektedir. Videoda, delete direktifinin sadece product servisi üzerinden silme işlemi yaptığı için evrensel bir silme işlemi yapabilmek için yapılan düzeltme anlatılmaktadır. Eğitmen, direktifin artık herhangi bir entiteye dair delete işlemlerini yürüteceği için HTTP client servisi üzerinden istekler yapacağını göstermekte ve controller parametresi üzerinden daha esnek hale getirmektedir. Ayrıca videoda, silme işlemi sırasında spinner kullanımı, hata yönetimi ve başarılı mesaj gösterme işlemleri de gösterilmektedir. Eğitmen, bir sonraki derste dosya yükleme (upload) işlemi ile ilgilenileceğini ve bununla ilgili bir direktif tasarlanacağını belirtmektedir.

      • youtube.com

    • Vue.js'te Mutation Kullanarak Yeni Link Ekleme Eğitimi

      Bu video, bir eğitim içeriği olup, izleyicilere Vue.js framework'ünde mutation kullanarak yeni link ekleme işlemini adım adım göstermektedir. Video, store.cs dosyasında "add-link" adlı bir mutation oluşturma ile başlıyor. Ardından app.vue dosyasında form oluşturma, buton ekleme ve v-model kullanarak input ile veri bağlama işlemleri gösteriliyor. Son olarak, form submit edildiğinde mutation'ın nasıl çalıştırılacağı ve linkler state'ine yeni link eklenmesi anlatılıyor. Video, oluşturulan butonun stilini değiştirme ve link ekleme işleminin başarıyla çalıştığını gösteren bir test ile sonlanıyor.

      • youtube.com
  • Yazeka sinir ağı makaleleri veya videoları özetliyor