Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
Vue JS
Vue JS 3: Composition API (with Pinia, Firebase 9 & Vite)

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

Loại khoá học: Web Development

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

image
50.000 VND
1.499.000 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

If you’re already familiar with Vue 2 & The Options API, then this course will teach you everything you need to know to switch over to (and get started with) Vue 3 & the amazing new Composition API.

My name’s Danny, I’m an Indie App Developer & Creator of Fudget, the highest rated personal finance app for iOS, Android, Mac & Windows.

And I’ve spent the last 12 months creating Fudget 2 - which is built on Vue 3 & The Composition API.

In this course you’ll start by learning the key differences between the Options API & Composition API by creating a simple Options API app & converting it to the Composition API.

You’ll then master all of the basics including:

  • Reactive data with Refs & Reactive Objects

  • Methods, Computed Properties & Watchers

  • Lifecycle Hooks

  • Directives

  • Vue Router

  • Child Components - including the new ways of handling props, emits & modelValue

  • Dynamic Components

  • Composables - how to create them from scratch & how to import them from the VueUse library

  • And you’ll learn State Management using Pinia, the incredible successor to Vuex

After learning the basics, you’re gonna create a real world app called Noteballs from scratch - which has full CRUD capabilities, uses Pinia for State Management and demonstrates real-world use of all the basics you learned earlier.


FIREBASE 9 UPDATE (JUN 2022):

The course has been updated with 3 hours of new content on Firebase 9, where we will:

  • Hook Noteballs up to a Firebase Cloud Firestore database

  • Add Authentication, so that multiple users can register, login and log out of our app

  • Add Realtime Data Sync, so that if a user adds a note on one device, they'll see the note instantly appear on another device

  • Add Firebase Security Rules to protect our users' data

  • Host our finished app on Firebase Hosting so that we can share it with anyone


After this course, you’ll be able to create your own Vue 3 apps based entirely on the Composition API - from scratch.

This course requires a basic understanding of Vue 2 & The Options API, HTML, CSS & JavaScript.


Please check out the preview videos & I look forward to seeing you in the course.

Bạn sẽ học được gì

How to switch over from Vue 2 & Options API to Vue 3 & Composition API

Core differences between Options API & Composition API

State Management using Pinia

Create a real-world app from scratch with Vue 3, Composition API, Pinia & Vite

Firebase 9, including Cloud Firestore, Authentication & Security Rules

Yêu cầu

  • Basic understanding of Vue 2 & Options API
  • Basic understanding of HTML, CSS & JavaScript

Nội dung khoá học

24 sections

Introduction

4 lectures
Introduction
08:02
What is the Composition API?
05:36
Editor & Software Setup
07:44
Vue Devtools
02:07

Getting Started

4 lectures
Vue 3 Docs & Install Node.js
01:05
Create a Vue Project
02:38
Project Setup
03:43
Finished Source Code
00:22

Options API vs Composition API - Switching Over

6 lectures
Options API - Design
01:34
Options API - Data & Methods
01:59
Convert it to Composition API
01:27
Composition API - Data (refs) & Methods
03:20
Script Setup - An Easier Way!
02:51
Finished Source Code
00:22

Refs, Reactive Objects & Non-Reactive Data

5 lectures
Refs
01:27
Two-Way Data Binding
01:31
Reactive Objects
02:59
Non-Reactive Data
01:20
Finished Source Code
00:22

Methods, Computed & Watch

5 lectures
Methods
03:40
Computed Properties
04:14
A Note on Filters
01:32
Watch
03:41
Finished Source Code
00:22

Lifecycle Hooks

5 lectures
Mounted Hooks
04:18
Activated Hooks
02:00
Updated Hooks
01:31
Multiple Hooks!
02:12
Finished Source Code
00:22

Directives

3 lectures
Local Custom Directives
03:48
Global Custom Directives
02:50
Finished Source Code
00:22

Vue Router

5 lectures
$route - Part 1
03:49
$route - Part 2
03:21
useRoute
02:40
useRouter
03:29
Finished Source Code
00:22

Lists, Teleport, Template Refs & nextTick

6 lectures
Lists (v-for)
02:53
Template Refs
03:03
nextTick
01:51
Teleport - Part 1
04:23
Teleport - Part 2
03:21
Finished Source Code
00:22

Child Components, Props & Emits

12 lectures
Child Components
02:51
Fix Lazy-Loading Views
01:35
Slots
03:34
Props
03:51
Emits
03:52
modelValue
02:24
update:modelValue
02:38
Dynamic Components - Part 1
02:46
Dynamic Components - Part 2
02:19
Provide / Inject - Part 1
04:10
Provide / Inject - Part 2
03:13
Finished Source Code
00:22

Composables

6 lectures
What is a Composable?
04:54
Create a Composable
02:39
Use Our Composable
03:26
Reuse our Composable
04:15
Add Composable from VueUse
03:27
Finished Source Code
00:22

State Management with Pinia

8 lectures
What is State Management?
05:34
Composable State vs Vuex vs Pinia
05:02
State - Part 1
02:41
State - Part 2
05:41
Actions
03:40
Getters
02:42
Use our Store Anywhere
02:22
Finished Source Code
00:22

Noteballs: Setup & Router

7 lectures
Introduction & Noteballs App
02:06
Create Project
02:14
Router - Install & Setup
03:02
Router - Add Some Routes
04:00
Add RouterView & Navigation
01:50
Router - Tidying Up
02:19
Finished Source Code
00:22

Noteballs: Bulma & Design

8 lectures
Install Bulma
03:09
Nav Bar - Design
02:46
Nav Bar - Navigation & Logo
02:53
Nav Bar - Responsive Design & Menu
05:05
Pages (Design)
02:04
Notes (Design)
01:51
Add Note Form (Design)
02:30
Finished Source Code
00:22

Noteballs: Data, Methods, Child Components, Computed & Emit

7 lectures
Notes Array (Ref)
02:37
Add Note Method
08:59
Child Component - Note
02:32
Props (Note)
01:34
Computed (Note Length)
05:45
Delete Note (Emit)
06:24
Finished Source Code
00:22

Noteballs: Pinia, Reusable Components, Router & More

16 lectures
Pinia - Setup & State
04:20
Use Our Store
03:40
Action - Add Note
03:47
Action (with Parameters) - Add Note
02:38
Action - Delete Note
05:15
Edit Note Page & Route
04:38
Reusable Component - AddEditNote
03:57
Hook up with modelValue
05:32
Fix the Focus
05:04
Custom Color, Placeholder & Label Props
10:31
Getter - Get Note Content (useRoute)
05:35
Getter (with Parameters) - Get Note Content
03:09
Action - Update Note
06:24
useRouter - Redirect to Notes Page
01:20
More Getters & Stats Page
07:33
Finished Source Code
00:22

Noteballs: Directives, Watchers & Composables

7 lectures
Directive - Autofocus
02:07
Global Directive - Autofocus
02:57
Watch the Number of Characters (Watch)
02:10
Composable - useWatchCharacters
04:24
Composable - Multiple Parameters
02:48
Click Outside Composable (VueUse, Template Refs)
06:10
Finished Source Code
00:22

Noteballs: Delete Modal

6 lectures
Delete Modal Design (Reactive Objects)
07:19
Hide the Delete Modal (modelValue & update:modelValue)
05:21
Delete Modal - Click Outside to Close
03:34
Delete Modal - Keyboard Control (Lifecycle Hooks)
06:18
Delete Modal - Delete The Note
04:57
Finished Source Code
00:22

Firebase 9: Introduction & Setup

5 lectures
Introduction to Firebase
03:29
Create a Firebase Project
01:46
Create App & Install Firebase
02:03
Setup Firestore Database
02:35
Connect to Database
02:23

Firebase 9: Read, Add, Delete, Update & Order

10 lectures
Display Notes from Firestore
07:17
Get Notes in Real Time
07:49
Add Note
06:21
Delete Note
02:36
Update Note
05:05
Order Notes by Date (ID)
05:32
Improve Document Structure & Auto ID’s
05:25
Display Date on Note
09:37
Add a Progress Bar
04:54
Show Placeholder when No Notes
02:08

Firebase 9: Authentication

9 lectures
Login & Register Page - Tabs
07:29
Login & Register Page - Form
08:31
Firestore Authentication & Auth Store
03:40
Register User
07:04
Logout User
02:24
Login User
03:25
Listen for Auth Changes & Store User Data
07:50
Improve Logout Button
04:03
Redirect User on Auth Change
05:23

Firebase 9: Multiple Users

4 lectures
Restructure Database for Multiple Users
05:42
Setup Refs for Multiple Users
07:17
Clear Notes array in State when user logs out
04:11
Unsubscribe from the Get Notes Listener
08:53

Firebase 9: Security & Hosting

6 lectures
Navigation Guards - Part 1
03:48
Navigation Guards - Part 2
04:46
Firestore Security Rules - Part 1
03:30
Firebase Security Rules - Part 2
05:19
Hosting - Part 1
06:17
Hosting - Part 2
04:07

Bonus Lectures

1 lectures
Bonus Lecture
02:22

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

Master Network Automation with Python for Network Engineers

Master Network Automation with Python for Network Engineers

1.699.000 VND
50.000 VND
Unity Mobile Game Development - Exterminator

Unity Mobile Game Development - Exterminator

1.499.000 VND
50.000 VND
Mastering CSS Grid 2023 - With 3 cool projects

Mastering CSS Grid 2023 - With 3 cool projects

99 VND
50.000 VND
Django 3 - Full Stack Websites with Python Web Development

Django 3 - Full Stack Websites with Python Web Development

1.699.000 VND
50.000 VND
Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

95 VND
50.000 VND
Appium - Mobile Testing with Latest 2.0 and Live Projects

Appium - Mobile Testing with Latest 2.0 and Live Projects

70 VND
50.000 VND
Deep Learning for Object Detection with Python and PyTorch

Deep Learning for Object Detection with Python and PyTorch

899.000 VND
50.000 VND
Full Android Development Masterclass | 14 Real Apps-46 Hours

Full Android Development Masterclass | 14 Real Apps-46 Hours

1.699.000 VND
50.000 VND
Go Java Full Stack with Spring Boot and Angular

Go Java Full Stack with Spring Boot and Angular

90 VND
50.000 VND
Machine Learning Practical Workout | 8 Real-World Projects

Machine Learning Practical Workout | 8 Real-World Projects

79 VND
50.000 VND
WordPress 2024: The Complete WordPress Website Course

WordPress 2024: The Complete WordPress Website Course

90 VND
50.000 VND
Android App Development Master Course with Java | Android

Android App Development Master Course with Java | Android

99 VND
50.000 VND
Unreal Engine 5: Soulslike Melee Combat System

Unreal Engine 5: Soulslike Melee Combat System

1.399.000 VND
50.000 VND
ASP.NET Core Web Application Using Razor Pages

ASP.NET Core Web Application Using Razor Pages

1.699.000 VND
50.000 VND
Build Undetectable Malware Using C Language: Ethical Hacking

Build Undetectable Malware Using C Language: Ethical Hacking

75 VND
50.000 VND
Angular - The Complete Guide (2024 Edition)

Angular - The Complete Guide (2024 Edition)

120 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi