Giriş
Giriş
Neler Öğreneceğiz ?
Nedir Bu VueJS
Vuejs Avantajları
VueJS Kullanan Bazı Firmalar
Neden VueJS Kullanmalıyız ?
VueJS Two Way Data Binding & Component & Virtual Dom
Bilgilendirme Telegram
NodeJs Kurulumu
Vuejs Giriş
Vue Cli Kurulumu
Package.json Nedir ?
Vue Class Kullanımı İlk Bakış
Vue Style Kullanımı İlk Bakış
Vue Değişken Kullanımı İlk Bakış
Vuejs DOM İşlemleri
Nedir Bu Template ?
Nedir Bu Script ?
Nedir Bu Style ?
Interpolation & Data Binding
Attribute Binding
Directive Nedir ?
Event Dinleme
Event Verisini Almak
Eventlere Parametre Gönderme
Event Modifier
Template İçerisinde Javascript Yazmak
Two-way Data Binding
VueJS Directives
v-html
v-text
v-once
v-show
v-if & v-else-if & v-else
v-for
v-model
v-on
v-pre
v-memo
Custom directive
Vue Plugins
Vue Plugini Oluşturalım
Nedir Bu Data Objesi
Data Objesine Bakalım ?
VueJS Style İşlemleri
Dinamik Class
Dinamik Style İşlemleri
Listeler & Koşullu İfadeler
Listelerin Render Etmek
Listelerde Koşullu İfadeleri Kullanalım
Listelerdeki Verileri Fonksiyonlara Gönderelim
Listeden Eleman Silelim
Belirli Bir Sayıya Kadar Liste Oluşturalım
İç İçe Liste Kullanma
Objeleri Render Edelim
Vue Instance Yakın Bakış
Vuejs Instance Yakından Bakalım
Birden Fazla Instance İle Çalışmak
Instancelar Arası Veri Kullanmak
Component Oluşturma ve Propslar
İlk Component
Daha Fazla Component !
Global Component
Propslar İle Veri Aktarımı
Props Validasyonu
Custom Validation & Array & Function Props
Propsları fonksiyonlarda kullanma
Componentler Arası Veri İletişimi Alttan Üste
Provide Inject Yöntemi İle Veri Gönderme
Componentleri Birleştirelim (Örnek Uygulama)
Nested Component Oluşturma
Slots
Slot Kullanımı
Named Slots
Named Slots Example
Dynamic Components
Dinamik Componentler Oluşturma
Keep Alive
Activated & Deactivated
Teleport !
Teleport Component
VueJS LifeCycles
Nedir bu lifecycles
BeforeCreate & Created
beforeMount & mounted
beforeUpdate & updated
beforeUnMount & unmounted
Child componentlerde LifeCycles
Watch & Computed & Refs
Refs
Multiple Refs
Computed
Watch
Uygulama 1
Uygulama Tanıtım
Uygulama !
Form Elemanlarıyla Çalışmak
Tailwind Css Entegrasyonu
Input oluşturalım
Textarea & Buton oluşturalım
Select oluşturalım
Checkbox & Radio oluşturalım
Custom File input oluşturalım
User Input Bind
Dinamik Select Option Bind
Dinamik Checkbox Bind
File Bind & Dinamik Radio Bind
Form Gönderme İşlemi
Kendi Componentimize v-model bağlayalım
Basit Form Validasyonu
Dinamik Form Input Oluşturma
Vuejs Async Component
Async Component Kullanımı
Animation & Transation
Animasyon Giriş
İsimlendirilmiş Animasyon
TransationGroup
Css isimlendirmesi ve Duration
Animasyon Methotları
Reusable Transation Component
Gsap Kurulum
Gsap İlk Animasyon
Gsap Animasyon Örnekleri
Mixin
Mixin Nedir & Neden Mixin Oluşturmalıyız ?
Mixin Oluşturalım
Global Mixin Oluşturma
$NextTick Kavramı
$Nexttick nedir ?
HTTP İşlemleri
Fetch ile Get Request
Liste Tasarımı Oluşturma
Componentlerimizi Oluşturalım
Liste Render
Loading İşlemi
Hata Durumu
Post Oluşturma
Post Silme
Fetch Yerine Axios Kullanalım
Json server ile kendi serveremizi oluşturalım
Uygulama 2
Uygulama Tanıtım !
Nasa Api Register
Welcome Component
List & Input & Loading
Kartları Render Edelim !
Routing
Vue Cli ile Beraber Router Kurulum
Router İlk Bakış
Router Oluşturma
Router View & Router Link
Router Link Aktif Class & Replace
Router View Grid Örneği
Kod İle Yönlendirme İşlemleri
Route Sensitive & Params
Query & Hash & Params
404 & Path Match
Route Parametre Kontrolleri
Nested Routers
Named Router Views
Alias & Redirects
Scroll Kontrol Edelim
Dinmaik Router Ekleme , Silme , Listeme , Kontrol Etme
Lazy Load Routers !
Routers Meta
Router Meta Örnek Kullanım
Router Guard
Global Router Guard
Router Layoutları Oluşturalım
State Management VUEX
Vuex Nedir ? Neden Vuex Kullanmalıyız ?
Cli ile beraber Vuex Kurulumu
State Oluşturma
Vuex Mimarisinin Uygulanması
State & Commit & Getter Erişelim
MapState
MapGetters
MapMutations
MapActions
Vuex Modules
Named Modules
Store'a dışarıdan erişelim & Strict !
Plugins
Vuejs Developer Tools
Vuex Async Action
Uygulama 3
Uygulama Tanıtım
Uygulama Api Kaynağı
Router Kurulumu & Sayfaların Oluşturulması
Header
Sepet Context
Filtreleme Bileşenleri
Filtreleme & Sort
Product Card & Listeleme
Product Detail
Vuex Kurulumu & State Oluşturulması
Basket Önizleme
Sepete Ekle
Sepet Kontrolü & Sepetten Eleman Silme
Sepet Düzenleme & Sepet Önizleme
Vue Paketleri
Awesome Vue Packages !
Vuelidate ile Form Validasyonu
Vuelidate Paketinin Kurulması
İlk Validasyon & Form Oluşturma
Touch & Dirty & $Model
Daha Fazla Validasyon
Hata Durumlarına Göre Stillendirme İşlemi
Hata Mesajları Gösterimi
Hata Mesajlarını Özelleştirme
Kod İle Validator Çalıştırmak & Validasyonu Sıfırlamak
Array Validasyonu
Custom Validator
Async Validator
Auth İşlemleri
Firebase Proje Oluşturma
Auth Yöntemi Ayarlanması
Signup İşlemi
Login İşlemi
Vue Router Kurulum
Vuex Kurulum
Bootstrap Kurulum
Temel Layoutların Oluşturulması
Auth Form Oluşturulması
Form Validasyonu ve Class Bind İşlemleri
Register Sayfası Oluşturulması
Sayfalarımızı Koruyalım
Register & Login & Vuex
Protected Sayfalara Giriş
Token'ı Storage Kayıt Edelim
Otomatik Logout İşlemi
Vue Config & Build İşlemleri
Vue Config !
Env Files
Preview Build
Deploy GithubPages
Deploy Vercel
Deploy Netlify
Deploy Firebase
Dockerize Vue App
Vuetify
Vuetify Giriş Kurulum
Alert
Banner & Badge & Avatar
Button & Breadcrumbs
Card & Carousel
Chips & Color Picker
Grid & Expansion Panel
Button & Chip Group
Icon & V Hover
Lazy & Image
List & Pagination
Rating & Progress
Sheets & Snackbars
Table & Tabs & Toolbar
Dialogs & Menus & Tooltips
AppBars & Bottom Navigation & Footers & Navigation Drawers & System Bars
AutoComplate & Checkbox & Combobox
Select & Radio & Fileinput
Slider & RangeSlider & Switches
TextArea & TextField & Forms
Directives !
Vue i18 Kullanımı
Vue i18n Kurulum
Html Ekleme & Parametre Ekleme & Kod İle Dile Erişim
Local 18n & Obje Syntax
Mevcut Dil & Kullanılabilir Diller & Dil Değiştirme
Dil Dosyasını Ayıralım
v-t Directive
Component Interpolation
Component Interpolation Template Syntax
Vue & Webpack
Webpack ile Proje Oluşturma & Konfigurasyonlar
Vue & Vite
Vite ile Proje Oluşturma & Konfigurasyonlar
Bonus Temel Typescript
Typescript Nedir ? Neden Kullanmalıyız
Typescript Temel Özellikleri
Vue & Typescript
Vite & Typescript !
Vue & Storybook
StoryBook Nedir & Neden Kullanmalıyız & Kurulum
Storybook Default Componentlerin İncelenmesi
İlk Story
Switcher Bileşeni ve Story Özelliklerine Bakış
Composition API
Composition Api
Setup & Ref
Reactive
isRef & toRef & isReactive
Component Defination
Props
Emits
Element Ref !
Computed
Watch
Custom Directive
Hooks !
Daha Fazla Custom Hooks !
LifeCycles
Vue Router
Vuex
Alternatif State Management Yöntemi Pinia
Vite & Typescript
Vue Vitest!
Bonus : Vitest ile Test
Uygulama 4
Uygulama Tanıtım !
Proje oluşturulması & Vuetify Kurulumu
Router Kurulum
Vuex Kurulum
Firebase Proje Oluşturma
Firebase Entegrasyonu
Auth Layout
Signin Page
Signin & Signup Page
Signin Model & Validasyon İşlemleri
Signup & Users Koleksiyonu Oluşturulması
Signin & User Koleksiyonun Okunması
Main Layout Düzenlemesi
Sidebar Liste Elemanlarının Eklenmesi
Sidebar Menülerin Yönlendirilmesi & Route Tanımları
CreateProduct Sayfası Template Kodlaması
CreateProduct Sayfası Koleksiyon Oluşturma & Validasyon & Storage
Product Oluşturma & Auth Bilgilerinin Store İçerisine Yazılması
Home Sayfası Template Kodlaması
Home Sayfası Listeleme & Paylaş & Favoriler & Kayıt edilenler
Home Sayfası Favorilere Ekleme & Kayıt Edilenlere Ekleme
Detay Sayfasının Oluşturulması
Ürün Detay Sayfası & Verilerin Göstermi & Favori ve Kayıt Edilenlere Ekleme
Kategoriler Sayfası
Kategorilere Ait Ürünleri Listeleme
Favorilerim Sayfası
Kaydedilen Ürünler Sayfası
Ürünlerim Sayfası & Dosya Silme & Ürün Silme
Ürün Düzenleme & Dosya Ekleme, Silme & Ürünü Satıldı İşaretleme
Satılan Ürünler Sayfası
Header Menü Düzenlemesi & Logout
Route Guard & Hook Örneği !
Bonus : Nuxtjs
Nuxtjs Kurulum
Neden Nuxtjs Kullanmalıyız Fark Nedir ?
İlk Bakış & Component Tanımlama
Pages & Router
Layouts
Meta Tags
Vuex
Fetch Data