Getting started with Vue.js

There are many javascript frameworks available for front end development. Each has it’s own set of unique features. But one which really attracted me is Vue.js. I recently started learning Angular2 and Vuejs simultaneously and I found it very easy to work with Vuejs. In fact, I am really loving development with Vuejs. In this tutorial, I will show you how we can create a very basic Todo app and learn the basics of Vue.js.

To keep things simple, we are not going to create any HTML page or use any framework. JSFiddle is good enough for us to get the basics right.

Now, here is the main JSFiddle code which will show you the final output.

But now, let’s go through the code in details:

The first thing that we have done is created a new Vue instance and added the “el” property to tell Vuejs that the appĀ scope is limited to a div with id #vue-app.

The “data” property is how we add variables and use them in our app. And “methods” is the object where we can define our functions which will be used throughout the app.

You can see the Youtube video