Basics and Core Concepts – Document Object Model (DOM) Interaction with Vue | Vue - The Complete Guide (Including Vue Router, Vuex, and Composition API)

Book Overview & Buying
Table Of Contents

Vue - The Complete Guide (Including Vue Router, Vuex, and Composition API)

By : Maximilian Schwarzmüller

Buy this Video

Vue - The Complete Guide (Including Vue Router, Vuex, and Composition API)

By: Maximilian Schwarzmüller

Buy this Video

Overview of this book

Vue.js is a highly popular framework that provides a reactive and great user experience not only for mobile apps but also for browser applications. Hence, it is the highest-paid one in the front-end development industry. This course starts with an introduction to Vue.js and explains why it is a great JavaScript framework. Then you will learn the basic syntaxes and templates of Vue.js and see how to output reactive data and handle keyboard events. Moving along, you will learn how to interact with Document Object Model (DOM) and set up a development environment and workflow with the Vue CLI. Then we will walk through the various components and show you how to work with forms and HTTP requests. Next, you will learn how to make your app appealing with animations and transitions and understand the importance of routing and Vuex in Vue.js. Finally, we will create a stock trader application and learn the stages in deploying a Vue.js application. You will also learn how to use Axios instead of Vue resources and underline the concepts of authentication in Vue apps. By the end of this course, you will have developed the essential Vue.js skills needed for frontend web development and to develop reactive browser applications. All the resources for this course are available at https://github.com/PacktPublishing/Vue---The-Complete-Guide-incl.-Vue-Router-Vuex-and-Composition-API-

Getting Started

Welcome to the Course!

What is Vue.js?

Different Ways of Using Vue

Exploring Vue Alternatives

Building Your First App with JavaScript

Re-Building the App with Vue.js

Vue Versus Vanilla JavaScript (Just JavaScript)

Setting Up the Course Development Environment

Course Outline and Contents

How to Get the Most Out of This Course

Basics and Core Concepts – Document Object Model (DOM) Interaction with Vue

Module Introduction

Creating and Connecting Vue App Instances

Interpolation and Data Binding

Binding Attributes with the â€œV-Bindâ€ Directive

Understanding â€œMethodsâ€ in Vue Apps

Working with Data Inside a Vue App

Outputting Raw HTML Content with V-html

First Summary

Understanding Event Binding

Events and Methods

Working with Events and Arguments

Using the Native Event Object

Exploring Event Modifiers

Locking Content with V-Once

Data Binding + Event Binding = Two-Way Binding

Methods Used for Data Binding: How it Works?

Introducing Computed Properties

Working with Watchers

Methods Versus Computed Properties Versus Watchers

V-Bind and V-On Shorthands

Dynamic Styling with Inline Styles

Adding CSS Classes Dynamically

Classes and Computed Properties

Dynamic Classes: Array Syntax

Module Summary

Rendering Conditional Content and Lists

Module Introduction

Understanding the Problem

Rendering Content Conditionally

V-if, V-else, and V-else-if

Using V-show Instead of V-if

Rendering Lists of Data

Diving Deeper into v-For

Removing List Items

Listening to Events

Module Summary

Course Project: The Monster Slayer Game

Module Introduction

Project Setup and First Methods

Updating the Healthbars

Adding a â€œSpecial Attackâ€

Adding a â€œHealâ€ Functionality

Adding a â€œGame Overâ€ Screen

Finishing the Core Functionality

Adding a Battle Log

Vue: Behind the Scenes

Module Introduction

An Introduction to Vue's Reactivity

Vue Reactivity: A Deep Dive

One App Versus Multiple Apps

Understanding Templates

Working with Refs

How Vue Updates the Document Object Model (DOM)

Vue App Lifecycle – Theory

Vue App Lifecycle – Practice

Introducing Components

Module Introduction

Understanding the Problem

Introducing Components

Building Complex User Interfaces with Components

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

Module Introduction

Why You Need a Development Server?

Why You Want a Better Developer Experience?

Installing and Using the Vue CLI

Inspecting the Created Project

Inspecting the Vue Code and â€œ.vueâ€ Files

Adding the â€œVeturâ€ Extension to Visual Studio Code

More on Slots

Scoped Slots

Dynamic Components

Keeping Dynamic Components Alive

Applying What You Know + a Problem

Teleporting Elements

Working with Fragments

The Vue Style Guide

Moving to a Different Folder Structure

Module Summary

Course Project: The Learning Resources App

Module Introduction

Setup and First Steps

First Component and Prop

Styling and More Components

Header and BaseCard Components

Adding a Base Button

Dynamic Components and the Fallthrough Attribute

Adding and Styling Tabs

Adding a Form

Fetching User Input

Adding a Modal Dialog

Deleting Items

Adding â€œTeleportâ€

Forms

Module Introduction

V-Model and Inputs

Working with V-Model Modifiers and Numbers

V-Model and Dropdowns

Using V-Model with Checkboxes and Radio Buttons

Adding Basic Form Validation

Building a Custom Control Component

Using V-Model on Custom Components

Module Summary

Sending HTTP Requests

Module Introduction

Starting App and Why You Need a Backend

Adding a Backend

How to (Not) Send HTTP Requests

Sending a POST Request to Store Data

Getting Data (GET Request) and Transforming Response Data

Loading Data When a Component Mounts

Showing a â€œLoadingâ€¦â€ Message

Handling the â€œNo Dataâ€ State

Handling Technical/Browser-Side Errors

Handling Error Responses

Module Summary

Routing: Building â€œMulti-Pageâ€ Single Page Applications

Module Introduction

Routing: What and Why?

Routing Setup

Registering and Rendering Routes

Navigating with Router-link

Styling Active Links

Programmatic Navigation

Passing Data with Route Params (Dynamic Segments)

Navigation and Dynamic Paths

Updating Params Data with Watchers

Passing Params as Props

Redirecting and â€œCatch Allâ€ Routes

Using Nested Routes

More Fun with Named Routes and Location Objects

Using Query Params

Rendering Multiple Routes with Named Router Views

Controlling Scroll Behavior

Introducing Navigation Guards

Diving Deeper into Navigation Guards

The Global â€œafterEachâ€ Guard

Beyond Entering: Route Leave Guards

Utilizing Route Metadata

Organizing Route Files

Summary

Animations and Transitions

Module Introduction

Animation Basics and CSS Transitions

Understanding CSS Animations

Why Is â€œJust CSSâ€ Not Enough?

Playing CSS Animations with Vue's Help

Using the Transition Component

CSS Animations with the Transition Component

Using Custom CSS Class Names

Example: Animating a Modal

Transitioning Between Multiple Elements

Using Transition Events

Building JavaScript Transitions (Instead of CSS)

Disabling CSS Transitions

Getting Started with Animated Lists

Animating Lists with â€œTransition-Groupâ€

Animating List Item Movement

Animating Route Changes

Vuex

Module Introduction

Vuex: What and Why?

Creating and Using a Store

Connecting Components to State

Introducing Mutations - A Better Way of Changing Data

Passing Data to Mutations with Payloads

Introducing Getters - A Better Way of Getting Data

Running Async Code with Actions

Understanding the Action â€œContextâ€

Using Mapper Helpers

Example: Adding More States

Organizing Your Store with Modules

Understanding Local Module State

Namespacing Modules

Structuring Vuex Code and Files

A Challenge!

Challenge Solution – Part 1

Challenge Solution – Part 2

Challenge Solution – Part 3

Summary

Main Project: â€œFind a Coachâ€ Web App

Module Introduction

Planning the Project/Web App

Planning the Data Requirements

Planning the Layout/Components

Registering Routes

Adding Route Page Components

Working on the Main Layout and Styling

Wiring Up Pages

Adding Vuex and Coach Data

Working on the Coaches List and List Items

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

Building the Coach Detail Component

Filtering Coaches

Registering as a Coach: The Form

Adding Coaches to Vuex

Adding Form Validation

Working on the Contact Form

Storing Requests (Messages) with Vuex

Outputting Incoming Requests (Messages)

Filtering Requests for the Active Coach

Sending a PUT HTTP Request to Store Coach Data

Fetching Coach Data (GET HTTP Request)

Rendering a Loading Spinner

Adding HTTP Error Handling

Sending Coaching Requests Using HTTP Requests

Caching HTTP Response Data

Adding Route Transitions

The â€œNot Foundâ€ Page and Summary

Vue and Authentication

Module Introduction

How Authentication Works in Vue Apps [or Any Single-Page Application (SPA)]?

Locking/Protecting Backend Resources

Adding an Authentication Page (Login and Signup)

Preparing Vuex

Adding a â€œSignupâ€ Action and Flow

Better UX: Loading Spinner and Error Handling

Adding a â€œLoginâ€ Action and Flow

Attaching the Token to Outgoing Requests

Updating the UI Based on Auth State

Adding a â€œLogoutâ€ Action and Flow

Authentication and Routing (Including Navigation Guards)

Adding â€œAuto Loginâ€

Adding â€œAuto Logoutâ€

Summary

Optimizing and Deploying Vue Apps

Module Introduction

What to Deploy?

Optimization: Using Asynchronous Components

Building the Project for Production

Deploying a Vue App

The Composition API – Replacing the Options API

Module Introduction

Which Problem Does the Composition API Solve?

Replacing â€œDataâ€ with â€œRefsâ€

Building â€œReactiveâ€ Objects

Reactivity: A Deep Dive

Replacing â€œMethodsâ€ with Regular Functions

Replacing â€œComputed Propertiesâ€ with the â€œComputedâ€ Function

Two-Way Binding and the Composition API

Working with Watchers

A First Summary

How to Use Template Refs

Components, Props, and the Composition API

Emitting Custom Events

Working with Provide/Inject

Lifecycle Hooks in the Composition API

Migrating from Options API to Composition API - An Example Project

Migrating a First Component

Migrating a Big Component

Migrating the Remaining Components

Routing, Params, and the Composition API

Route and Router Objects and the Composition API

Using Vuex with the Composition API

Summary

Reusing Functionality: Mixins and Custom Composition Functions

Module Introduction

Reusability Concepts

Using Mixins

Merging Mixins

Global Mixins

Disadvantages of Mixins

Custom Hooks/Composable and the Composition API

More Custom Composition Functions

Why Hooks/Composable Beat Mixins?

Example: Creating a â€œSearchâ€ Hook

Custom Hooks Gotchas

More Thoughts on Custom Hooks/Composable

Example: A Custom â€œSortâ€ Hook

Roundup and Next Steps

Course Roundup and Next Steps

Vue 2 to Vue 3 Migration

Vue 3 - Overview

Important Changes and Migration Steps

Vue 3: New Features

The New Composition API (Optional)

About This Course and Vue 3

Getting Started [VUE2]

Course Introduction

Creating Your First Vue.js Application

Extending the Vue.js Application

Course Structure

Take Advantage of All Course Resources!

Set Up Vue.js Locally

Using Vue.js to Interact with the Document Object Model (DOM) [VUE2]

Module Introduction

Understanding Vue.js Templates

How the Vue.js Template Syntax and Instance Work Together

Accessing Data in the Vue Instance

Binding Attributes

Understanding and Using Directives

Disable Re-Rendering with V-Once

How to Output Raw HTML?

Listening to Events

Getting Event Data from the Event Object

Passing Your Own Arguments with Events

Modifying an Event - with Event Modifiers

Listening to Keyboard Events

Writing JavaScript Code in the Templates

Using Two-Way Binding

Writing JavaScript Code in the Templates

Reacting to Changes with Computed Properties

An Alternative to Computed Properties: Watching for Changes

Saving Time with Shorthands

Dynamic Styling with CSS Classes – Basics

Dynamic Styling with CSS Classes - Using Objects

Dynamic Styling with CSS Classes - Using Names Setting Styles Dynamically (without CSS Classes)

Styling Elements with the Array Syntax

Module Wrap Up

Using Conditionals and Rendering Lists [VUE2]

Module Introduction

Conditional Rendering with V-If

Using an Alternative V-If Syntax

Don't Detach it with V-Show

Rendering Lists with V-For

Getting the Current Index

Using an Alternative V-For Syntax

Looping through Objects

Looping through a List of Numbers

Keeping Track of Elements While Using V-For

Module Wrap Up

First Course Project - The Monster Slayer [VUE2]

Introduction and Challenge

Setting Up the Course Project

Creating the Vue Instance and Styling the Healthbars

Showing the Player Controls Conditionally

Implementing a â€œStart Gameâ€ Method

Implementing an â€œAttackâ€ Method

Write better Code - Time for Refactoring!

Implementing a â€œSpecial Attackâ€

Implementing a â€œHealâ€ Method

Finishing the Action Buttons

Creating an Action Log

Printing the Log (v-for)

Finishing the Log

Styling the Log Conditionally

Wrap Up

Understanding the Vue.js Instance [VUE2]

Module Introduction

Some Basics about the Vue.js Instance

Using Multiple Vue Instances

Accessing the Vue Instance from Outside

How Vue.js Manages Your Data and Methods

A r Look at $el and $data

Placing $refs and Using Them on Your Templates

Where to Learn More about the Vue API?

Mounting a Template

Using Components

Limitations of Some Templates

How Vue.js Updates the Document Object Model (DOM)?

The Vue.js Instance Lifecycle

The Vue.js Instance Lifecycle in Practice

Module Wrap Up

Moving to a â€œRealâ€ Development Workflow with Webpack and Vue CLI [VUE2]

Module Introduction

Why Do You Need a Development Server?

What Does â€œDevelopment Workflowâ€ Mean?

Using the Vue CLI to Create Projects

Installing the Vue CLI and Creating a New Project

Overview of the Webpack Template Folder Structure

Understanding the â€œ.vueâ€ Files

Understanding the Object in the Vue File

How to Build Your App for Production

Module Wrap Up

An Introduction to Components [VUE2]

Module Introduction

An Introduction to Components

Storing Data in Components with the Data Method

Registering Components Locally and Globally

â€œRoot Componentâ€ in the App.vue File

Creating a Component

Using Components

Moving to a Better Folder Structure

How to Name Your Component Tags (Selectors)

Scoping Component Styles

Module Wrap Up

Communicating Between Components [VUE2]

Module Introduction

Communication Problems

Using Props for Parent => Child Communication

Naming â€œpropsâ€

Using â€œPropsâ€ in the Child Component

Validating â€œPropsâ€

Using Custom Events for Child => Parent Communication

Understanding Unidirectional Data Flow

Communicating with Callback Functions

Communication between Sibling Components

Using an Event Bus for Communication

Centralizing Code in an Event Bus

Wrap Up

Advanced Component Usage [VUE2]

Module Introduction

Setting Up the Module Project

Passing Content - The Suboptimal Solution

Passing Content with Slots

How Slot Content Gets Compiled and Styled?

Using Multiple Slots (Named Slots)

Default Slots

A Summary on Slots

Switching Multiple Components with Dynamic Components

Understanding Dynamic Component Behavior

Keeping Dynamic Components Alive

Dynamic Component Lifecycle Hooks

Wrap Up

Second Course Project - Wonderful Quotes [VUE2]

Module Introduction

Setting Up the Project

Initializing the Application

Creating the Application Components

Passing Data with Props and Slots

Allowing Users to Create Quotes with a NewQuote Component

Adding Quotes with Custom Events

Adding an Info Box

Allowing for Quote Deletion

Controlling Quotes with a Progress Bar

Finishing Touches and State Management

Handling User Input with Forms [VUE2]

Module Introduction

A Basic <input> Form Binding

Grouping Data and Pre-Populating Inputs

Modifying User Input with Input Modifiers

Binding <textarea> and Handling User Input

Using Checkboxes and Saving Data in Arrays

Using Radio Buttons

Handling Dropdowns with <select> and <option>

What V-Model Does and How to Create a Custom Control

Creating a Custom Control (Input)

Submitting a Form

Wrap Up

Using and Creating Directives [VUE2]

Module Introduction

Understanding Directives

How Directives Work? Hook Functions

Creating a Simple Directive

Passing Values to Custom Directives

Passing Arguments to Custom Directives

Modifying a Custom Directive with Modifiers

Custom Directives - A Summary

Registering Directives Locally

Using Multiple Modifiers

Passing More Complex Values to Directives

Wrap Up

Improving your App with Filters and Mixins [VUE2]

Module Introduction

Creating a Local Filter

What are Global Filters and How to Chain Multiple Filters?

An (Often Better) Alternative to Filters: Computed Properties

Understanding Mixins

Creating and Using Mixins

How Mixins Get Merged

Creating a Global Mixin (Special Case!)

Mixins and Scope

Wrap Up

Adding Animations and Transitions [VUE2]

Module Introduction

Understanding Transitions

Preparing a Code to Use Transitions

Setting Up a Transition

Assigning CSS Classes for Transitions

Creating a â€œFadeâ€ Transition with the CSS Transition Property

Creating a â€œSlideâ€ Transition with the CSS Animation Property

Mixing Transition and Animation Properties

Animating V-If and V-Show

Setting Up an Initial (On-Load) Animation

Using Different CSS Class Names

Using Dynamic Names and Attributes

Transitioning between Multiple Elements (Theory)

Transitioning between Multiple Elements (Practice)

Listening to Transition Event Hooks

Understanding JavaScript Animations

Excluding CSS from your Animation

Creating an Animation in JavaScript

Animating Dynamic Components

Animating Lists with <transition-group>

Using <transition-group> - Preparations

Using <transition-group> to Animate a List

Understanding the App

Creating the App

Adding Animations

Wrap Up

Connecting to Servers through HTTP - Using Vue-Resource [VUE2]

Module Introduction

Accessing HTTP through Vue-Resource – Setup

Creating an Application and Setting Up a Server (Firebase)

POST Data to a Server (Sending a POST Request)

Sending and Transforming Data (Sending a GET Request)

Configuring Vue-Resource Globally

Intercepting Requests

Intercepting Responses

Where the â€œResourceâ€ in Vue-Resource Comes From

Creating Custom Resources

Resources Versus â€œNormalâ€ HTTP Requests

Understanding Template URLs

Wrap Up

Routing in a Vue.js Application [VUE2]

Module Introduction

Setting Up the Vue.js Router (Vue-router)

Setting Up and Loading Routes

Understanding Routing Modes (Hash Versus History)

Navigating with Router Links

Styling Active Links

Navigating from a Code (Imperative Navigation)

Setting Up Route Parameters

Fetching and Using Route Parameters

Reacting to Changes in Route Parameters

Setting Up Child Routes (Nested Routes)

Navigating to Nested Routes

Making Router Links More Dynamic

A Better Way of Creating Links - With Named Routes

Using Query Parameters

Multiple Router Views (Named Router Views)

Redirecting

Setting Up â€œCatch Allâ€ Routes/Wildcards

Animating Route Transitions

Passing the Hash Fragment

Controlling the Scroll Behavior

Protecting Routes with Guards

Using the â€œBeforeEnterâ€ Guard

Using the â€œBeforeLeaveâ€ Guard

Loading Routes Lazily

Wrap Up

Better State Management with Vuex [VUE2]

Module Introduction

Why a Different State Management may Be Needed

Understanding â€œCentralized Stateâ€

Using the Centralized State

Why a Centralized State Alone Won't Fix it

Understanding Getters

Using Getters

Mapping Getters to Properties

Understanding Mutations

Using Mutations

Why Mutations Have to Run Synchronously

How Actions Improve Mutations

Using Actions

Mapping Actions to Methods

A Summary of Vuex

Two-Way Binding (v-model) and Vuex

Improving Folder Structures

Modularizing the State Management

Using Separate Files

Using Namespaces to Avoid Naming Problems

Wrap Up

Final Project - The Stock Trader [VUE2]

Project Introduction

Project Setup and Planning

Creating the First Components

Set Up Project Routes

Adding a Header and Navigation

Planning the Next Steps

Creating Stocks Components

Adding a â€œBuyâ€ Button

Setting Up the Vuex State Management

Adding a Portfolio Module to Vuex

Working on the Portfolio Stocks

Connecting the Portfolio with Vuex

Time to fix some Errors

Displaying the Funds

Adding Some Order Checks

Making Funds Look Nicer with Filters

Ending the Day - Randomizing Stocks

Animating the Route Transitions

Saving and Fetching Data - Adding a Dropdown

Setting Up Vue-Resource and Firebase

Saving Data (PUT Request)

Fetching Data (GET Request)

Testing and Bug Fixes

Project Wrap Up

Bonus: Debugging Vuex with Vue Developer Tools

Deploying a Vue.js Application [VUE2]

Module Introduction

Preparing for Deployment

Deploying the App (Example: AWS S3)

Bonus: Using Axios Instead of Vue-Resource [VUE2]

About This Section

Module Introduction

Project Setup

Axios Setup

Sending a POST Request

Sending a GET Request

Accessing and Using Response Data

Setting a Global Request Configuration

Using Interceptors

Custom Axios Instances

Wrap Up

Bonus: Authentication in Vue Apps

Section Introduction

Module Introduction

How Authentication Works in Single-Page Applications (SPAs)

Project Setup

Adding User Sign-Up

Adding User Sign-In (Login)

Using Vuex to Send Auth Requests

Storing Auth Data in Vuex

Accessing Other Resources from Vuex

Sending the Token to the Backend

Protecting Routes (Auth Guard)

Updating the UI State (Based on Authentication State)

Adding User Logout

Adding Auto Logout

Adding Auto Login

Wrap Up

Vue - The Complete Guide (Including Vue Router, Vuex, and Composition API)

By : Maximilian Schwarzmüller

Vue - The Complete Guide (Including Vue Router, Vuex, and Composition API)

By: Maximilian Schwarzmüller

Overview of this book

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access