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:

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

A Precio Justo De JOD693.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
37h 11metro Largo total

Sección 1

Getting Started

Tiempo 1h 22metro

conferencias 12

Ver todo

Welcome to the Course!

Avance 0:03:41

What is "Vue.js"?

Avance 0:03:41

Different Ways of Using Vue

Avance 0:03:41

Exploring Vue Alternatives

Avance 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

Sección 2

Basics & Core Concepts - DOM Interaction with Vue

Tiempo 3h 24metro

conferencias 30

Ver todo

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

Sección 3

Rendering Conditional Content & Lists

Tiempo 1h 23metro

conferencias 12

Ver todo

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

Sección 4

Course Project: The Monster Slayer Game

Tiempo 58metro

conferencias 9

Ver todo

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

Sección 5

Vue: Behind the Scenes

Tiempo 1h 04metro

conferencias 10

Ver todo

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

Sección 6

Introducing Components

Tiempo 36metro

conferencias 6

Ver todo

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

Sección 7

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

Tiempo 1h 28metro

conferencias 16

Ver todo

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

Tiempo 2h 06metro

conferencias 18

Ver todo

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

Sección 9

Diving Deeper Into Components

Tiempo 1h 45metro

conferencias 18

Ver todo

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

Tiempo 1h 28metro

conferencias 14

Ver todo

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

Sección 11

Forms

Tiempo 1h 04metro

conferencias 10

Ver todo

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

Sección 12

Sending Http Requests

Tiempo 1h 36metro

conferencias 15

Ver todo

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

Sección 13

Routing: Building "Multi-Page" Single Page Applications

Tiempo 2h 30metro

conferencias 26

Ver todo

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

Sección 14

Animations & Transitions

Tiempo 2h 16metro

conferencias 19

Ver todo

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

Sección 15

Vuex

Tiempo 2h 30metro

conferencias 21

Ver todo

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

Sección 16

Main Project: "Find a Coach" Web App

Tiempo 3h 26metro

conferencias 29

Ver todo

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

Sección 17

Vue & Authentication

Tiempo 1h 33metro

conferencias 16

Ver todo

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

Sección 18

Optimizing & Deploying Vue Apps

Tiempo 50metro

conferencias 7

Ver todo

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

Sección 19

The Composition API - Replacing the Options API

Tiempo 2h 45metro

conferencias 27

Ver todo

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

Sección 20

Reusing Functionality: Mixins & Custom Composition Functions

Tiempo 1h 25metro

conferencias 14

Ver todo

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

Sección 21

Roundup & Next Steps

Tiempo 15metro

conferencias 2

Ver todo

Thanks for being part of the course!

0:06:12

Course Roundup & Next Steps

0:09:13

Sección 22

Vue 2 to Vue 3 Migration

Tiempo 26metro

conferencias 5

Ver todo

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

Sección 23

Learn Vue 2 | Old Course Content

Tiempo 06metro

conferencias 1

Ver todo

Sección 24

Getting Started [VUE2]

Tiempo 06metro

conferencias 1

Ver todo

Sección 25

Using VueJS to Interact with the DOM [VUE2]

Tiempo 16metro

conferencias 3

Ver todo

Time to Practice - Events

0:06:54

Time to Practice - Reactive Properties

0:03:41

Time to Practice - Styling

0:06:12

Sección 26

Using Conditionals and Rendering Lists [VUE2]

Tiempo 03metro

conferencias 1

Ver todo

Sección 27

An Introduction to Components [VUE2]

Tiempo 07metro

conferencias 1

Ver todo

Sección 28

Communicating between Components [VUE2]

Tiempo 03metro

conferencias 1

Ver todo

Sección 29

Acerca del tutor

Naomi Sipes

4.20 (10 Reseñas)

Cursos 1

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