Vue.js for Beginners: Up and Running with Vue
4.3 (6 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
54 students enrolled

Vue.js for Beginners: Up and Running with Vue

A beginner's guide to learn the basics of the JavaScript Framework Vue.js
4.3 (6 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
54 students enrolled
Created by Dan Vega
Last updated 12/2019
English [Auto]
Current price: $34.99 Original price: $49.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 2 hours on-demand video
  • 5 articles
  • 1 coding exercise
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • What is VueJS & Why would you choose it over other JavaScript frameworks
  • Moving from jQuery to VueJS
  • How to add VueJS to a simple web page.
  • Create your first VueJS Application
Course content
Expand all 17 lectures 01:48:58
+ Introduction to Vue.js
6 lectures 41:50

Welcome to "Up and running with VueJS", my name is Dan Vega and I will be your instructor for this course. This course isn't meant to teach you everything you need to know about Vue instead I am taking a little bit of a different approach and creating smaller courses that focus on one specific topic. This course is meant to give you an introduction and to help you get "Up and Running with Vue". In this course we will cover:

  • What is Vue?

  • Why would you want to use it?

  • Moving from jQuery to Vue

  • Hello, Vue!

  • Vue Core Concepts

  • Resources & Next Steps

Preview 04:04

I don't know about you but when I want to learn something new it helps me to have a little context for what I am learning and why I might want to learn it. In this lesson, we are going to spend just a couple of minutes covering what Vue is.

Preview 04:41

You know what Vue is now so why would you want to use it and what type of applications can you build with it?

Why use VueJS

For anyone who hasn't worked with one of these larger JavaScript frameworks, they can be pretty confusing and intimidating. There are entire toolchains that handle dependency management, transpiling, module bundling, build steps and so much more.

What happens when I don't want to buy into that whole process and I just want to add some interactive content to an existing application? I mentioned earlier that Vue is a progressive framework and this means that we can drop it onto a page or in an existing project without all of that complexity. As our needs grow, Vue will grow with us.

Moving from jQuery to VueJS

No programming tutorial would be complete without the quintessential Hello, World example. In this lesson, you will build your first application by writing a "Hello, Vue" application from scratch.

Preview 07:47
Hello, Vue
1 question

In this course, you will find a series of mini-challenges. These projects are meant to help you reinforce the

concepts you just learned. In this first challenge, I want you to build a small Vue application from scratch.

Challenge #1: Your first application from scratch
+ Vue Core Concepts
8 lectures 01:04:50

Welcome to this section Vue Core Concepts where we are going to learn about the different building blocks in vue through a series of tutorials and exercises. I just wanted to let you know that all of the source code for the examples is here on my Github and it is broken down by lesson with starting code and a finished solution.

Vue Core Concepts Introduction

In the previous lesson, you learned how to write your first Hello World application in Vue. In this lesson, I want to build on that and talk about a core concept in Vue called Data Binding. You saw an example of this in the hello world application but we didn't get a chance to talk about it.

Data Binding: Expressions & Directives

One of the first things you might want to do is display a list of things on a page. In Vue, we can do this pretty easily thanks to something called the v-for directive. Now that you know what directives are this should make more sense but let's head over to the documentation and take a look at what v-for can do for us.


In this tutorial, you will be creating a counter application. We already saw an example of methods earlier but in this example, you are going to learn how to create your own. With methods in place, you will be ready to learn another core concept in Vue, event handling. In fact, the ability to respond to user interaction is a fundamental component of any web application.

Counter Application

In this exercise, you are going to add some functionality to the counter application we built in the previous lesson.

Challenge: Counter Application Upgrades

In this lesson, you are going to create an application that displays the current time. While that alone isn't exciting it gets pretty fun when you have to update the current time every second. We are also going to look at another concept in Vue which is lifecycle hooks.

Each Vue instance goes through a series of initialization steps when it’s created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages.

Timer Component

Now that we have had a chance to cover the basic concepts in Vue I want to talk about components. The idea of creating reusable components is something you will see in a lot of JavaScript frameworks. Take our Timer application, for example, that was a cool application but I wouldn't want to rewrite that each time I wanted to use it on a web page. What I want is a way to package that up into a component and reuse that multiple times on a page or within an application. Vue components give us that ability.

Vue Component

The core concepts learned in this section are the building blocks to a Vue application. In this quiz, we will take some time to go over the fundamentals of Vue.

Vue Core Concepts Quiz
6 questions

In this final challenge, you are going to take what you have learned in this course and build a small application. In a previous lesson, we built a friends application that looped over a list of friends using the `v-for` directive. We are going to do something similar here but add some functionality to it.

Challenge: Final Course Challenge
+ Resources & Next Steps
3 lectures 02:17
Thank You
Resources & Next Steps
Bonus Lesson
  • HTML, CSS & JavaScript
  • Visual Studio Code (free)

Vue has quickly become one of the most popular JavaScript frameworks around and in my opinion, it is the most approachable. Frameworks can be very intimidating and nobody wants to spend a long time setting up a local development environment just to spin up a basic application.

Vue is a progressive framework and that might sound like a bunch of marketing jargon to you but I promise you it isn't. This means that you can get started using Vue quickly and easily and as your needs grow the framework will grow with you.

To get started with Vue all you need to do is drop a script tag on a page and you are ready to go. This allows you to add Vue to your existing applications without having to buy into complicated toolchains. In this course, all of the examples that we walkthrough can be done by adding Vue to a single HTML file and writing a little bit of JavaScript.

If you're a front end web developer that has a working knowledge of HTML, CSS & JavaScript this course is for you. If you just want to learn the basics of Vue in a couple of hours, this course is for you. This course isn't meant to teach everything you need to know about Vue. It will teach you the fundamental building blocks of Vue and it will do so in under two hours.

You will learn how to build Vue applications through a series of tutorials, exercises and quizzes meant to reinforce the concepts you learn in this course. You will have access to all of the starting code so that you don't have to spend time writing boilerplate and can focus in on the task at hand. You will also have access to all of the solutions in case you get stuck.

This course is meant to help beginners get up and running with Vue JS. What are you waiting for? Enroll in this course today and learn something new.

Who this course is for:
  • Beginners who want to learn a JavaScript Framework
  • Beginners who want to learn what Vue is
  • Developers who want to write their first Vue application