Welcome to this series about Vue.js, and thank you for joining! Before we get into writing code, let’s first take a look at what Vue.js actually is. Vue.js is a reactive framework for building web applications. Vue is different than other JavaScript frameworks in the way that it is not as intrusive. Besides the core library,… read more

Time to start writing some code! Let’s start things off with the classic “Hello World” example. The first thing we need to do, is to actually make Vue.js available to our very first Vue.js application. In order to do that,  head over to the installation page at vuejs.org. Here we have various options, from downloading the… read more

Now that you have seen how to set up Vue.js in JSFiddle, I just want to briefly show you how you can set up a simple development environment on your own machine. To keep things simple, I am not going to get into Webpack or the Vue CLI now, as I will cover this in… read more

We have already walked through the basics of using templates in Vue.js, where we saw how to use string interpolation to output data. I want to expand a bit on that and show you that you can also use simple JavaScript expressions within the string interpolation syntax. The reason I said simple JavaScript expressions is… read more

In previous videos, we have seen how we can output data with string interpolation. But what if we need to output data based on certain rules or logic? In that case, it might be handy to have a function in which we can embed JavaScript logic. Or perhaps we want to fetch data from a… read more

Before moving on, I just want to mention a thing or two about the ES6 arrow functions. While they are really useful in many cases, you also have to be a bit cautious with them. Let’s take the example from the previous lecture and see what happens if we change the getFullName method to an… read more

Now that we have covered string interpolation and methods, it’s time to talk about something called directives. Directives apply special reactive behavior to the rendered DOM. You will see what this means during the next couple of articles, but the easiest way to wrap your head around it is to see an example. Suppose that… read more

Remember how we can embed simple JavaScript expressions within the string interpolation syntax? Well, we can actually do the same with directives. Without further ado, let’s see an example of using an expression. So I have added a Vue instance in advance which simply contains my full name in two data properties, and a div… read more

So far we have seen how Vue.js reacts to changes in our data and updates the DOM accordingly, based on our template. But how can we react to DOM events, such as when a user clicks a button? Obviously we want users to be able to interact with our web application, and events are a… read more

By default, the native JavaScript event object is passed as the first argument to the method that we define, unless we actively change this. Adding an event parameter to the method will thus give us access to this object, and we can output it to the console to see what it looks like. new Vue({… read more