Vue.js for Beginners: Up and Running with Vue

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.

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.

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.

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

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.

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.

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.