Vue.js 2 Academy: Learn Vue Step By Step

No Rating(0)
See all reviews

This course is designed for those interested to learn the basics of Javascript Vue.js.

Watch Free For 30 Days

start free access


buy single class $199
  • On Demand Video Lessons
  • Course Certificate
  • 24/7 Support

About This CourseBeginner

Welcome to Vue.js 2 Academy: Learn Vue Step By Step!

Take your HTML, CSS & Javascript skills to the next level by learning one of the hottest Javascript frameworks available today, Vue.js!

If you are unfamiliar with vue.js, or Javascript libraries and frameworks in general, some of the questions you may be asking is:

  • What is Vue.js?
  • And why should I learn it in the first place?

Vue.js is a really fun and easy to use Javascript framework for building user interfaces. The core of the framework is very lightweight and fast, and it can be used in projects of any size. From easily dropping it into an existing website or application to just control a part of it such as adding new components.

Right through to medium or large single page applications. Considering the lightweight size of the vue.js core, it is still packed full of features which you will learn about during this course.

During this course you will build 2 fun, exciting and challenging projects, to apply everything you will learn instantly. We begin with a guest list app where users can add their name to an event guest list. This is a simple app but will guide you through all of the vue.js essentials such as:

  • Two way data binding
  • Event handling
  • Templates and the Virtual DOM
  • List & conditional rendering
  • Binding attributes & styles
  • The Vue instance
  • Javascript expressions
  • Instance properties: Data, Computed, Watchers, Methods, Filters etc
  • Looping & filters
  • Refs and other instance properties and methods
  • Vue lifecycle
  • Plus much more!

You will then build on this knowledge, by building a greeting card application, where the user can create and edit their own custom greeting card. They can add their own text and images to create a personalized card.

This project introduces more concepts such as:

  • Components (local, global and single file)
  • The Vue CLI for scaffolding projects with build tools such as Webpack & Babel
  • Installing Node & NPM
  • Passing data with $emit
  • Storing & retrieving images from Firebase
  • Props and prop validation
  • Slots and slot scope
  • Binding to menu options to change fonts & styles
  • Event bus
  • Mixins
  • Plus much more!

So are you ready to learn one of the hottest and most upcoming Javascript frameworks available?

Join me now and I look forward to having you on board!

Our Promise to You

By the end of this course, you will have learned Javascript Vue.js.

30 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.

Get started today and learn more about the basics of Javascript Vue.js.

Course Curriculum

Course Sections


What Is Vue.js And Why Should I Learn It?

Visual Studio Installation

Section Intro

Download Project Starter

Installing vue.js

The Vue Instance And The Data Object

Templates And The Virtual DOM

Two Way Data Binding With V-model

Event Handling And Methods

List Rendering

Conditional Rendering In Vue

Binding Attributes To Elements

Binding Styles

Vue Shorthand Syntax

Outputting Text And Html

V-if Vs V-show

Using Javascript Expressions

Section Outro

Section Intro

Adding The Progress Bar

Computed Properties


Key Events And Modifiers


More On Looping: Keys And Index Numbers

Using Multiple Vue Instances

Looping With Objects

Adding Our Navigation Links And Keys

Accessing Vue Instances Externally

Vue Instance Properties And Methods

Referencing Elements With Ref

Using String Templates

The Vue Lifecycle

Vue Lifecycle Hooks In Action

Section Outro

Section Intro

Installing Node And NPM

Scaffolding Projects With The Vue Cli

Exploring Our Project Layout And Build Tools

Using The Data Object With Single File Templates

Section Outro

What Are Components?

Registering Global Components

Registering Local Components

Creating Single File Components

Adding The Card Front Component

Emit Data To Parent Components

Dynamic Components

Creating The Additional Card Components

Creating The Text Input Component

Receiving Data From The Text Input

Creating The Text Output Component

Passing Data With Props

Keeping Components Alive

Scoping CSS Styles

Prop Validation

Passing Prop Data To A Style Object

Introduction To Slots

Slot Scope And Fallback Content

Named Slots

Setting Up Firebase

Creating The Image Upload Component

Uploading Images To Firebase

Image Preview Thumbnail

Upload Progress Bar And Semit File Data

Image Output Component

Downloading Images From Firebase

Set Image Button

Text Options Menu: Font Sizes

Text Options Menu: Text Alignment

Text Options Menu: Font Style And Weight

Remove Image Button

Passing Data With Callbacks

Making Images Draggable

Finishing The Cardinsideleft Component

Finishing The Cardinsideright Component

Finishing The Cardback Component

Introduction To The Event Bus

Sending Events To The Event Bus

Receiving Events From The Event Bus

Adding Mixins

Thank You


No Reviews found for this course.