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:

<!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>

<!doctype html>

<head>

<title>To Do List Apps With Vue Js 2 By Seegatesite.com</title>

</head>

<body>

</div>

</body>

</html>

Add bootstrap and fontawesome to enhance the look of the application

<!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">

<!doctype html>

<head>

<title>To Do List Apps With Vue Js 2 By Seegatesite.com</title>

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

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
	el: '#app',
	data: {
		message: "Welcome to vue js 2"	
	}
})
</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

<div id="app">
<div class="container">
<h2 class="text-center">{{message}}</h2>
</div>
</div>

<h2 class="text-center">{{message}}</h2>

</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

todolists :[
		{text : "Tutorial Todolist"},
		{text : "Tutorial Vue JS"},
		{text : "Tutorial Angular 5"},
		],
		newtodolist : ""

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

<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>

<form>

<label for="todolist">Todolist</label>

</div>

</form>

</div>

</li>

</ul>

</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.

v-for="(todolist,index) in todolists"

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

methods:{
		addTodo:function(){
			this.todolists.push({text:this.newtodolist});
			this.$refs.textbox.focus()
			this.newtodolist = ""	
		},
		removeTodo:function(index){
			this.todolists.splice(index,1);
		}
	}

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

<!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>