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

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

Desarrollo de Software / Web Development

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

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

0.00 0 Reseña(s)

0 Estudiantes matriculados

Intermedio

English

Naomi Sipes

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

Este curso incluye:

38h 19metro
345 conferencias
380 Activos descargables
Acceso completo de por vida
Acceso En Móvil Y Tv
Certificado al finalizar

A Precio Justo De $693.00

Enlístate ahora

Favorito

Descripción general

¿Qué aprenderán los estudiantes en su curso?

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

¿Cuáles son los requisitos o prerrequisitos para tomar su curso?

¿Para quién es el curso?

Descripción

Etiquetas del curso

Contenido del curso

29 Secciones
345 conferencias
38h 19metro Largo total

Sección 1

Getting Started

Tiempo 1h 14metro

conferencias 12

Ver todo

Welcome to the Course!

Avance 0:07:30

What is "Vue.js"?

Avance 0:07:30

Different Ways of Using Vue

Avance 0:06:54

Exploring Vue Alternatives

Avance 0:06:12

Building A First App With Just JavaScript

0:03:41

Join our Online Learning Community

0:06:12

Re-building the App with Vue

0:06:12

Vue vs "Vanilla JavaScript" (just JavaScript)

0:03:41

Setting Up the Course Development Environment

0:03:41

Course Outline & What's In The Course

0:09:13

How To Get The Most Out Of This Course

0:06:54

Module Resources

0:06:54

Sección 2

Basics & Core Concepts - DOM Interaction with Vue

Tiempo 3h 17metro

conferencias 30

Ver todo

Module Introduction

0:07:30

Creating and Connecting Vue App Instances

0:07:30

Interpolation and Data Binding

0:03:41

Binding Attributes with the "v-bind" Directive

0:07:30

Understanding "methods" in Vue Apps

0:06:54

Working with Data inside of a Vue App

0:06:12

Outputting Raw HTML Content with v-html

0:07:30

A First Summary

0:03:41

Time to Practice: Data Binding

0:09:13

Understanding Event Binding

0:03:41

Events & Methods

0:06:12

Working with Event Arguments

0:03:41

Using the Native Event Object

0:06:54

Exploring Event Modifiers

0:07:30

Locking Content with v-once

0:06:12

Time to Practice: Event Binding

0:06:12

Data Binding + Event Binding = Two-Way Binding

0:06:54

Methods used for Data Binding: How It Works

0:09:13

Introducing Computed Properties

0:06:12

Working with Watchers

0:06:12

Methods vs Computed Properties vs Watchers

0:07:30

v-bind and v-on Shorthands

0:09:13

Time to Practice: Reactivity

0:07:30

Dynamic Styling with Inline Styles

0:07:30

Adding CSS Classes Dynamically

0:03:41

Classes & Computed Properties

0:06:54

Dynamic Classes: Array Syntax

0:06:12

Time to Practice: Dynamic Styling

0:09:13

Module Summary

0:07:30

Module Resources

0:03:41

Sección 3

Rendering Conditional Content & Lists

Tiempo 1h 23metro

conferencias 12

Ver todo

Module Introduction

0:07:30

Understanding the Problem

0:09:13

Rendering Content Conditionally

0:07:30

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

0:06:12

Using v-show Instead Of v-if

0:06:12

Rendering Lists of Data

0:06:12

Diving Deeper Into v-for

0:07:30

Removing List Items

0:06:54

Lists & Keys

0:06:54

Time to Practice: Conditional Content & Lists

0:09:13

Module Summary

0:03:41

Module Resources

0:06:12

Sección 4

Course Project: The Monster Slayer Game

Tiempo 1h 05metro

conferencias 9

Ver todo

Module Introduction

0:09:13

Project Setup & First Methods

0:06:54

Updating the Health Bars

0:03:41

Adding a "Special Attack"

0:07:30

Adding a "Heal" Functionality

0:06:54

Adding a "Game Over" Screen

0:09:13

Finishing the Core Functionality

0:06:12

Adding a Battle Log

0:09:13

Module Resources

0:06:54

Sección 5

Vue: Behind the Scenes

Tiempo 1h 02metro

conferencias 10

Ver todo

Module Introduction

0:07:30

An Introduction to Vue's Reactivity

0:09:13

Vue Reactivity: A Deep Dive

0:06:54

One App vs Multiple Apps

0:07:30

Understanding Templates

0:07:30

Working with Refs

0:06:12

How Vue Updates the DOM

0:03:41

Vue App Lifecycle - Theory

0:06:12

Vue App Lifecycle - Practice

0:03:41

Module Resources

0:03:41

Sección 6

Introducing Components

Tiempo 38metro

conferencias 6

Ver todo

Module Introduction

0:09:13

Understanding the Problem

0:03:41

Introducing Components

0:06:12

The Why: Building Complex User Interfaces With Components

0:06:54

Multiple Vue Apps vs Multiple Components

0:03:41

Module Resources

0:09:13

Sección 7

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

Tiempo 1h 34metro

conferencias 16

Ver todo

Module Introduction

0:06:12

Why We Need A Development Server

0:03:41

Why We Want A Better Developer Experience

0:09:13

Fixing npm run serve (Vue CLI)

0:06:54

Installing & Using the Vue CLI

0:07:30

Inspecting the Created Project

0:09:13

Inspecting the Vue Code & ".vue" Files

0:06:12

Adding the "Vetur" Extension to VS Code

0:03:41

Component Communication

Tiempo 1h 58metro

conferencias 18

Ver todo

Module Introduction

0:09:13

Introducing "Props" (Parent => Child Communication)

0:03:41

Prop Behavior & Changing Props

0:09:13

Validating Props

0:03:41

Supported Prop Values

0:06:54

Working with Dynamic Prop Values

0:07:30

Emitting Custom Events (Child => Parent Communication)

0:03:41

Defining & Validating Custom Events

0:07:30

Prop / Event Fallthrough & Binding All Props

0:06:12

Demo: Adding Components & Connecting Them

0:07:30

Demo: Adding More Component Communication

0:03:41

Time to Practice: Props & Custom Events

0:07:30

A Potential Problem

0:06:12

Provide + Inject To The Rescue

0:07:30

Provide + Inject for Functions / Methods

0:09:13

Provide + Inject vs Props & Custom Events

0:03:41

Module Summary

0:06:54

Module Resources

0:09:13

Sección 9

Diving Deeper Into Components

Tiempo 2h 07metro

conferencias 18

Ver todo

Module Introduction

0:06:12

Project Setup

0:07:30

Global vs Local Components

0:09:13

Scoped Styles

0:06:54

Introducing Slots

0:06:12

Named Slots

0:09:13

Slot Styles & Compilation

0:07:30

Course Project: The Learning Resources App

Tiempo 1h 40metro

conferencias 14

Ver todo

Module Introduction

0:06:54

Setup & First Steps

0:09:13

First Components & Props

0:07:30

Styling and More Components

0:09:13

Header & BaseCard Components

0:03:41

Adding a Base Button

0:06:54

Dynamic Components & Attribute Fallthrough

0:03:41

Adding & Styling Tabs

0:07:30

Adding a Form

0:09:13

Fetching User Input

0:06:12

Adding a Modal Dialog

0:06:54

Deleting Items

0:07:30

Adding "Teleport"

0:06:54

Module Resources

0:09:13

Sección 11

Forms

Tiempo 1h 12metro

conferencias 10

Ver todo

Module Introduction

0:07:30

v-model & Inputs

0:07:30

Working with v-model Modifiers and Numbers

0:07:30

v-model and Dropdowns

0:07:30

Using v-model with Checkboxes & Radiobuttons

0:03:41

Adding Basic Form Validation

0:09:13

Building a Custom Control Component

0:07:30

Using v-model on Custom Components

0:09:13

Module Summary

0:03:41

Module Resources

0:09:13

Sección 12

Sending Http Requests

Tiempo 1h 40metro

conferencias 15

Ver todo

Module Introduction

0:09:13

Starting App & Why we need a Backend

0:06:54

Adding a Backend

0:06:54

How To (Not) Send Http Requests

0:06:12

Sending a POST Request to Store Data

0:03:41

Http Requests & Http Methods (Verbs)

0:09:13

Using Axios Instead Of "fetch()"

0:07:30

Getting Data (GET Request) & Transforming Response Data

0:06:12

Loading Data When a Component Mounts

0:06:54

Showing a "Loading..." Message

0:07:30

Handling the "No Data" State

0:09:13

Handling Technical / Browser-side Errors

0:07:30

Handling Error Responses

0:03:41

Module Summary

0:06:12

Module Resources

0:03:41

Sección 13

Routing: Building "Multi-Page" Single Page Applications

Tiempo 2h 46metro

conferencias 26

Ver todo

Module Introduction

0:06:12

What & Why?

0:07:30

Routing Setup

0:09:13

Registering & Rendering Routes

0:03:41

Navigating with router-link

0:09:13

Styling Active Links

0:06:54

Programmatic Navigation

0:06:54

Passing Data with Route Params (Dynamic Segments)

0:07:30

Navigation & Dynamic Paths

0:03:41

A Vue Bug

0:03:41

Updating Params Data with Watchers

0:09:13

Passing Params as Props

0:09:13

Redirecting & "Catch All" Routes

0:06:12

Using Nested Routes

0:03:41

More Fun with Named Routes & Location Objects

0:07:30

Using Query Params

0:06:12

Rendering Multiple Routes with Named Router Views

0:06:54

Controlling Scroll Behavior

0:03:41

Introducing Navigation Guards

0:06:12

Diving Deeper Into Navigation Guards

0:07:30

The Global "afterEach" Guard

0:03:41

Beyond Entering: Route Leave Guards

0:07:30

Utilizing Route Metadata

0:07:30

Organizing Route Files

0:09:13

Summary

0:03:41

Module Resources

0:03:41

Sección 14

Animations & Transitions

Tiempo 2h 14metro

conferencias 19

Ver todo

Module Introduction

0:07:30

Animation Basics & CSS Transitions

0:09:13

Understanding CSS Animations

0:09:13

Why Is "Just CSS" Not Enough?

0:03:41

Playing CSS Animations with Vue's Help

0:06:54

Using the Transition Component

0:06:54

CSS Animations with the Transition Component

0:09:13

Using Custom CSS Class Names

0:03:41

Example: Animating a Modal

0:06:54

Transitioning Between Multiple Elements

0:09:13

Using Transition Events

0:07:30

Building JavaScript Transitions (instead of CSS)

0:06:12

Disabling CSS Transitions

0:07:30

Getting Started with Animated Lists

0:07:30

Animating Lists with "transition-group"

0:06:12

Animate List Item Movement

0:06:54

Animating Route Changes

0:06:12

An Important Note on Animated Route Changes

0:06:54

Module Resources

0:06:54

Sección 15

Vuex

Tiempo 2h 26metro

conferencias 21

Ver todo

Module Introduction

0:06:12

What & Why?

0:09:13

Creating & Using a Store

0:09:13

Connecting Components to State

0:06:12

Introducing Mutations - A Better Way of Changing Data

0:06:12

Passing Data to Mutations with Payloads

0:09:13

Introducing Getters - A Better Way Of Getting Data

0:06:54

Running Async Code with Actions

0:09:13

Understanding the Action "Context"

0:03:41

Using Mapper Helpers

0:07:30

Example: Adding More State

0:07:30

Organizing your Store with Modules

0:03:41

Understanding Local Module State

0:09:13

Namespacing Modules

0:09:13

Structuring Vuex Code & Files

0:03:41

A Challenge!

0:09:13

Challenge Solution (1/3)

0:03:41

Challenge Solution (2/3)

0:06:12

Challenge Solution (3/3)

0:09:13

Summary

0:07:30

Module Resources

0:03:41

Sección 16

Main Project: "Find a Coach" Web App

Tiempo 3h 16metro

conferencias 29

Ver todo

Module Introduction

0:06:54

Planning the Project / Web App

0:06:12

Planning the Data Requirements

0:03:41

Planning the Layout / Components

0:07:30

Registering Routes

0:07:30

Adding Route Page Components

0:06:54

Working on the Main Layout & Styling

0:07:30

Wiring Up Pages

0:06:12

Adding Vuex and Coach Data

0:07:30

Working on the Coaches List and List Items

0:06:54

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

0:07:30

Building the Coach Detail Component

0:06:12

Filtering Coaches

0:07:30

Registering as a Coach: The Form

0:06:12

Adding Coaches to Vuex

0:06:12

Adding Form Validation

0:07:30

Working on the Contact Form

0:06:54

Storing Requests (Messages) With Vuex

0:03:41

Outputting Incoming Requests (Messages)

0:06:54

Filtering Requests for the Active Coach

0:07:30

Sending a PUT Http Request to Store Coach Data

0:07:30

Fetching Coach Data (GET Http Request)

0:06:12

Rendering a Loading Spinner

0:03:41

Adding Http Error Handling

0:06:12

Sending Coaching Requests Http Requests

0:09:13

Caching Http Response Data

0:09:13

Adding Route Transitions

0:07:30

The "Not Found" Page & Summary

0:07:30

Module Resources

0:06:12

Sección 17

Vue & Authentication

Tiempo 1h 53metro

conferencias 16

Ver todo

Module Introduction

0:09:13

How Authentication Works in Vue Apps (or any SPA)

0:06:54

Locking / Protecting Backend Resources

0:06:54

Adding an Authentication Page (Login & Signup)

0:06:54

Preparing Vuex

0:06:12

Adding a "Signup" Action & Flow

0:07:30

Better UX: Loading Spinner & Error Handling

0:03:41

Adding a "Login" Action & Flow

0:06:54

Attaching the Token to Outgoing Requests

0:06:54

Updating the UI Based on Auth State

0:07:30

Adding a "Logout" Action & Flow

0:09:13

Authentication & Routing (incl. Navigation Guards)

0:09:13

Adding "Auto Login"

0:06:12

Adding "Auto Logout"

0:06:54

Summary

0:09:13

Module Resources

0:03:41

Sección 18

Optimizing & Deploying Vue Apps

Tiempo 40metro

conferencias 7

Ver todo

Module Introduction

0:03:41

What To Deploy?

0:06:54

Optimization: Using Asynchronous Components

0:07:30

Note: Async Components & Routing

0:03:41

Building the Project For Production

0:07:30

Deploying a Vue App

0:03:41

Module Resources

0:07:30

Sección 19

The Composition API - Replacing the Options API

Tiempo 3h 03metro

conferencias 27

Ver todo

Module Introduction

0:06:12

Which Problem Does The Composition API Solve?

0:06:12

Replacing "data" with "refs"

0:06:12

Replacing the setup() Method

0:06:54

Building "reactive" Objects

0:09:13

Reactivity: A Deep Dive

0:03:41

Replacing "methods" with Regular Functions

0:06:54

Time to Practice: Data & Functions

0:06:12

Replacing "Computed Properties" with the "computed" Function

0:07:30

Two-Way-Binding and the Composition API

0:03:41

Working with Watchers

0:09:13

Time to Practice: Composition API Core Building Blocks

0:06:54

A First Summary

0:06:54

How To Use Template Refs

0:09:13

Components, Props & The Composition API

0:03:41

Emitting Custom Events

0:06:12

Working with Provide/ Inject

0:09:13

Lifecycle Hooks in the Composition API

0:07:30

Migrating from Options API to Composition API - An Example Project

0:09:13

Migrating a First Component

0:07:30

Migrating a Big Component

0:07:30

Migrating the Remaining Components

0:06:12

Routing, Params & The Composition API

0:03:41

The Route & Router Objects and the Composition API

0:06:12

Using Vuex with the Composition API

0:06:12

Summary

0:09:13

Module Resources

0:06:12

Sección 20

Reusing Functionality: Mixins & Custom Composition Functions

Tiempo 1h 33metro

conferencias 14

Ver todo

Module Introduction

0:06:54

Reusability Concepts

0:06:12

Using Mixins

0:06:54

Understanding Mixin Merging

0:03:41

Global Mixins

0:06:54

Disadvantages of Mixins

0:06:12

Custom Hooks / Composables & The Composition API

0:03:41

More Custom Composition Functions

0:03:41

Why Hooks / Composables Beat Mixins

0:09:13

Example: Creating a "Search" Hook

0:09:13

Custom Hooks Gotchas

0:06:54

More Thoughts on Custom Hooks / Composables

0:07:30

Example: A Custom "Sort" Hook

0:06:54

Module Resources

0:09:13

Sección 21

Roundup & Next Steps

Tiempo 13metro

conferencias 2

Ver todo

Thanks for being part of the course!

0:06:12

Course Roundup & Next Steps

0:06:54

Sección 22

Vue 2 to Vue 3 Migration

Tiempo 26metro

conferencias 5

Ver todo

Vue 3 - Overview

0:03:41

Important Changes & Migration Steps

0:09:13

Vue 3: New Features

0:03:41

The New Composition API (Optional!)

0:06:12

Further Migration Resources

0:03:41

Sección 23

Learn Vue 2 | Old Course Content

Tiempo 06metro

conferencias 1

Ver todo

Sección 24

Getting Started [VUE2]

Tiempo 03metro

conferencias 1

Ver todo

Sección 25

Using VueJS to Interact with the DOM [VUE2]

Tiempo 22metro

conferencias 3

Ver todo

Time to Practice - Events

0:06:12

Time to Practice - Reactive Properties

0:09:13

Time to Practice - Styling

0:07:30

Sección 26

Using Conditionals and Rendering Lists [VUE2]

Tiempo 03metro

conferencias 1

Ver todo

Sección 27

An Introduction to Components [VUE2]

Tiempo 03metro

conferencias 1

Ver todo

Sección 28

Communicating between Components [VUE2]

Tiempo 06metro

conferencias 1

Ver todo

Sección 29

Acerca del tutor

Naomi Sipes

4.20 (10 Reseñas)

Cursos 1

Ver perfil

Biografía

¡Hola a todos! Soy Naomi Sipes y comencé mi trabajo como banquera, pero mi fuerte deseo de enseñar idiomas me llevó a cambiar de carrera. He enseñado varios idiomas como alemán, hebreo y finlandés. Tengo un Certificado de la Universidad de Cambridge en Enseñanza de Idiomas. Una escuela de idiomas, en mi opinión, es una interacción enriquecedora de individuos que construye el amor mutuo y la aceptación de las diferencias en la sociedad.

Calificaciones y reseñas

0.00

0 Reseñas

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

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

Este curso incluye:

Comparte este curso

Descripción general

¿Qué aprenderán los estudiantes en su curso?

¿Cuáles son los requisitos o prerrequisitos para tomar su curso?

¿Para quién es el curso?

Descripción

Etiquetas del curso

Contenido del curso

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

Acerca del tutor

Naomi Sipes

Biografía

Calificaciones y reseñas