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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>To Do List Apps With Vue Js 2 By Seegatesite.com</title> </head> <body> <div id="app"> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </body> </html> |
Add bootstrap and fontawesome to enhance the look of the application
1 2 3 4 5 6 7 | <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>To Do List Apps With Vue Js 2 By Seegatesite.com</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> |
To try vue js it is running well, make a vue object and add the following script
1 2 3 4 5 6 7 8 9 | <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var app = new Vue({ el: '#app', data: { message: "Welcome to vue js 2" } }) </script> |
and add the following syntax in the div app that we created above
1 2 3 4 5 | <div id="app"> <div class="container"> <h2 class="text-center">{{message}}</h2> </div> </div> |
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
1 2 3 4 5 6 | todolists :[ {text : "Tutorial Todolist"}, {text : "Tutorial Vue JS"}, {text : "Tutorial Angular 5"}, ], newtodolist : "" |
Add input form and list group elements to the html component that we have prepared above under the h2 element
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class="row mt-5"> <div class="col-xs-12 col-md-4"> <form> <div class="form-group"> <label for="todolist">Todolist</label> <input type="text" class="form-control" ref="textbox" v-model="newtodolist" placeholder="Input todolist here..."> </div> <button type="button" class="btn btn-primary" v-on:click="addTodo">Save</button> </form> </div> <div class="col-xs-12 col-md-8 pt-4"> <ul class="list-group"> <li class="list-group-item disabled" v-for="(todolist,index) in todolists" :key="index"> {{todolist.text}} <button class="btn btn-danger btn-sm float-right" v-on:click="removeTodo(index)"> <span class="fa fa-remove"></span></button> </li> </ul> </div> </div> </div> |
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.
1 | v-for="(todolist,index) in todolists" |
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
1 2 3 4 5 6 7 8 9 10 | methods:{ addTodo:function(){ this.todolists.push({text:this.newtodolist}); this.$refs.textbox.focus() this.newtodolist = "" }, removeTodo:function(index){ this.todolists.splice(index,1); } } |
Please save and run on the browser, make sure the application runs like the following gif image
Complete html code as follows
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>To Do List Apps With Vue Js 2 By Seegatesite.com</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> </head> <body> <div id="app"> <div class="container"> <h2 class="text-center">{{message}}</h2> <div class="row mt-5"> <div class="col-xs-12 col-md-4"> <form> <div class="form-group"> <label for="todolist">Todolist</label> <input type="text" class="form-control" ref="textbox" v-model="newtodolist" placeholder="Input todolist here..."> </div> <button type="button" class="btn btn-primary" v-on:click="addTodo">Save</button> </form> </div> <div class="col-xs-12 col-md-8 pt-4"> <ul class="list-group"> <li class="list-group-item disabled" v-for="(todolist,index) in todolists" :key="index"> {{todolist.text}} <button class="btn btn-danger btn-sm float-right" v-on:click="removeTodo(index)"> <span class="fa fa-remove"></span></button> </li> </ul> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var app = new Vue({ el: '#app', data: { message : "Todolist App", todolists :[ {text : "Tutorial Todolist"}, {text : "Tutorial Vue JS"}, {text : "Tutorial Angular 5"}, ], newtodolist : "" }, methods:{ addTodo:function(){ this.todolists.push({text:this.newtodolist}); this.$refs.textbox.focus() this.newtodolist = "" }, removeTodo:function(index){ this.todolists.splice(index,1); } } }) </script> </body> </html> |
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.
Latest posts by Sigit Prasetya Nugroho (see all)
- How To Solve Problems Illegal mix of collations (latin1_swedish_ci,IMPLICIT) In Laravel - December 15, 2018
- Tutorial Create Todolist App With Vue Js 2 For Beginners - September 29, 2018
- Create WordPress Slider Without Javascript - August 30, 2018