Please ensure Javascript is enabled for purposes of website accessibility

About This Course

Who this course is for:

  • Developers
  • Beginners
  • Those who want to learn Vue

What you’ll learn:

  • Build a fun and exciting project
  • Learn how to make a guest list app
  • Become familiar with creating a greeting card

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

Section 1 - Introduction And Getting Started
Welcome 00:00:00
What Is Vue.js And Why Should I Learn It? 00:00:00
Visual Studio Installation 00:00:00
Section 2 - Vue Basics: Guest List App
Section Intro 00:00:00
Download Project Starter 00:00:00
Installing vue.js 00:00:00
The Vue Instance And The Data Object 00:00:00
Templates And The Virtual DOM 00:00:00
Two Way Data Binding With V-model 00:00:00
Event Handling And Methods 00:00:00
List Rendering 00:00:00
Conditional Rendering In Vue 00:00:00
Binding Attributes To Elements 00:00:00
Binding Styles 00:00:00
Vue Shorthand Syntax 00:00:00
Outputting Text And Html 00:00:00
V-if Vs V-show 00:00:00
Using Javascript Expressions 00:00:00
Section Outro 00:00:00
Section 3 - A Deeper Look At Vue: Guest List App
Section Intro 00:00:00
Adding The Progress Bar 00:00:00
Computed Properties 00:00:00
Watchers 00:00:00
Key Events And Modifiers 00:00:00
Filters 00:00:00
More On Looping: Keys And Index Numbers 00:00:00
Using Multiple Vue Instances 00:00:00
Looping With Objects 00:00:00
Adding Our Navigation Links And Keys 00:00:00
Accessing Vue Instances Externally 00:00:00
Vue Instance Properties And Methods 00:00:00
Referencing Elements With Ref 00:00:00
Using String Templates 00:00:00
The Vue Lifecycle 00:00:00
Vue Lifecycle Hooks In Action 00:00:00
Section Outro 00:00:00
Section 4 - Build Tools And Workflow: Creative Cards App
Section Intro 00:00:00
Installing Node And NPM 00:00:00
Scaffolding Projects With The Vue Cli 00:00:00
Exploring Our Project Layout And Build Tools 00:00:00
Using The Data Object With Single File Templates 00:00:00
Section Outro 00:00:00
Section 5 - Introduction To Components: Creative Cards App
What Are Components? 00:00:00
Registering Global Components 00:00:00
Registering Local Components 00:00:00
Creating Single File Components 00:00:00
Adding The Card Front Component 00:00:00
Emit Data To Parent Components 00:00:00
Dynamic Components 00:00:00
Creating The Additional Card Components 00:00:00
Creating The Text Input Component 00:00:00
Receiving Data From The Text Input 00:00:00
Creating The Text Output Component 00:00:00
Passing Data With Props 00:00:00
Keeping Components Alive 00:00:00
Scoping CSS Styles 00:00:00
Prop Validation 00:00:00
Passing Prop Data To A Style Object 00:00:00
Introduction To Slots 00:00:00
Slot Scope And Fallback Content 00:00:00
Named Slots 00:00:00
Section 6 - Components Continued And Firebase Storage: Creative Cards App
Setting Up Firebase 00:00:00
Creating The Image Upload Component 00:00:00
Uploading Images To Firebase 00:00:00
Image Preview Thumbnail 00:00:00
Upload Progress Bar And Semit File Data 00:00:00
Image Output Component 00:00:00
Downloading Images From Firebase 00:00:00
Set Image Button 00:00:00
Text Options Menu: Font Sizes 00:00:00
Text Options Menu: Text Alignment 00:00:00
Text Options Menu: Font Style And Weight 00:00:00
Remove Image Button 00:00:00
Passing Data With Callbacks 00:00:00
Making Images Draggable 00:00:00
Finishing The Cardinsideleft Component 00:00:00
Finishing The Cardinsideright Component 00:00:00
Finishing The Cardback Component 00:00:00
Introduction To The Event Bus 00:00:00
Sending Events To The Event Bus 00:00:00
Receiving Events From The Event Bus 00:00:00
Adding Mixins 00:00:00
Section 7 - Thank You
Thank You 00:00:00
Template Design © VibeThemes. All rights reserved.

Setup Menus in Admin Panel