Tutorial Create Todolist App With Vue Js 2 For Beginners

After the introduction to vue js 2 in the previous article. The next step is to make a simple todolist application that is usually done by programmers to practice the new programming they are learning. Vue js 2 is the same as standard javascript and jQuery, the advantages have a more neat and time efficient structure. Follow the todolist tutorial with vue js 2 below

Let’s start making todolist applications with vue js 2 for beginners

Create an html framework. First we create a new file with the name index.html then insert the Vue file via the script tag like the code below:

Add bootstrap and fontawesome to enhance the look of the application

To try vue js it is running well, make a vue object and add the following script

and add the following syntax in the div app that we created above

The first one we will tell the Object if #app is the place to run the functions of the Vue JS. Run the browser and see the results, if successful the display will look like the following picture

Add new data with todolists and newtodolist names like the following code

Add input form and list group elements to the html component that we have prepared above under the h2 element

A little explanation of the above code is this todolist application has a data todolists which serves to accommodate data from the todolist item. Then we use the v-for directive to loop and display each todolist item in the view.

index is used as numbering or index key of an object todolists.

To use events like jquery and javascript we only need to add the v-on directive to the event that will be used, for example v-on: click

Make a new method that will be used to add and delete todolists objects

Please save and run on the browser, make sure the application runs like the following gif image

Complete html code as follows

Thus, my short tutorial is how to make a simple Todolist application using vue js 2, the next article will discuss further levels of using framework vue js 2 for beginners.