Vue JS 2 - The Complete Guide (incl. Vuex)

VueJS is an awesome JavaScript Framework for building Frontend Applications! Vue.js mixes the Best of Angular 2 + React!
4.8 (1,508 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.
7,507 students enrolled
$15
$190
92% off
Take This Course
  • Lectures 328
  • Length 16.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Assignments
    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 11/2016 English

Course Description

No matter at which Metric you look (Google Trends, Github Stars, Tweets ...) VueJS is the Shooting Star in the World of JavaScript Frameworks - it simply is amazing!

Frontend Frameworks are extremely popular because they give us this reactive, great User Experience we know from Mobile Apps - but now in the Browser! No wonder that Jobs requiring Frontend Framework Skills like VueJS are amongst the best paid ones in the Industry!

You may know Angular 2 and ReactJS, well, VueJS combines the Best of both Frameworks and makes building anything from small Widgets to big, Enterprise-Level Apps a Breeze and a whole lot of Fun! And if you don't know the two mentioned Frameworks: That's fine, too, this Course does not expect any knowledge of any other Frontend Framework - you will learn it all throughout this Course!

### This Course covers it all! ###

We'll start at the very Basics, what Vue.js is and how it works before we move on to more Complex and Advanced Topics but I'll be honest: It's too much to fit it all into one Sentence, so here's what you'll learn in this Course:

  • What is VueJS and Why would you use it?
  • Setting up a Development Environment and Workflow
  • The Basics (including the basic Syntax, Understanding Templates and much more!)
  • Interacting with DOM (Rendering Lists, Conditionally attaching/ detaching Elements ...)
  • Using Components (and what Components are to begin with)
  • Binding to Form Inputs
  • All about DirectivesFilters and Mixins
  • How to make your App more Beautiful with Animations and Transitions
  • How to create an awesome Single-Page-Application (SPA) with Routing
  • How to improve State Management by using Vuex
  • How to Deploy the App
  • And much more ...

And all the accompanied with many Exercises and multiple Course Projects - because it isn't just about seeing Code, it's about using and practicing it!

### Is this Course for you? ###

Now that you know what this Course is about, let's see if this Course is for you!

Here are three Types of Students who will love this Course:

Student #1:

Has some JavaScript Experience and is interested in what this Language can do. He heard and read that JavaScript allows you to create nice Web Applications and enhance existing Web Pages. VueJS is your choice!

Student #2:

He already has some Experience with other Frontend Frameworks like Angular (2) or ReactJS. But either due to interest or disappointment of the existing Frameworks, he seeks some Alternatives - VueJS might be what you were looking for! 

Student #3:

Has Experience with backend Frameworks/ Languages but now also wants to enter the Frontend World. VueJS is an awesome choice here, it's fun, it uses native JS and it's extremely powerful!

Bonus: Student #4

Is disappointed by Angular 2. Does a good Framework need 2 hours of setup? No, certainly not - as VueJS will prove to this Student!

Let's dive into VueJS right now!

What are the requirements?

  • Basic JavaScript Knowledge is Required
  • ES6 Knowledge is a Plus but not a Must
  • Basic HTML and CSS Knowledge is assumed throughout the Course

What am I going to get from this course?

  • Build amazing Vue.js Applications - all the Way from Small and Simple Ones up to Large Enterprise-level Ones
  • Understand the Theory behind Vue.js and use it in Real Projects
  • Leverage Vue.js in both Multi- and Single-Page-Applications (MPAs and SPAs)

Who is the target audience?

  • This Course is for Everyone interested in Frontend Development and Major JavaScript Frameworks
  • This Course is for you if you want to create Reactive Applications, which run in the Browser
  • This Course also targets Students who prefer a native JavaScript Framework which makes Getting Started much simpler than Angular 2
  • Displeased with Angular 2? VueJS is for you!

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: Getting Started
03:08

Welcome to this Course! In this lecture you'll see why that was exactly the right choice!

04:45

We know the WHAT and WHY - now let's jump right into it! This lecture shows how to get started with VueJS and create first simple App with it.

04:12

Let's extend our first little Application a bit and add more features to it.

03:44

We created our first Application - what else does this Course offer? You'll learn in this video!

01:55

There are a couple of Resources you can use throughout this Course - learn more about them in this lecture.

02:02

Don't want to use JSFiddle? No problem, you can follow along with a local setup as well!

Module Resources & Useful Links
00:10
Section 2: Using VueJS to Interact with the DOM
00:45

Let me give you a brief introduction to this module.

02:34

It's key to understand HOW VueJS interacts with the DOM. It does so, by using Templates. This lecture explores how this basic connection works and how you can use it.

02:42

VueJS apps have this strong connection between your templates ("the DOM") and your business logic. The latter resides in the Vue Instance. This lecture therefore explores both.

01:49

It's key to understand how you may access data in the Vue Instance. It actually proxies all the properties you set up in the data property. But let's dive deeper into this topic, in this lecture.

02:42

So far, we always used String Interpolation. That doesn't work if we want to bind to any element attributes (like <img src="...">). This lecture therefore explores our alternatives.

01:27

Directives are another powerful feature, VueJS offers us. This lecture explains what Directives are and how you may use some of the built-in ones.

01:41

Normally you want your page content to be updated by VueJS. But if you don't want that, v-once is a handy directive to suppress this functionality. Learn more, in this video.

02:43

Did you already try to output HTML code (instead of plain text)? That probably won't work with normal String Interpolation! But no worries, there is a way to still output HTML - this lectures shows you how.

You learned a lot about the VueJS 2 Template Syntax and how you may output Data to your template, hence rendering it on the page. Time to practice this in this first Assignment!
01:50

So far we learned how to output data. That's nice. But in a real application, you'll also want to listen to User/ DOM Events. VueJS has a Directive for that and this video explains how it works.

02:36

It's nice to be able to listen to an Event but maybe you also want to use the Event Data? Nothing easier than that, let this lecture explain how to access the Event Data!

01:53

Not satisfied with the default Event Object you get supplied by the DOM/ JavaScript? You can also pass your own Data - learn more in this lecture!

03:23

Sometimes you want to change the default behavior of an Event. VueJS offers you Event Modifiers as a nice Tool to achieve that.

02:03

You want to listen to a specific Key being pressed? VueJS makes that easy - with Key Modifiers. Learn more, in this lecture!

More important Steps towards mastering VueJS Template Syntax have been taken. Time to use all the new Knowledge about how to use Events in a VueJS Application!
03:19

You're not limited to outputting properties or calling methods in your templates. You may also run (simple) JavaScript code there as this Lecture will show you.

01:49

We all know it since Angular (1), VueJS also has it. Whilst the standard flow of data is unidirectional, you may also use Two-Way-Binding and this lectures dives into how to do that.

09:32

Not all properties you use are static or updated manually. Some need to react to changes of other properties. Computed properties are there to help! Learn how to use them, in this video!

03:53

Computed Properties should be your preferred choice, but sometimes you want to execute some specific code when one part of your application changes. You can Watch for such changes, this lecture explores how that works.

01:26

We covered a lot of the basics until now. We repeatedly used v-bind and v-on for that. Well, we can save some time there - and this lecture shows how.

In the last Lectures, you learned a lot about how VueJS handles Reactivity. Time to put this to Practice and do some Exercises on it!
04:22

Often times, you not only want to change the data you print to the screen, but also some styling. Well you can do that as this lecture will show.

01:35

Now that we covered the basics about using CSS Classes dynamically, it's time to dive deeper and understand how else we may use that feature.

03:27

Let's finish the short trip in the world of dynamic CSS Classes by having a look at some other tools we can use in conjunction with them.

03:15

So far, we learned how to style elements dynamically when using CSS Classes. Maybe you don't want to use CSS Classes though. This lecture explores how you may directly manipulate the Styling of an element.

01:14

As with CSS Classes, we can also use the Array Syntax to apply custom Styles directly to elements. Have a look at this lecture to learn more about it.

A lot has been covered in this Course Module. In the last Lectures, you learned how you may dynamically change the CSS Classes and Styles of Elements. Time to Practice this in this Assignment!
00:44

Let me summarize and wrap up this module for you.

00:17

This lecture contains all the JSFiddle Links used in this Module as well as some other useful links for you to dive deeper.

Section 3: Using Conditionals and Rendering Lists
00:48

Let me introduce you to this Module.

03:37

Sometimes you don't want to display certain parts of your DOM at all times. Sometimes a specific condition should control that. VueJS makes that easy by offering you the v-if directive. Learn more about it, in this video!

v-else-if in Vue.js 2.1
00:09
01:36

v-if can be used with two slightly different Syntaxes. Let's have a look at the alternative in this lecture.

01:43

v-if attaches and detaches elements to/ from the DOM. Sometimes you only want to set the CSS display property to "none" though. v-show is the tool you want to choose for that task!

02:25

A common task is to output an array of data. How do you do that with VueJS? It's very easy, let's explore it in this lecture.

01:51

What if you not only want to loop through all your items but also need the Index of the current iteration? VueJS got you covered as this lecture will show you.

01:10

As with v-if, we can use a different Syntax with v-for. Let's take a closer look in this lecture.

04:44

What if your data source isn't an array but a JavaScript object? You may still use v-for as this lecture will explain.

00:57

What if you only want to loop through all numbers from 1 to n? Do you need to create a new array for that? No, as this lecture shows, VueJS offers a shortcut for such a task.

04:08

In some cases, VueJS needs to keep track of the Elements you're rendering with v-for. You can therefore assign keys, this lecture shows you how.

Conditionals and Lists are key features of VueJS and constructs you'll probably use in every VueJS app. Time to practice them.
00:51

Let me summarize and wrap up this module.

00:05

This lecture contains all the JSFiddle Links used in this Module as well as some other useful links for you to dive deeper.

Section 4: First Course Project - The Monster Slayer
02:54

Let me introduce you to this Course Project and challenge you to build it on your own before seeing me build it!

02:37

Before writing any code, we need to set up the Course Project. I'll do that in this lecture.

05:16

Let's start by setting up the Vue Instance and start working on the basic interface. The Healthbars make for a good start, so let's start on that.

02:02

We got a lot of buttons to press, but not all buttons should be pressable at all times. So let's use our knowledge about Conditionals to control this.

01:53

Time to start working on those methods, such that the buttons actually do things. A good start is to allow the user to actually start a new game. This lecture shows my solution on this.

08:03

The game has started, that is great. But now it would be very useful if we could do more than just watch it. So let's add an additional method - one which allows us (the player) to attack.

04:52

Whilst creating applications, you're going to face the point of time where your code isn't optimal anymore. In such a case, you should consider refactoring. This lecture dives into that.

02:11

After refactoring, let's continue working on our base mechanics of this game. Time to add an additional action the user can execute!

02:21

On we go, time to allow the player to heal himself.

00:59

We got a couple of actions now, time to finish these buttons and make them all work as intended.

02:41

We got plenty of actions happening during our game. It's hard to keep track but thankfully we learnt how to store data in lists and then output such lists. So let's have a look at this, in this lecture.

02:19

Time to output the Log we created in the last lecture. We learnt about a very useful directive to do that. Do you remember?

01:57

Time for some final touches to make the log work as intended!

01:44

Right now, it's hard to tell which action comes from a user and which comes from the monster. Let's use our knowledge about dynamic CSS classes to change this!

01:28

We finished the Application! Let me wrap up what we achieved in this Module!

Full Application Code
00:02
Section 5: Understanding the VueJS Instance
01:04

Let me introduce you to this module.

02:58

I already dived into some of the basics of the VueJS instance in the other modules. Let me summarize some core things you need to know about it.

02:52

So far, we only used one Vue Instance. But you're not limited to that! This lecture explores how you may use multiple Vue Instances in your app.

03:29

We only used the Vue Instance from inside of it - that means, we only used its data, methods etc. inside of the Instance. You can also access these things from outside as this video will show.

04:01

Isn't that interesting, that we're able to access properties etc. from outside - directly on the Instance itself? This video explains how VueJS does that.

04:55

We already learned about $el and $data, but as these two properties are so important, let's dive deeper into them in this lecture.

05:47

Sometimes you want direct access to certain elements in your Template. VueJS can do that for you, all you need are some $refs. Learn more about that concept in this video!

00:58

We covered a lot, but it's pointless to cover every single option and method VueJS offers you. But you certainly need to know where to look for it! This video shows it.

06:42

Until now, we always used "el" to get a Template. There are other options as this video shows.

04:56

No worries, I got a whole section on Components, but here's a great place to get started with them and understand why a component-driven approach might make sense!

02:35

VueJS gives you different ways of using Templates, some of them have limitation as this video will teach you.

03:24

Did you ever wonder how VueJS knows when to update what? And how it does that in a high-performance way? That video explores this question.

03:12

Each Instance (and Component) in VueJS follows a certain lifecycle with events you can tap in to run your code. This lecture explains this lifecycle and which hooks you may use when.

05:39

Let's have a closer look at this VueJS Instance Lifecycle and see all the hooks in action.

00:54

Let me wrap up and summarize this module.

Module Resources & Useful Links
00:08
Section 6: Moving to a "Real" Development Workflow with Webpack and Vue CLI
01:33

Let me introduce you to this Course Module.

02:47

Until now we used a simple local setup or JSFiddle. I'd argue that we want a better setup, including a local development server (which runs our app). Why? This video explains it!

03:51

Why do we need a Development Workflow? And what is that to begin with? This lecture explains it!

02:35

VueJS also has its own CLI. That CLI doesn't have super-many features, but it has one major one: It allows us to quickly create a new Vue Projects from a couple of prepared templates.

04:18

Time to use the CLI! For that, we'll first install it (and learn its prerequisites) before we dive into our first project!

03:40

We chose the simple Webpack template - a great template for starter Projects (though also useable for bigger ones!). Let's have a look at all the folders and files which were created by the CLI.

06:45

Do you notice these strange ".vue" files? What are they? How do they work? This video takes a closer look.

01:11

There is an Object in the ".vue" File - let's have a closer look at it in this lecture.

00:49

Having a Development Workflow/ Build Process is great, but in the end, you probably want to deploy it. For that, the Template we use also has a Production Workflow. This video shows how to use that.

01:11

Let me summarize and wrap up this Module.

00:50

Want to learn more about ".vue" Files and the CLI? Here's the right place!

00:24

It's going to happen at some time: Your app doesn't behave the way it should behave. In such a case, debugging it is the thing you want to do. Let's learn how that works in your VueJS project (created with CLI).

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Maximilian Schwarzmüller, Professional Web Developer and Instructor

Experience as Web Developer

Starting out at the age of 13 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.

Starting web development on the backend (PHP with Laravel, NodeJS) I also became more and more of a frontend developer using modern frameworks like Angular 2 or VueJS 2 in a lot of projects. I love both world nowadays!

As a self-taught developer I had the chance to broaden my horizon by studying Business Administration where I hold a Master's degree. That enabled me to work in a major strategy consultancy as well as a bank. While learning, that I enjoy development more than these fields, the time in this sector greatly improved my overall experience and skills.

Experience as Instructor

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enables me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses as well as a successful YouTube channel is the best proof for that.

Whether working as development instructor or teaching Business Administration I always received great feedback. The most rewarding experience is to see how people find new, better jobs, build awesome web applications, acquire amazing projects or simply enjoy their hobby with the help of my content.

Ready to start learning?
Take This Course