Vue.js 2 Essentials: Build Your First Vue App

Learn the essential features of VueJS 2 by building build a professional, real world web application using Vue.js
4.6 (20 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
170 students enrolled
$95
Take This Course
  • Lectures 58
  • Length 3.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 12/2016 English

Course Description

Vue.js 2 is one of the hottest Javascript frameworks right now and demand for Vue developers is quickly growing amongst employers.

Because Vue is so intuitive there's no need to do long boring lectures to learn it. In this course we will learn by doing. I will lead you through the process of building a simple but powerful e-commerce UI complete with products and a shopping cart that will utilise most of the essential features of Vue. 

Even if you've never touched Vue.js before, or any other Javascript framework, you'll have completed a working Vue.js app by the time you've finished this course.

In addition to writing code, we will also take the time to discuss the essential Vue concepts so that you leave with a solid understanding of Vue in addition to having the skill and confidence to go and start building your own Vue apps.

This course is ideal for existing web developers looking to upskill with Vue.js, but so long as you know Javascript you will be able to learn from this course.

However, if you're mostly looking to learn advanced concepts of Vue.js like single page components or server-side rendering, this course probably isn't for you as we're going to be focusing on the essentials.

What are the requirements?

  • HTML and CSS
  • Javascript (ES6 is --not-- required)
  • Basic understanding of Git and NPM

What am I going to get from this course?

  • Understand the essential features of Vue.js
  • Build a web app with Vue.js

Who is the target audience?

  • Existing web developers looking to learn Vue.js
  • New web developers looking to pick up a Javascript framework

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Project setup
Demo of the finished product
Preview
04:14
Register for the Imgur API
03:01
Reviewing the Vue.js Poster Store Github repo
01:02
Clone repo, install dependencies and setup environment file
02:13
Running server and viewing project
01:53
Tour of the project files
Preview
05:48
Section 2: Up and running with Vue
Include Vue in project
Preview
03:07
Creat an instance of Vue
Preview
02:39
Adding a data property
03:32
Vue essentials: Directives
Preview
02:57
Adding a method
05:13
Rendering a list of items
03:42
Add classes to items
01:49
Section 3: Building the shopping cart
First, a request!
01:26
Creating the cart
03:56
Vue essentials: Reactivity
01:52
Iterate cart items in template
04:37
Enhancing cart in the template
01:04
Hide cart if empty
04:13
Adding quantity to cart items
05:13
Cart items quantity logic
05:38
Adding price to cart items
02:58
Vue essentials: Filters
02:31
Formatting price
04:44
Adding quantity buttons to template
03:48
Quantity buttons logic
04:53
Adding classes and breaking loop in addItems
02:07
Section 4: Adding product search
Search button
06:09
Search input
02:49
Overview of vue-resource
03:10
Overview of API
03:36
Adding vue-resource to project
02:21
AJAX call for products
04:54
Section 5: Building the product list
Replacing dummy items with the real thing
03:35
Product image
06:10
Adding search result count to product list
06:19
Loading message
05:57
Vue essentials: Lifecycle hooks
02:41
Default search on page load
03:49
Adding price to products
02:18
Section 6: Enhancing the shopping cart
Vue essentials: Transitions
04:19
Fading in cart total
06:40
Vue essentials: Key
04:05
Vue essentials: List transitions
03:29
Fade in cart items
04:01
Section 7: Scroll loading products
How scroll load works
06:32
Creating the results array
03:22
Including scroll monitor in the project
04:41
Scroll monitor basic setup
03:38
Implementing scroll load (part 1)
04:35
Implementing scroll load (part 2)
06:22
Fixing search results
01:38
Adding a "no more items" message
02:59
Vue essentials: Computed properties
02:24
Enhancing "no more items" logic
04:05
Section 8: Finishing touches
Hiding elements before Vue compiles them
03:51
Requiring a search string
01:50
Section 9: Wrap up
Thank you
02:01

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Anthony Gore, Web Developer, Online Instructor

Hi! I'm Anthony and I'm a Javascript nut from Sydney, Australia.

I've done web development as a freelancer as well as for large organisations. I've done development work on all kinds of projects from single page apps to corporate mega-sites.

I now focus on teaching Javascript online through my brand JS Dojo. JS Dojo has a successful Medium publication and Youtube channel as well as Udemy courses.

I hope to meet you in one of my courses!

Ready to start learning?
Take This Course