Categories

There are currently no items in your shopping cart.

User Panel

Forgot your password?.

Vue JS 2 – The Complete Guide (incl. Vue Router & Vuex)


Getting Started :
Course Introduction
Let's Create our First VueJS Application
Extending the VueJS Application
Course Structure
Take Advantage of all Course Resources!
Setup VueJS Locally
Module Resources & Useful Links

Using VueJS to Interact with the DOM :
Module Introduction
Understanding VueJS Templates
How the VueJS Template Syntax and Instance Work Together
Accessing Data in the Vue Instance
Binding to Attributes
Understanding and Using Directives
Disable Re-Rendering with v-once
How to Output Raw HTML
Time to Practice - Outputting Data to Templates
1 question
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
Time to Practice - Events
1 question
Writing JavaScript Code in the Templates
Using Two-Way-Binding
Reacting to Changes with Computed Properties
An Alternative to Computed Properties: Watching for Changes
Saving Time with Shorthands
Time to Practice - Reactive Properties
1 question
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
Time to Practice - Styling
1 question
Module Wrap Up
Module Resources & Useful Links

Using Conditionals and Rendering Lists :
Module Introduction
Conditional Rendering with v-if
v-else-if in Vue.js 2.1
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 when using v-for
Time to Practice - Conditionals & Lists
1 question
Module Wrap Up
Module Resources & Useful Links

First Course Project - The Monster Slayer :
Introduction & 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 a "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
Full Application Code

Understanding the VueJS Instance :
Module Introduction
Some Basics about the VueJS Instance
Using Multiple Vue Instances
Accessing the Vue Instance from Outside
How VueJS manages your Data and Methods
A Closer 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 VueJS Updates the DOM
The VueJS Instance Lifecycle
The VueJS Instance Lifecycle in Practice
Module Wrap Up
Module Resources & Useful Links

Moving to a "Real" Development Workflow with Webpack and Vue CLI :
Module Introduction
Why do we 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
An Overview over the Webpack Template Folder Structure
Understanding ".vue" Files
Understanding the Object in the Vue File
How to Build your App for Production
Module Wrap Up
More about ".vue" Files and the CLI
Debugging VueJS Projects

An Introduction to Components :
Module Introduction
An Introduction to Components
Storing Data in Components with the Data Method
Registering Components Locally and Globally
The "Root Component" in the App.vue File
Creating a Component
Using Components
Time to Practice - Components
1 question
Moving to a Better Folder Structure
Alternative Folder Structures
How to Name your Component Tags (Selectors)
Scoping Component Styles
Module Wrap Up
Module Resources & Useful Links

Communicating between Components :
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
Time to Practice - Component Communication
1 question
Wrap Up
Module Resources & Useful Links

Advanced Component Usage :
Module Introduction
Setting up the Module Project
Passing Content - The Suboptimal Solution
Passing Content with Slots
How Slot Content gets Compiled and Styled
Changed Slot Styling Behavior
Using Multiple Slots (Named Slots)
Default Slots and Slot Defaults
A Summary on Slots
Switching Multiple Components with Dynamic Components
Understanding Dynamic Component Behavior
Keeping Dynamic Components Alive
Dynamic Component Lifecycle Hooks
Time to Practice - Slots and Dynamic Components
1 question
Wrap Up
Module Resources & Helpful Links

Second Course Project - Wonderful Quotes :
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 a Info Box
Allowing for Quote Deletion
Controlling Quotes with a Progress Bar
Finishing Touches and State Management
Module Resources

Handling User Input with Forms :
Module Introduction
A Basic Form Binding
Grouping Data and Pre-Populating Inputs
Modifying User Input with Input Modifiers
Binding and Saving Line Breaks
Using Checkboxes and Saving Data in Arrays
Using Radio Buttons
Handling Dropdowns with and
What v-model does and How to Create a Custom Control
Creating a Custom Control (Input)
Submitting a Form
Time to Practice - Forms
1 question
Wrap Up
Module Resources & Useful Links

Using and Creating Directives :
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
Time to Practice - Directives
1 question
Wrap Up
Module Resources & Useful Links

Improving your App with Filters and Mixins :
Module Introduction
Creating a Local Filter
Global Filters and How to Chain Multiple Filters
An (often-times 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
Time to Practice - Filters & Mixins
1 question
Wrap Up
Module Resources & Useful Links

Adding Animations and Transitions :
Module Introduction
Understanding Transitions
Preparing 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
Using - Preparations
Using to Animate a List
Understanding the App
Creating the App
Adding Animations
Wrap Up
Module Resources & Useful Links
The Animated "Monster Slayer" App

Connecting to Servers via Http - Using vue-resource :
Module Introduction
Accessing Http via vue-resource - Setup
Creating an Application and Setting Up a Server (Firebase)
POSTing Data to a Server (Sending a POST Request)
GETting 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 vs "Normal" Http Requests
Understanding Template URLs
Wrap Up
Module Resources & Useful Links

Routing in a VueJS Application :
Module Introduction
Setting up the VueJS Router (vue-router)
Setting Up and Loading Routes
Understanding Routing Modes (Hash vs History)
Navigating with Router Links
Where am I? - Styling Active Links
Navigating from Code (Imperative Navigation)
Setting Up Route Parameters
Fetching and Using Route Parameters
Reacting to Changes in Route Parameters
vue-router 2.2: Extract Route Params via "props"
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
Module Resources & Useful Links

Better State Management with Vuex :
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
Auto-namespacing with Vuex 2.1
Wrap Up
Module Resources & Useful Links

Final Project - The Stock Trader :
Project Introduction
Project Setup and Planning
Creating the First Components
Setup 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 & 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
Module Resources & Useful Links

Deploying a VueJS Application :
Module Introduction
Preparing for Deployment
Deploying the App (Example: AWS S3)

Course Roundup :
Courses Roundup

All Course Exercises ("Time to Practice") :
About this Section (Please Read!)
Time to Practice (1) - Outputting Data to Templates (Problem)
Time to Practice (1) - Outputting Data to Templates (Solution)
Time to Practice (1) - Outputting Data to Templates (Code)
Time to Practice (2) - Events (Problem)
Time to Practice (2) - Events (Solution)
Time to Practice (2) - Events (Code)
Time to Practice (3) - Reactive Properties (Problem)
Time to Practice (3) - Reactive Properties (Solution)
Time to Practice (3) - Reactive Properties (Code)
Time to Practice (4) - Styling (Problem)
Time to Practice (4) - Styling (Solution)
Time to Practice (4) - Styling (Code)
Time to Practice (5) - Conditionals and Lists (Problem)
Time to Practice (5) - Conditionals and Lists (Solution)
Time to Practice (6) - Components (Problem)
Time to Practice (6) - Components (Solution)
Time to Practice (7) - Component Communication (Problem)
Time to Practice (7) - Component Communication (Solution)
Time to Practice (8) - Slots and Dynamic Components (Problem)
Time to Practice (8) - Slots and Dynamic Components (Solution)
Time to Practice (9) - Forms (Problem)
Time to Practice (9) - Forms (Solution)
Time to Practice (10) - Directives (Problem)
Time to Practice (10) - Directives (Solution)
Time to Practice (11) - Filters and Mixins (Problem)
Time to Practice (11) - Filters and Mixins (Solution)

Bonus: Using Axios instead of vue-resource :
About this Section
Module Introduction
Project Setup
Axios Setup
Sending a POST Request
Sending a GET Request
Accessing & Using Response Data
Setting a Global Request Configuration
Using Interceptors
Custom Axios Instances
Wrap Up
Useful Resources & Links

Bonus: Authentication in Vue Apps :
About this Section
Module Introduction
How Authentication Works in SPAs
Project Setup
Adding User Signup
Adding User Signin (Login)
Using Vuex to send Auth Requests
Storing Auth Data in Vuex
More about the Token (JWT)
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
Useful Resources & Links

Bonus: Form Input Validation :
About this Section
Module Introduction
Add a Firebase Project!
Installing Vuelidate
Adding a Validator
Adding Validation UI Feedback
Controlling Styles for Invalid Entries
More Validators
Validating Passwords For Equality
Using the Required-Unless Validator
Validating Arrays
Controlling the Form Submit Button
Creating Custom Validators
Async Validators
Wrap Up
Useful Resources & Links