Vue 3 - Dersleri 41
Youtube üzerinden paylaştığım ücretsiz eğitimler.
Vue3 ile TypeScript Kullanımı - Giriş
TypeScript is JavaScript with syntax for types. https://www.typescriptlang.org Using Vue with TypeScript https://vuejs.org/guide/typescript/overview.html
Vue 3 Reactivity - ref vs reactive
Reactivity Fundamentals https://vuejs.org/guide/essentials/reactivity-fundamentals.html Bu videonun sesi digerlerine gore daha mi iyi daha mi kotu? Geri bildirimde bulunursaniz sevinirim.
Vite Nedir?
Vite Next Generation Frontend Tooling https://vitejs.dev
Vue 3 Dersleri - Giriş ve Geliştirme Ortamı
Bu videoda, Vue 3 ile ilk uygulamanızı nasıl oluşturacağınızı ve geliştirme ortamınızı nasıl kuracağınızı öğreneceksiniz. Videoda aşağıdaki konular yer alıyor. 00:00 - Giriş 00:28 - Vue 3 Uygulaması Oluşturma 02:00 - Proje Yapısı 04:30 - Volar (VSCode Vue 3 eklentisi) 05:50 - Kullandığım VSCode teması 06:11 - Terminal (command line, cmd) 06:37 - Vue 3 Uygulamasını çalıştırmak 07:25 - Vue 3 Uygulamasını build almak Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Dersleri - Proje Yapısı
Bu videoda, Vue 3 proje yapısına göz atıyoruz. Hangi klasörde ne var, hangi klasörü ne için kullanıyoruz.. 00:00 - Giriş 00:30 - Assets Klasörü 00:55 - Path Alias nedir? 03:40 - Components Klasörü 04:20 - Router Klasörü 05:37 - Stores (Pinia) Klasörü 06:02 - Views Klasörü 08:47 - Diğer klasörler Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Dersleri - Options Vs Composition API
Bu videoda Options ve Composition API yi karşılaştırıyoruz. Artıları, eksileri ve hangisini ne zaman kullanmalıyız bu sorulara cevap arıyoruz. 00:00 - Giriş 01:00 - Options Api 03:26 - Composition Api 05:50 - Composition Api - Script Setup 07:00 - Options ve Composition Api nin karşılaştırılması. Avantajlar, dezavantajlar, hangisini kullanlamalıyız vs.. Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Dersleri - Template
Vue deki Template notasyonuna göz atıyoruz. Script içerisinde tanımlanan değişkenlerin, fonksiyonların template içerisinde nasıl kullanıldığını, ve daha fazlasına değiniyoruz. 00:00 Giriş 00:50 Template içinden script içerisindeki değişken ve fonksiyonlara erişme 01:33 Raw HTML in render edilmesi (v-html) 03:43 Binding (v-bind) 05:11 Binding Shorthand (v-bind:href - :href) 05:23 Boolean attribute 06:41 Falsy - https://developer.mozilla.org/en-US/docs/Glossary/Falsy 07:43 v-if 08:05 v-for 09:12 v-if 10:50 Vue2 ve Vue3 template arasındaki en temel fark Root element Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Dersleri - Reactivity (ref, reactive, watch ve computed)
00:00 Giriş 00:30 Reaktiv ne demek? 01:00 ref() 02:50 reactive() 04:47 TypeScript types 05:35 ref ve reactive arasındaki farklar https://www.youtube.com/watch?v=i0n3eVhripY 06:00 watch() 07:27 computed() Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Dersleri - List Rendering (v-for)
00:00 Giriş 01:15 v-for - array 02:12 key 03:00 v-for - object 04:53 v-if Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Dersleri - Form Input Bindings (v-model)
00:00 Giriş 00:52 v-model - Two Way Binding - input - textbox 01:58 textare 02:30 checkbox 03:10 radio 03:44 selectbox - dropdown 06:25 checkbox list Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Dersleri - Event Handling - Template Refs - Class and Style Bindings
00:00 Giriş 00:10 Event Handling 04:24 Life Cycle 05:42 Template Ref 07:04 Class & Style Binding 11:46 Style Scoped Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Eklentileri - FormKit - Eklentiler Nasıl Kullanılır?
Popüler form kütüphanesi olan FormKit i tanıyoruz ve Vue 3 e nasıl eklenti (plugin) eklenir ve kullanılır bunu öğreniyoruz. 00:00 Giriş 01:30 FormKit paketlerini varolan Vue projesine ekleme 03:00 Vue projemizde FormKit i kullanabilmek için gerekli ayarlar 03:34 İlk FormKit örneğini yapıyoruz 05:14 Vue projesine eklenen pluginlerin organizasyonu 09:10 FormKit Schema (şema) Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Dersleri - Composable
00:00 Giriş 00:45 Örneğe giriş (tarayıcı genişliğine göre breakpointlerin hesaplanması (responsive helper)) 06:22 Yaptığımız örneği composable bir fonksiyon haline getiriyoruz Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Dersleri - Components
00:00 Giriş 01:04 İlk componentimizi oluşturuyoruz 02:40 Global import 03:40 Props Declaration (dışardan parametre almak) 05:50 Emitting Event (event handling) 08:17 Slot Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Dersleri - Router - Routing
Vue 3 de sayfalar arası geçişleri kontrol eden Router mekanızmasına göz atıyoruz. 00:00 Başlangıç 03:00 RouterLink 04:00 Route mekanızması nasıl çalışıyor (RouterView) 04:45 Router Lazy Loading Component 06:50 Url deki bilgilere nasıl erişilir? (query string) 08:05 Router Metadata 08:55 Router Navigation Guard Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Eklentileri - VueUse
Her daim elimizin altında bulunması gereken özellikleri ayağımıza getiren VueUse kütüphanesini inceliyoruz.
Vue 3 Dersleri - Fetch Api ile Http Request
Vue 3 ile JavaScript Fetch Api sini kullanıp HTTP Get Requesti yapıyoruz, aldığımız datayı ekranda gösteriyoruz ve sonrasında basit bir useFetch örneği yapıyoruz. 00:00 Başlangıç 00:40 Fetch Api ile bir end pointe get request yapmak (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 05:50 Composable useFetch implemantasyonu 08:10 Loading olayı 09:35 Error handling 10:55 Aldığımız Json bilgisini template içinde gösteriyoruz (render ediyoruz) 12:25 TypeScript ile Generic useFetch (https://www.typescriptlang.org/docs/handbook/2/generics.html) Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Dersleri - State Management - Pinia
Vue nun resmi state management kütüphanesi olan Vuex i tahtından eden Pinia yı kullanarak, uygulamamızın state ini yönetiyoruz. 00:00 Giriş 00:40 Option Stores & Setup Stores Tanımlamaları 01:28 Pinia yı projemize ekliyoruz 01:40 State Nedir? 03:43 İlk Store tanımlamamız - proje içinde gelen örnek (counterStore) 04:10 Store u kullanma 06:58 Örnek bir store implementasyonu (shoppingCardStore) Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Eklentileri - Axios
JavaScript dünyasının en popüler HTTP kütüphanelerinden biri olan Axios u Vue 3 projemizde kullanıyor ve pratiklere göz atıyoruz. Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Eklentileri - Ant Design Vue
Vue için yazılımış en popüler UI kütüphanelerinden biri olan Ant Desing a göz atıyoruz. 00:00 Giriş Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Dersleri - Pinia ile Authentication Senaryosu
Bu video da Vue 3 de fake bir Authentication senaryosunu gerçekleştiriyoruz. Basit bir fake auth servisi yazıyoruz ve Pinia ile login, logout aksiyonların ve mevcut kullanıcının bilgilerini yönetiyoruz. Router tarafında da auth zorunlu hale getiriyoruz. UYARI: Video da değinmedim fakat ideal dünya da bu şekilde bir auth kullanımı güvenlik sorunları sebebiyle olamaz :) Bu içerikte anlatılmak istenen, ilgili olayın Vue tarafında nasıl yönetildiğidir. 00:00 Giriş 00:30 Yapacağımız auth örneği için bir diagram çiziyor ve planlama yapıyoruz 03:00 Auth servisini yapıyoruz 08:40 useAuthStore (pinia) u yapıyoruz 10:35 Login View i yapıyoruz 15:14 Router da kullanıcının Auth olup olmadığının kontrolünü yapıyoruz 20:18 Örneğimizi çalıştırıyoruz. Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Dersleri - Supabase ile Authentication Senaryosu
Bir önceki videoda yaptığımız Authentication senaryosuna (https://www.youtube.com/watch?v=7JdpdU4sSuU) Supabase Auth u entegre ediyor ve gerçek dünyada bu olayın nasıl gerçekleştiğine göz atıyoruz. Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Dersleri - Layout Tasarımı ve Yönetimi
"Layout" (düzen), genel olarak bir tasarımın veya belgenin düzeni, yerleşimi veya konumu anlamına gelir. Web geliştirme bağlamında, "layout" terimi genellikle bir web sayfasının veya uygulamasının görsel düzenini, bileşenlerin yerleşimini ve genel görünümünü ifade eder. Web sayfası düzeni, kullanıcı deneyimini etkileyen önemli bir unsurdur. İyi bir düzen, kullanıcıların içeriği rahatça okumalarına, gezinmelerine ve etkileşimde bulunmalarına olanak tanır. 00:00 Giriş - Layout Nedir? 02:10 Ant Design daki layoutlardan bir tanesini seçip uygulamamıza uyarlıyoruz 03:56 MasterLayout ve LoginLayout adında iki farklı layout oluşturuyoruz 04:33 App.vue yu routingden gelen bilgiye göre layoutu seçecek hale getiriyoruz Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Dersleri - Async Components
Async Component Nedir? Async component, Vue uygulamalarında dinamik olarak yüklenen bileşenleri ifade eder. Bunu kullanarak, uygulamanın başlangıcında tüm bileşenleri yüklemek yerine, ihtiyaç duyulduğunda yükleyebilir ve böylece başlangıç performansını artırabilirsiniz. Neden Kullanmalıyız? Büyük uygulamalarda, tüm bileşenleri başlangıçta yüklemek, kullanıcılara uzun bekleme süreleri yaşatabilir. Async component kullanmak, sadece gerekli olduğunda bileşenleri yükleyerek bu bekleme sürelerini azaltır. 00:00 Giriş 00:40 Componenti async olarak yükleyecek olan componentimizi yapıyoruz. (ComponentLoader) 02:26 ComponentLoader i dışarıdan yükleyeceği componentin bilgisini alacak şekle getiriyoruz. 06:00 Async Componentin bize sağladığı avantajlara bakıyoruz 07:38 Async Componentin loading, error, timeout gibi özelliklerinden bahsediyoruz 09:10 Uygulamanın buildini alıp, async componentin sağladığı faydalara bakıyoruz 10:10 Layout videosunda (https://www.youtube.com/watch?v=z7C4RLG_mMA) yaptığımız mekanızmayı refactor edip async componentli hale getiriyoruz. 11:15 Layout sisteminin async componentli olduğu versiyonun pozitif yönlenlerine bakıyoruz Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Dersleri - Build App
Vue 3 uygulamasının buildini nasıl alıyoruz? Build; kaynak kodunun tarayıcılar tarafından daha hızlı ve verimli bir şekilde çalıştırılabilmesi için optimize edilmiş, minify edilmiş ve sıkıştırılmış bir sürümünü oluşturma sürecidir. Bu süreç, geliştirme aşamasında kullanılan kaynak dosyalarını (örneğin, Vue bileşenleri, stil dosyaları, resimler) daha küçük boyutlu, tarayıcı dostu ve performans odaklı bir formata dönüştürerek web uygulamanızın kullanıcılarına daha hızlı bir deneyim sunmanıza yardımcı olur. Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Dersleri - Katalog - Gerçek Dünya Uygulaması - Bölüm 1
00:00 Giriş 00:40 Kullanacağımız araçlar (Supabase, Antdesign) 01:24 Backend - Frontend Nedir? 05:30 Uygulama tasarımı (Veritabanı ve Layout) Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Dersleri - Katalog - Gerçek Dünya Uygulaması - Bölüm 2
Gerçek dünya örneği olarak basit bir katalog (e-ticaret) sistemi yapıyoruz. İçerisinde kategori, ürün listesi ve ilgili ürünleri sepete ekleme / güncelleme / silme gibi aksiyonlar bulunuyor. Bu uygulamayı yaparken kurs boyunca öğrendiğimiz tüm bilgileri uyguluyoruz. Geliştirdiğimiz uygulamanın reposuna şuradan ulaşabilirsiniz; https://github.com/apoStyLEE/vue-course-catalogapp 00:00 Supabase de Veritabanı tablolarını oluşturuyoruz 06:27 Uygulamamızdan oluşturduğumuz tablolardan verilere erişiyoruz 08:55 Antdesign dan kullanacağımız layout u seçiyoruz 10:52 Kategorileri ekliyoruz 15:00 Kategorilere ait ürünleri listeleyeceğimiz sayfayı yapıyoruz 33:20 Sepete ürün ekleme mekanızmasını yapıyoruz 41:35 Sepetimizdeki ürünleri gösterecek sayfayı yapıyoruz 52:57 Sepetteki ürünü silme olayını yapıyoruz 57:25 Sepetteki ürünlerin toplam fiyatını gösteren alt toplam kısmını yapıyoruz 1:01:03 Sepetteki ürünlerin miktarını güncellemeyi yapıyoruz Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Dersleri - Katalog - Gerçek Dünya Uygulaması - Bölüm 3
Önceki bölümde geliştirdiğimiz katalog uygulamasını düzenliyoruz (refactor) ediyoruz. Geliştirdiğimiz uygulamanın reposuna şuradan ulaşabilirsiniz; https://github.com/apoStyLEE/vue-course-catalogapp Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 Dersleri - Katalog - Gerçek Dünya Uygulaması - Bölüm 4 - SON
Bazı bölümleri component haline getirip, görsel olarak bazı düzenlemeler yapıyoruz. Geliştirdiğimiz uygulamanın reposuna şuradan ulaşabilirsiniz; https://github.com/apoStyLEE/vue-course-catalogapp Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3.4 Güncellemesi ile Gelen Yenilikler. (defineModel, v-bind Same-name Shorthand)
Vue 3.4 ile gelen önemli değişikliklere göz atıyoruz. Announcing Vue 3.4 https://blog.vuejs.org/posts/vue-3-4 Component v-model https://vuejs.org/guide/components/v-model.html
Vue ile Tailwind CSS, Headless UI ve Hero Icons Konusuna Giriş Yapıyoruz
Bu videoda web dünyasının popüler frameworklerinden biri olan Tailwind CSS ve onun en yakın arkadaşları Headless UI, Hero Icons üçlüsüne göz atıyoruz.
Vue 3 UI Kit - PrimeVue
The Next-Gen UI Suite for Vue.js - http://primevue.org Tailwind CSS Based UI Component Library for Vue.js - https://tailwind.primevue.org
React Vue Karşılaştırma - Hangisi Sizin İçin Daha Uygun?
React.js 101 - https://youtu.be/tm4wYXdvszk Konsepte odaklaniyoruz. Vue ile SwiftUI ne kadar benzer olabilir? - https://youtu.be/KdzOQbWdZOo Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
React ve Vue Hakkında Soru Cevap Videosu
React Vue Karşılaştırma - Hangisi Sizin İçin Daha Uygun? (https://youtu.be/zmiuevQJkRs) Adındaki videoya gelen yorumları cevaplıyorum, sonrasında da biz neden Vue yu seçtik bunu anlatıyorum. Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue 3 ile Data Fetching Hiç Bu kadar Kolay Olmamıştı!
00:00 Giriş 01:00 Vue ile Geleneksel Fetch işlemi (axios ile) 03:10 DataProvider componentini oluşturuyoruz 04:00 Componentin içerisine slot koyuyoruz, bu slot üzerinden dışarıya nasıl bilgi çıkarıp kullanıyoruz, buna bakıyoruz. 04:40 Fetch işlemini DataProvider içinden yapacak hale getiriyoruz 06:00 DataProvider componentini, verdiğimiz url i fetch edecek şekle getiriyoruz. 07:28 DataProvider componentinin özelliklerini zenginleştiriyoruz. Yükleniyor (loading) mekanızması ekliyoruz. 12:14 DataProvider componentini global component olarak projemize ekliyoruz. 12:55 İlgili request için parametre nasıl gönderiyoruz? 14:20 Debug modu ekliyoruz 15:55 Parametreler değiştiğinde yeniden request yapıp bilgileri güncelliyoruz. (reactivity) Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue İçin Kendi Cache Pluginimizi Yazıyoruz. Cache Nedir?
Bu videoda bir çok konuya değindik, bazı başlıklar şu şekilde; - Vue ya nasıl plugin yazılır? - Inject / Provide Mekanızması nasıl kullanılır? - Cache nedir? - Nasıl kendi cache mekanızmamızı yazarız? 00:00 Giriş 00:20 Önceki videoda yaptığımız DataProvider (https://youtu.be/DXVcPZlOY6s) componentini gözden geçiriyoruz. 01:00 Vue Cache Plugin imizi yazmaya başlıyoruz. 13:20 Cache Pluginimize options ekliyoruz. Memory ve localstorage seçeneklerini ekleyip implement ediyoruz. Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Vue ve Nuxt Videolarına Gelen Yorumları Cevaplıyorum - 01
Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Front-End Yol Haritası - Zamansız
- Temeller - JavaScript - Temel mekanızmalar - Dom nedir? - Fetch / Ajax (XHR) - Frameworks - Vue - React - Angular - Svelte - HTML - Varsayılan davranışlar - Form - Div - P - Semantic ne demek? - Header - Article - Footer - Nav - CSS - Layout Nedir? - Frameworks - Tailwind CSS - Bootstrap - Diğer - Paket yönetici nedir? - Tarayıcı Nedir? - Http - Cookie - Local Storage - Data Nedir? - JSON - XML - Database - Git - (github, gitlab) - Geliştirme Ortamı - ESLint - Prettier - Vite - Webpack - package.json - Seçim Nasıl Yapılır? - Framework - Herhangi bir şey
Http Nedir? Tarayıcılar Nasıl Çalışır? Cookie, Local - Session Storage Nedir?
00:00 Giriş 00:15 Http nedir? 01:15 Developer tools ile Network sekmesinden Request / Response u gözlemliyoruz. 04:00 Http Methodları Nelerdir? GET, POST, DELETE, PUT 04:55 Http Status Kodları. 200, 404, 403, 401, 500 06:58 Http protokolünün versiyonları 07:35 Tarayıcılar nasıl çalışır? Html, Render, JavaScript Engine 09:50 Content Type, Mime Type Nedir? 14:00 Chromium Nedir? 14:30 Local Storage Nedir? Key / Value Database 16:00 Session Storage Nedir? 16:45 Cookie Nedir? 18:00 Cookie Güvenliği, Http Only Ne demek? Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Docker Nedir? Nasıl Kullanılır? Front-End geliştiriciler kullanmalı mı?
Önceki docker videolarım; Docker - Giriş https://www.youtube.com/watch?v=pxXOsDzLr9I Docker - Image & Compose https://www.youtube.com/watch?v=nl9BztQGpno 00:00 Giriş - Docker Nedir? 01:22 Sanallaştırma nedir? Sanallaştırma teknolojileri nelerdir? 03:25 Docker hub nedir? 05:40 Docker Compose nedir? 06:20 Docker Desktop 06:40 Image, Container, Volume nedir? Bunları öğreniyoruz Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee
Cursor - AI Code Editor
The AI Code Editor - https://www.cursor.com Kanalıma Katılıp Destek Olabilirsiniz - https://www.youtube.com/channel/UCOj-Jss7W9LnMbj51sOZLUQ/join Tanışmak için kaydolabilirsiniz https://superpeer.com/apostylee/-/tanisma?s=d Bana bu kanallardan da ulaşabilirsiniz; https://twitter.com/apostylee https://instagram.com/apostylee