Vue JS 3: Composition API (with Pinia, Firebase 9 & Vite)

سرفصل های دوره

Already know the Options API? Switch over to the Composition API as quickly as possible! (Oh, and Pinia & Firebase 9!)

01 - Introduction

001 Introduction

002 What is the Composition API

003 Editor & Software Setup

004 Vue Devtools

02 - Getting Started

001 Vue 3 Docs & Install Node.js

002 Create a Vue Project

003 Project Setup

004 Finished Source Code.html

03 - Options API vs Composition API - Switching Over

001 Options API - Design

002 Options API - Data & Methods

003 Convert it to Composition API

004 Composition API - Data (refs) & Methods

005 Script Setup - An Easier Way!

006 Finished Source Code.html

04 - Refs, Reactive Objects & Non-Reactive Data

001 Refs

002 Two-Way Data Binding

003 Reactive Objects

004 Non-Reactive Data

005 Finished Source Code.html

05 - Methods, Computed & Watch

001 Methods

002 Computed Properties

003 A Note on Filters

004 Watch

005 Finished Source Code.html

external-links.zip

06 - Lifecycle Hooks

001 Mounted Hooks

002 Activated Hooks

003 Updated Hooks

004 Multiple Hooks!

005 Finished Source Code.html

07 - Directives

001 Local Custom Directives

002 Global Custom Directives

003 Finished Source Code.html

08 - Vue Router

001 $route - Part 1.encrypted.m4a

001 $route - Part 1.encrypted

002 $route - Part 2.encrypted.m4a

002 $route - Part 2.encrypted

003 useRoute

004 useRouter

005 Finished Source Code.html

09 - Lists, Teleport, Template Refs & nextTick

001 Lists (v-for)

002 Template Refs

003 nextTick

004 Teleport - Part 1

005 Teleport - Part 2

006 Finished Source Code.html

10 - Child Components, Props & Emits

001 Child Components

002 Fix Lazy-Loading Views

003 Slots

004 Props

005 Emits

006 modelValue

007 updatemodelValue

008 Dynamic Components - Part 1

009 Dynamic Components - Part 2

010 Provide Inject - Part 1

011 Provide Inject - Part 2

012 Finished Source Code.html

11 - Composables

001 What is a Composable

002 Create a Composable

003 Use Our Composable

004 Reuse our Composable

005 Add Composable from VueUse

006 Finished Source Code.html

external-links.zip

12 - State Management with Pinia

001 What is State Management

002 Composable State vs Vuex vs Pinia

003 State - Part 1

004 State - Part 2

005 Actions

006 Getters

007 Use our Store Anywhere

008 Finished Source Code.html

external-links.zip

13 - Noteballs Setup & Router

001 Introduction & Noteballs App

002 Create Project

003 Router - Install & Setup

004 Router - Add Some Routes

005 Add RouterView & Navigation

006 Router - Tidying Up

007 Finished Source Code.html

14 - Noteballs Bulma & Design

001 Install Bulma

002 Nav Bar - Design

003 Nav Bar - Navigation & Logo

004 Nav Bar - Responsive Design & Menu

005 Pages (Design)

006 Notes (Design)

007 Add Note Form (Design)

008 Finished Source Code.html

15 - Noteballs Data, Methods, Child Components, Computed & Emit

001 Notes Array (Ref)

002 Add Note Method

003 Child Component - Note

004 Props (Note)

005 Computed (Note Length)

006 Delete Note (Emit)

007 Finished Source Code.html

16 - Noteballs Pinia, Reusable Components, Router & More

001 Pinia - Setup & State

002 Use Our Store

003 Action - Add Note

004 Action (with Parameters) - Add Note

005 Action - Delete Note

006 Edit Note Page & Route

007 Reusable Component - AddEditNote

008 Hook up with modelValue

009 Fix the Focus

010 Custom Color, Placeholder & Label Props

011 Getter - Get Note Content (useRoute)

012 Getter (with Parameters) - Get Note Content

013 Action - Update Note

014 useRouter - Redirect to Notes Page

015 More Getters & Stats Page

016 Finished Source Code.html

17 - Noteballs Directives, Watchers & Composables

001 Directive - Autofocus

002 Global Directive - Autofocus

003 Watch the Number of Characters (Watch)

004 Composable - useWatchCharacters

005 Composable - Multiple Parameters

006 Click Outside Composable (VueUse, Template Refs)

007 Finished Source Code.html

18 - Noteballs Delete Modal

001 Delete Modal Design (Reactive Objects)

002 Hide the Delete Modal (modelValue & updatemodelValue)

003 Delete Modal - Click Outside to Close

004 Delete Modal - Keyboard Control (Lifecycle Hooks)

005 Delete Modal - Delete The Note

006 Finished Source Code.html

19 - Firebase 9 Introduction & Setup

001 Introduction to Firebase

002 Create a Firebase Project

003 Create App & Install Firebase

004 Setup Firestore Database

005 Connect to Database

20 - Firebase 9 Read, Add, Delete, Update & Order

001 Display Notes from Firestore

002 Get Notes in Real Time

003 Add Note

004 Delete Note

005 Update Note

006 Order Notes by Date (ID)

007 Improve Document Structure & Auto IDs

008 Display Date on Note

009 Add a Progress Bar

010 Show Placeholder when No Notes

21 - Firebase 9 Authentication

001 Login & Register Page - Tabs

002 Login & Register Page - Form

003 Firestore Authentication & Auth Store

004 Register User

005 Logout User

006 Login User

007 Listen for Auth Changes & Store User Data

008 Improve Logout Button

009 Redirect User on Auth Change

22 - Firebase 9 Multiple Users

001 Restructure Database for Multiple Users

002 Setup Refs for Multiple Users

003 Clear Notes array in State when user logs out

004 Unsubscribe from the Get Notes Listener

23 - Firebase 9 Security & Hosting

001 Navigation Guards - Part 1

002 Navigation Guards - Part 2

003 Firestore Security Rules - Part 1

004 Firebase Security Rules - Part 2

005 Hosting - Part 1

006 Hosting - Part 2

24 - Bonus Lectures

001 Bonus Lecture

45,900 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy-Training