Vue.js, kullanıcı arayüzleri geliştirmek için kullanılan interaktif bir front-end kütüphanesidir. 2018 Temmuz sonunda Github'da 108 bin yıldızla React ve Angular'ı geçti. Sade ve anlaşılır bir dökümantasyona sahiptir
Vue can be tried directly in Playground or JSFiddle. Create Vue application using create-vue command with Node.js 18.3+. Recommended IDE is Visual Studio Code with Vue extension
Vue is a JavaScript framework for building user interfaces. It provides declarative rendering and automatic DOM updates. Basic HTML, CSS, and JavaScript knowledge is required
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.
v-for directive renders lists based on array items using special syntax. Template expressions have access to all parent scope properties. Optional second alias for current item index available. Can use "of" instead of "in" delimiter
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.
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.
Template refs allow direct DOM element access after component mount. Refs are accessible through this.$refs after component mount. Refs can be accessed using useTemplateRef() helper in v3.5+
Vue.js is used by major websites including Behance, Nintendo, and Gitlab. Install Tailwind CSS and Flowbite using Vite. Configure Tailwind.config.js and import CSS files. Require Flowbite as plugin in tailwind.config.js
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.
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.
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.
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.
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.
Bu video, bir eğitim serisinin parçası olup, konuşmacı Vue.js kullanarak frontend uygulaması geliştirme sürecini anlatmaktadır.. Video, Vue.js'in kurulumundan başlayarak, Node.js ve npm paket yöneticisinin önemi, Vue.js CLI'nin kurulumu ve bir Vue.js projesi oluşturma sürecini göstermektedir. Ayrıca, Vue.js'in temel komutları (start, build, lint), dependency'leri ve proje yapısı detaylı olarak anlatılmaktadır. Eğitim, mikro servis mimarisi ve birden fazla programlama dili kullanılarak geliştirilen bir alışveriş sitesi örneği üzerinden ilerlemektedir.. Konuşmacı, bir sonraki bölümde veritabanı kurulumu ve frontend'de component oluşturma konularına değineceğini belirtmektedir. Video, TypeScript ile geliştirilen kodların JavaScript'e dönüştürülmesi ve bu JavaScript'in index.js dosyası üzerinden nasıl çalıştırıldığı konusunda temel bilgiler sunmaktadır.
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.