Vue - The Complete Guide (incl. Router & Composition API)

بيت
الدورات
Vue - The Complete Guide (incl. Router & Composition API)

تطوير البرمجيات / تطوير الشبكة

Vue - The Complete Guide (incl. Router & Composition API)

Vue.js is an awesome JavaScript Framework for building Frontend Applications

0.00 0 المراجعة (المراجعة)

0 الطلاب المسجلين

متوسط

الإنكليزية

Naomi Sipes

Vue - The Complete Guide (incl. Router & Composition API)

تتضمن هذه الدورة:

37ح 11م
345 محاضرات
380 الأصول القابلة للتحميل
الوصول الكامل مدى الحياة
الوصول على الهاتف المحمول والتلفزيون
شهادة عند الانتهاء

بسعر فقط JOD693.00

تسجيل الآن

المفضله

ملخص

ماذا سيتعلم الطلاب في الدورة الخاصة بك؟

Build amazing Vue.js Applications - all the Way from Small and Simple Ones up to Large Enterprise-level Ones
Understand the Theory behind Vue.js and use it in Real Projects
Leverage Vue.js in both Multi- and Single-Page-Applications (MPAs and SPAs)
Learn the latest version of Vue (Vue 3), including the brand-new Composition API

ما هي المتطلبات أو المتطلبات الأساسية لأخذ الدورة الخاصة بك؟

الذي هو بطبيعة الحال ل؟

وصف

علامات الدورة

محتوى الدورة

29 الأقسام
345 محاضرات
37ح 11م الطول الاجمالي

قسم 1

Getting Started

وقت 1ح 22م

محاضرات 12

اظهار الكل

Welcome to the Course!

معاينة 0:03:41

What is "Vue.js"?

معاينة 0:03:41

Different Ways of Using Vue

معاينة 0:03:41

Exploring Vue Alternatives

معاينة 0:03:41

Building A First App With Just JavaScript

0:09:13

Join our Online Learning Community

0:07:30

Re-building the App with Vue

0:09:13

Vue vs "Vanilla JavaScript" (just JavaScript)

0:09:13

Setting Up the Course Development Environment

0:09:13

Course Outline & What's In The Course

0:07:30

How To Get The Most Out Of This Course

0:06:12

Module Resources

0:09:13

قسم 2

Basics & Core Concepts - DOM Interaction with Vue

وقت 3ح 24م

محاضرات 30

اظهار الكل

Module Introduction

0:06:54

Creating and Connecting Vue App Instances

0:07:30

Interpolation and Data Binding

0:03:41

Binding Attributes with the "v-bind" Directive

0:06:12

Understanding "methods" in Vue Apps

0:03:41

Working with Data inside of a Vue App

0:06:12

Outputting Raw HTML Content with v-html

0:06:54

A First Summary

0:09:13

Time to Practice: Data Binding

0:06:54

Understanding Event Binding

0:06:12

Events & Methods

0:06:12

Working with Event Arguments

0:07:30

Using the Native Event Object

0:09:13

Exploring Event Modifiers

0:03:41

Locking Content with v-once

0:06:54

Time to Practice: Event Binding

0:07:30

Data Binding + Event Binding = Two-Way Binding

0:09:13

Methods used for Data Binding: How It Works

0:09:13

Introducing Computed Properties

0:06:12

Working with Watchers

0:03:41

Methods vs Computed Properties vs Watchers

0:07:30

v-bind and v-on Shorthands

0:07:30

Time to Practice: Reactivity

0:07:30

Dynamic Styling with Inline Styles

0:06:12

Adding CSS Classes Dynamically

0:09:13

Classes & Computed Properties

0:07:30

Dynamic Classes: Array Syntax

0:06:54

Time to Practice: Dynamic Styling

0:03:41

Module Summary

0:09:13

Module Resources

0:06:54

قسم 3

Rendering Conditional Content & Lists

وقت 1ح 23م

محاضرات 12

اظهار الكل

Module Introduction

0:06:12

Understanding the Problem

0:06:54

Rendering Content Conditionally

0:03:41

v-if, v-else and v-else-if

0:06:54

Using v-show Instead Of v-if

0:09:13

Rendering Lists of Data

0:09:13

Diving Deeper Into v-for

0:07:30

Removing List Items

0:06:12

Lists & Keys

0:07:30

Time to Practice: Conditional Content & Lists

0:03:41

Module Summary

0:07:30

Module Resources

0:09:13

قسم 4

Course Project: The Monster Slayer Game

وقت 58م

محاضرات 9

اظهار الكل

Module Introduction

0:07:30

Project Setup & First Methods

0:06:54

Updating the Health Bars

0:09:13

Adding a "Special Attack"

0:09:13

Adding a "Heal" Functionality

0:06:54

Adding a "Game Over" Screen

0:03:41

Finishing the Core Functionality

0:03:41

Adding a Battle Log

0:07:30

Module Resources

0:03:41

قسم 5

Vue: Behind the Scenes

وقت 1ح 04م

محاضرات 10

اظهار الكل

Module Introduction

0:03:41

An Introduction to Vue's Reactivity

0:09:13

Vue Reactivity: A Deep Dive

0:06:54

One App vs Multiple Apps

0:03:41

Understanding Templates

0:07:30

Working with Refs

0:09:13

How Vue Updates the DOM

0:06:54

Vue App Lifecycle - Theory

0:03:41

Vue App Lifecycle - Practice

0:06:54

Module Resources

0:06:54

قسم 6

Introducing Components

وقت 36م

محاضرات 6

اظهار الكل

Module Introduction

0:07:30

Understanding the Problem

0:09:13

Introducing Components

0:06:12

The Why: Building Complex User Interfaces With Components

0:03:41

Multiple Vue Apps vs Multiple Components

0:06:12

Module Resources

0:03:41

قسم 7

Moving to a Better Development Setup & Workflow with the Vue CLI

وقت 1ح 28م

محاضرات 16

اظهار الكل

Module Introduction

0:06:12

Why We Need A Development Server

0:06:12

Why We Want A Better Developer Experience

0:07:30

Fixing npm run serve (Vue CLI)

0:06:12

Installing & Using the Vue CLI

0:07:30

Inspecting the Created Project

0:06:12

Inspecting the Vue Code & ".vue" Files

0:06:12

Adding the "Vetur" Extension to VS Code

0:03:41

Component Communication

وقت 2ح 06م

محاضرات 18

اظهار الكل

Module Introduction

0:06:54

Introducing "Props" (Parent => Child Communication)

0:07:30

Prop Behavior & Changing Props

0:07:30

Validating Props

0:06:12

Supported Prop Values

0:07:30

Working with Dynamic Prop Values

0:06:54

Emitting Custom Events (Child => Parent Communication)

0:06:54

Defining & Validating Custom Events

0:09:13

Prop / Event Fallthrough & Binding All Props

0:03:41

Demo: Adding Components & Connecting Them

0:06:54

Demo: Adding More Component Communication

0:06:54

Time to Practice: Props & Custom Events

0:06:54

A Potential Problem

0:07:30

Provide + Inject To The Rescue

0:03:41

Provide + Inject for Functions / Methods

0:09:13

Provide + Inject vs Props & Custom Events

0:06:12

Module Summary

0:07:30

Module Resources

0:09:13

قسم 9

Diving Deeper Into Components

وقت 1ح 45م

محاضرات 18

اظهار الكل

Module Introduction

0:09:13

Project Setup

0:09:13

Global vs Local Components

0:03:41

Scoped Styles

0:09:13

Introducing Slots

0:03:41

Named Slots

0:06:12

Slot Styles & Compilation

0:03:41

Course Project: The Learning Resources App

وقت 1ح 28م

محاضرات 14

اظهار الكل

Module Introduction

0:09:13

Setup & First Steps

0:07:30

First Components & Props

0:06:12

Styling and More Components

0:06:54

Header & BaseCard Components

0:07:30

Adding a Base Button

0:09:13

Dynamic Components & Attribute Fallthrough

0:03:41

Adding & Styling Tabs

0:06:12

Adding a Form

0:03:41

Fetching User Input

0:03:41

Adding a Modal Dialog

0:06:54

Deleting Items

0:03:41

Adding "Teleport"

0:07:30

Module Resources

0:06:54

قسم 11

Forms

وقت 1ح 04م

محاضرات 10

اظهار الكل

Module Introduction

0:07:30

v-model & Inputs

0:09:13

Working with v-model Modifiers and Numbers

0:03:41

v-model and Dropdowns

0:07:30

Using v-model with Checkboxes & Radiobuttons

0:06:12

Adding Basic Form Validation

0:07:30

Building a Custom Control Component

0:06:12

Using v-model on Custom Components

0:06:12

Module Summary

0:03:41

Module Resources

0:06:54

قسم 12

Sending Http Requests

وقت 1ح 36م

محاضرات 15

اظهار الكل

Module Introduction

0:06:54

Starting App & Why we need a Backend

0:03:41

Adding a Backend

0:07:30

How To (Not) Send Http Requests

0:03:41

Sending a POST Request to Store Data

0:03:41

Http Requests & Http Methods (Verbs)

0:06:54

Using Axios Instead Of "fetch()"

0:07:30

Getting Data (GET Request) & Transforming Response Data

0:09:13

Loading Data When a Component Mounts

0:07:30

Showing a "Loading..." Message

0:07:30

Handling the "No Data" State

0:06:12

Handling Technical / Browser-side Errors

0:09:13

Handling Error Responses

0:06:12

Module Summary

0:03:41

Module Resources

0:06:54

قسم 13

Routing: Building "Multi-Page" Single Page Applications

وقت 2ح 30م

محاضرات 26

اظهار الكل

Module Introduction

0:07:30

What & Why?

0:09:13

Routing Setup

0:06:12

Registering & Rendering Routes

0:03:41

Navigating with router-link

0:03:41

Styling Active Links

0:03:41

Programmatic Navigation

0:09:13

Passing Data with Route Params (Dynamic Segments)

0:06:12

Navigation & Dynamic Paths

0:06:12

A Vue Bug

0:03:41

Updating Params Data with Watchers

0:03:41

Passing Params as Props

0:07:30

Redirecting & "Catch All" Routes

0:03:41

Using Nested Routes

0:06:54

More Fun with Named Routes & Location Objects

0:03:41

Using Query Params

0:03:41

Rendering Multiple Routes with Named Router Views

0:03:41

Controlling Scroll Behavior

0:07:30

Introducing Navigation Guards

0:06:12

Diving Deeper Into Navigation Guards

0:07:30

The Global "afterEach" Guard

0:07:30

Beyond Entering: Route Leave Guards

0:06:54

Utilizing Route Metadata

0:06:12

Organizing Route Files

0:06:54

Summary

0:06:12

Module Resources

0:03:41

قسم 14

Animations & Transitions

وقت 2ح 16م

محاضرات 19

اظهار الكل

Module Introduction

0:07:30

Animation Basics & CSS Transitions

0:09:13

Understanding CSS Animations

0:06:12

Why Is "Just CSS" Not Enough?

0:09:13

Playing CSS Animations with Vue's Help

0:06:12

Using the Transition Component

0:07:30

CSS Animations with the Transition Component

0:06:54

Using Custom CSS Class Names

0:06:54

Example: Animating a Modal

0:03:41

Transitioning Between Multiple Elements

0:09:13

Using Transition Events

0:06:12

Building JavaScript Transitions (instead of CSS)

0:07:30

Disabling CSS Transitions

0:06:12

Getting Started with Animated Lists

0:06:54

Animating Lists with "transition-group"

0:06:12

Animate List Item Movement

0:06:54

Animating Route Changes

0:09:13

An Important Note on Animated Route Changes

0:07:30

Module Resources

0:07:30

قسم 15

Vuex

وقت 2ح 30م

محاضرات 21

اظهار الكل

Module Introduction

0:09:13

What & Why?

0:09:13

Creating & Using a Store

0:06:54

Connecting Components to State

0:06:54

Introducing Mutations - A Better Way of Changing Data

0:06:54

Passing Data to Mutations with Payloads

0:03:41

Introducing Getters - A Better Way Of Getting Data

0:07:30

Running Async Code with Actions

0:09:13

Understanding the Action "Context"

0:06:12

Using Mapper Helpers

0:06:12

Example: Adding More State

0:06:12

Organizing your Store with Modules

0:09:13

Understanding Local Module State

0:06:12

Namespacing Modules

0:06:54

Structuring Vuex Code & Files

0:07:30

A Challenge!

0:09:13

Challenge Solution (1/3)

0:03:41

Challenge Solution (2/3)

0:09:13

Challenge Solution (3/3)

0:06:12

Summary

0:06:54

Module Resources

0:07:30

قسم 16

Main Project: "Find a Coach" Web App

وقت 3ح 26م

محاضرات 29

اظهار الكل

Module Introduction

0:06:12

Planning the Project / Web App

0:06:12

Planning the Data Requirements

0:06:12

Planning the Layout / Components

0:03:41

Registering Routes

0:09:13

Adding Route Page Components

0:03:41

Working on the Main Layout & Styling

0:06:12

Wiring Up Pages

0:09:13

Adding Vuex and Coach Data

0:09:13

Working on the Coaches List and List Items

0:07:30

Adding a Couple of Base Components (Base Card, Base Button, Base Badge)

0:07:30

Building the Coach Detail Component

0:09:13

Filtering Coaches

0:07:30

Registering as a Coach: The Form

0:06:54

Adding Coaches to Vuex

0:07:30

Adding Form Validation

0:06:54

Working on the Contact Form

0:07:30

Storing Requests (Messages) With Vuex

0:07:30

Outputting Incoming Requests (Messages)

0:09:13

Filtering Requests for the Active Coach

0:06:54

Sending a PUT Http Request to Store Coach Data

0:06:54

Fetching Coach Data (GET Http Request)

0:06:54

Rendering a Loading Spinner

0:03:41

Adding Http Error Handling

0:07:30

Sending Coaching Requests Http Requests

0:07:30

Caching Http Response Data

0:07:30

Adding Route Transitions

0:06:54

The "Not Found" Page & Summary

0:09:13

Module Resources

0:06:12

قسم 17

Vue & Authentication

وقت 1ح 33م

محاضرات 16

اظهار الكل

Module Introduction

0:06:12

How Authentication Works in Vue Apps (or any SPA)

0:06:54

Locking / Protecting Backend Resources

0:03:41

Adding an Authentication Page (Login & Signup)

0:06:54

Preparing Vuex

0:06:54

Adding a "Signup" Action & Flow

0:06:54

Better UX: Loading Spinner & Error Handling

0:06:12

Adding a "Login" Action & Flow

0:07:30

Attaching the Token to Outgoing Requests

0:03:41

Updating the UI Based on Auth State

0:09:13

Adding a "Logout" Action & Flow

0:07:30

Authentication & Routing (incl. Navigation Guards)

0:03:41

Adding "Auto Login"

0:06:54

Adding "Auto Logout"

0:03:41

Summary

0:03:41

Module Resources

0:03:41

قسم 18

Optimizing & Deploying Vue Apps

وقت 50م

محاضرات 7

اظهار الكل

Module Introduction

0:07:30

What To Deploy?

0:09:13

Optimization: Using Asynchronous Components

0:09:13

Note: Async Components & Routing

0:06:54

Building the Project For Production

0:06:54

Deploying a Vue App

0:03:41

Module Resources

0:07:30

قسم 19

The Composition API - Replacing the Options API

وقت 2ح 45م

محاضرات 27

اظهار الكل

Module Introduction

0:03:41

Which Problem Does The Composition API Solve?

0:06:54

Replacing "data" with "refs"

0:03:41

Replacing the setup() Method

0:03:41

Building "reactive" Objects

0:06:12

Reactivity: A Deep Dive

0:06:54

Replacing "methods" with Regular Functions

0:07:30

Time to Practice: Data & Functions

0:06:54

Replacing "Computed Properties" with the "computed" Function

0:03:41

Two-Way-Binding and the Composition API

0:06:54

Working with Watchers

0:09:13

Time to Practice: Composition API Core Building Blocks

0:07:30

A First Summary

0:06:54

How To Use Template Refs

0:03:41

Components, Props & The Composition API

0:06:12

Emitting Custom Events

0:06:12

Working with Provide/ Inject

0:07:30

Lifecycle Hooks in the Composition API

0:07:30

Migrating from Options API to Composition API - An Example Project

0:06:54

Migrating a First Component

0:09:13

Migrating a Big Component

0:03:41

Migrating the Remaining Components

0:06:54

Routing, Params & The Composition API

0:03:41

The Route & Router Objects and the Composition API

0:07:30

Using Vuex with the Composition API

0:09:13

Summary

0:03:41

Module Resources

0:03:41

قسم 20

Reusing Functionality: Mixins & Custom Composition Functions

وقت 1ح 25م

محاضرات 14

اظهار الكل

Module Introduction

0:06:54

Reusability Concepts

0:09:13

Using Mixins

0:03:41

Understanding Mixin Merging

0:06:54

Global Mixins

0:06:54

Disadvantages of Mixins

0:03:41

Custom Hooks / Composables & The Composition API

0:03:41

More Custom Composition Functions

0:06:54

Why Hooks / Composables Beat Mixins

0:03:41

Example: Creating a "Search" Hook

0:06:12

Custom Hooks Gotchas

0:09:13

More Thoughts on Custom Hooks / Composables

0:03:41

Example: A Custom "Sort" Hook

0:07:30

Module Resources

0:06:54

قسم 21

Roundup & Next Steps

وقت 15م

محاضرات 2

اظهار الكل

Thanks for being part of the course!

0:06:12

Course Roundup & Next Steps

0:09:13

قسم 22

Vue 2 to Vue 3 Migration

وقت 26م

محاضرات 5

اظهار الكل

Vue 3 - Overview

0:06:12

Important Changes & Migration Steps

0:06:12

Vue 3: New Features

0:03:41

The New Composition API (Optional!)

0:03:41

Further Migration Resources

0:06:54

قسم 23

Learn Vue 2 | Old Course Content

وقت 06م

محاضرات 1

اظهار الكل

قسم 24

Getting Started [VUE2]

وقت 06م

محاضرات 1

اظهار الكل

قسم 25

Using VueJS to Interact with the DOM [VUE2]

وقت 16م

محاضرات 3

اظهار الكل

Time to Practice - Events

0:06:54

Time to Practice - Reactive Properties

0:03:41

Time to Practice - Styling

0:06:12

قسم 26

Using Conditionals and Rendering Lists [VUE2]

وقت 03م

محاضرات 1

اظهار الكل

قسم 27

An Introduction to Components [VUE2]

وقت 07م

محاضرات 1

اظهار الكل

قسم 28

Communicating between Components [VUE2]

وقت 03م

محاضرات 1

اظهار الكل

قسم 29

حول المعلم

Naomi Sipes

4.20 (10 التعليقات)

الدورات 1

سيرة شخصية

مرحبا جميعا! أنا نعومي سايبس وبدأت عملي كمصرفي، لكن رغبتي القوية في تدريس اللغات دفعتني إلى تغيير مهنتي. لقد قمت بتدريس لغات متعددة مثل الألمانية والعبرية والفنلندية. لدي شهادة جامعة كامبريدج في تدريس اللغة. مدرسة اللغات ، في رأيي ، هي تفاعل ثري للأفراد يبني الحب المتبادل وقبول الاختلافات في المجتمع.

التقييمات والمراجعات

0.00

0 التعليقات

Vue - The Complete Guide (incl. Router & Composition API)

Vue.js is an awesome JavaScript Framework for building Frontend Applications

تتضمن هذه الدورة:

شارك هذه الدورة

ملخص

ماذا سيتعلم الطلاب في الدورة الخاصة بك؟

ما هي المتطلبات أو المتطلبات الأساسية لأخذ الدورة الخاصة بك؟

الذي هو بطبيعة الحال ل؟

وصف

علامات الدورة

محتوى الدورة

Getting Started

Basics & Core Concepts - DOM Interaction with Vue

Rendering Conditional Content & Lists

Course Project: The Monster Slayer Game

Vue: Behind the Scenes

Introducing Components

Moving to a Better Development Setup & Workflow with the Vue CLI

Component Communication

Diving Deeper Into Components

Course Project: The Learning Resources App

Forms

Sending Http Requests

Routing: Building "Multi-Page" Single Page Applications

Animations & Transitions

Vuex

Main Project: "Find a Coach" Web App

Vue & Authentication

Optimizing & Deploying Vue Apps

The Composition API - Replacing the Options API

Reusing Functionality: Mixins & Custom Composition Functions

Roundup & Next Steps

Vue 2 to Vue 3 Migration

Learn Vue 2 | Old Course Content

Getting Started [VUE2]

Using VueJS to Interact with the DOM [VUE2]

Using Conditionals and Rendering Lists [VUE2]

An Introduction to Components [VUE2]

Communicating between Components [VUE2]

More Content

حول المعلم

Naomi Sipes

سيرة شخصية

التقييمات والمراجعات