Vue JS - The Complete Guide (incl. Vue Router & Vuex)

Let me give you a brief introduction to this module.

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.

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.

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.

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.

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.

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.

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.

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.

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!

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!

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

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

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.

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.

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!

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.

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.

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.

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.

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.

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.

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.

Let me summarize and wrap up this module for you.

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

Let me introduce you to this Module.

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-if can be used with two slightly different Syntaxes. Let's have a look at the alternative in this lecture.

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!

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.

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.

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

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

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.

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.

Let me summarize and wrap up this module.

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

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

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

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.

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.

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.

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.

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.

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

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

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

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.

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

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

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!

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

Let me introduce you to this module.

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.

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.

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.

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.

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

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!

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.

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

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!

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

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.

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.

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

Let me wrap up and summarize this module.

Let me introduce you to this Course Module.

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!

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

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.

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

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.

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

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

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.

Let me summarize and wrap up this Module.

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

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).

Let me introduce you to this course module on Components.

The title says it all: Time to understand what Components are, how they work and how you can use them.

Components extend the VueJS Instance. Therefore, they share the same fields (like "methods", "computed" etc.). There's one important difference regarding the "data" field though. This lecture explains which difference that is.

You can register Components either on application-level or locally in a specific component. This lecture explains both approaches and which differences you should take into account.

You probably noticed, that we always have the App.vue file in our setup. What's this Object in this file all about? This lecture explains it.

Finally! It's time to create a new Component on our own. This lectures teaches you how that works.

We created a new Component, now how do we use it? This lecture dives into that question and shows how to use the Component.

Find the source code of the solution attached to this module.

Right now, our Folder Structure isn't very good. It's quickly getting crowded and we certainly don't even want to think about building a more complex application with such a structure! Time to change that - in this video.

If you're using .vue files, you're pretty free regarding the choice of your component selectors/ tags. So what are good names? This lecture explains some things you might want to take into consideration.

When using .vue files, you can scope the styles of that file to the component contained in that file. Sounds awesome? It is - let's learn more in this video!

Let me wrap up and summarize this module.

Let me introduce you to this course module.

Let's first understand which problem we actually need to fix before diving into the solutions. This lecture sets up a simple projects and shows what our goal is.

One of the most common forms of passing data is to use "props". "props" are used to pass data from a parent to a child component. Learn more about it in this lecture.

How can and should you name your props? Let's have a look at this question in this lecture.

We're able to pass "props". Great! Now let's understand how may use them in the receiving (child) component.

In most cases, we can't work with any random type of prop. We expect a string, number or whatever we need. For that, we can set up "props" validation. This lecture explores how that works.

We could use "props" to pass data from the parent to the child component. What if we want to do it the other way around? That's also possible, though not with "props". Learn which other option you have, with this module.

To understand when to use "props" and when to use custom events, it's key to understand how data flows in a VueJS app. This lectures explores this a little bit more.

An alternative to custom events would be callback functions you pass as "props" from parent to child component. Learn more about this alternative in this lecture.

So far we only looked at parent<=>child relations. What if we got two (or more) sibling components which want to talk with each other? Let's explore one way of enabling this in this lecture.

Building chains of "props" and events can quickly become cumbersome. Fortunately, there's an alternative: Using an Event Bus. Learn more about that in this lecture.

We learned about the Event Bus, let's now dive a little deeper and see what else we can do with it.

Find the Exercise Solution Code attached!

Let me wrap up and summarize this module.

Let me introduce you to this course module on advanced component usage.

In order to show some advanced component concepts, we'll need a tiny project to work with. Let's set it up in this lecture.

What if you wanted to pass more complex content from a Parent to a Child component? Let's first have a look at a suboptimal solution.

For passing (HTML) content from a Parent to a Child Component, VueJS offers a concept called "Slots". Let's explore this concept in this lecture.

When passing and distributing Content via Slots, the question is: Which Styles do apply and where does the Content get compiled? Let's dive into these questions now.

Styling slots now works differently - a bit.

Sometimes you really want the highest amount of control over how and where your Content should be displayed in the receiving Component. Named Slots help you with this as this lecture will explain.

When using Slots, VueJS has some Default assumptions - learn more about them in this lecture.

Time to sum up the things we learned about Slots in this module thus far.

What if you had an Application where you had multiple Components displayed conditionally in the same place? VueJS has a concept called "Dynamic Components" which should help you with that!

When using Dynamic Components, it's key to understand how they behave and should be used. This lecture dives into this.

What happens to Dynamic Components which are currently not rendered? This lecture explores this question and shows a way to change the default behavior.

Due to their dynamic nature, Dynamic Components ship with some extra Lifecycle hook - let's dive deeper in this lecture.

Let me wrap this module up.

Let me introduce you to this course module and the Application we're going to build here!

Let's start by setting up the base Project we're going to use throughout this module.

Now that the Project is set up, it's time to initialize the VueJS Application - let's do this in this lecture.

What will our Application certainly need? Components! So let's set them up in this lecture!

Time to use the things we learned about passing data - by adding Slots and Props to our Application.

Displaying Quotes is nice, but we certainly want to be able to add new ones. This lecture dives into this.

How do we inform our App that a new Quote was added? Well, a Custom Event sounds like a good idea, so let's add this functionality to the App.

Not the most important part of the Application, but hey - let's display a Info Box!

Adding and viewing Quotes is a great thing, but sometimes we want to get rid of Quotes. This lecture dives into this topic.

Our App has a Quote Limitation. Time to add a visual display of it.

Time to finish the App and control the Application State!