• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Javascript » Tutorial Create Todolist App With Vue Js 2 For Beginners

Tutorial Create Todolist App With Vue Js 2 For Beginners

By Sigit Prasetya Nugroho ∙ September 29, 2018 ∙ Javascript ∙ Leave a Comment

Share : TwitterFacebookTelegramWhatsapp

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

Table of Contents

  • 1 Let’s start making todolist applications with vue js 2 for beginners
    • 1.1 Complete html code as follows
    • 1.2 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.

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

Related Articles :

  • Let’s Get Acquainted And Learn About VUE JS 2 Tutorial For Beginners

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

Tutorial Vue Js 2 Create Todolist Application For Beginners In 5 Minute

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.

Another Javascript Related Post :

  • Adept Using Datatables Plugin In 10 Minutes For Beginners (Tutorial)
  • The Using Of Reactstrap And React-Table, Suitable For Beginners
  • Tutorial Create Simple Block UI Using React JS
  • How To Implement Login Page And Protected Route ReactJS
  • Complete Tutorial React Router Dom For Beginners (Easy-To-Understand)
  • The Right Way Understanding React Lifecycle For Beginners

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (7) Publisher Tips (5) react (3) Reactjs (7) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) widget (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2021 Seegatesite.com