Introduction to Vue.js | Easy creation in 60 lines!! Let's create a minimal configuration TODO application

at first

I would like to explain how to make a TODO app for beginners who have learned Vue.js but don’t know what to make.

What I’m going to show you now is an example of creating a simple TODO application. The application should also add the ability for the user to add, edit, and delete TODO items and save the TODO list in the browser’s web storage. Below is the completed TODO application.

Let’s take a look at the entire source code.

<html>
  <head>
    <title>TODO</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <div id="app">
    <form @submit.prevent="addTodo">
      <input v-model="newTodo" placeholder="Add TODO" />
      <button type="submit">Add</button>
    </form>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.completed" />
        <span v-if="!todo.editing">{{ todo.text }}</span>
        <input
          v-else
          v-model="todo.text"
          @blur="todo.editing = false"
          @keyup.enter="todo.editing = false"
        />
        <button @click="removeTodo(todo)">Remove</button>
        <button v-if="!todo.editing" @click="todo.editing = true">Edit</button>
      </li>
    </ul>
    <button @click="saveTodos">Save</button>
  </div>
</html>

<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        newTodo: "",
        todos: JSON.parse(localStorage.getItem("todos")) || \[\],
      };
    },
    methods: {
      addTodo() {
        let text = this.newTodo.trim();
        if (text) {
          this.todos.push({
            id: this.todos.length + 1,
            text,
            completed: false,
          });
          this.newTodo = "";
        }
      },
      removeTodo(todo) {
        this.todos = this.todos.filter((t) => t.id !== todo.id);
      },
      saveTodos() {
        localStorage.setItem("todos", JSON.stringify(this.todos));
      },
    },
  }).mount("#app");
</script>

Download Vue.js from CDN 

<head>
  <title>TODO</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

The above source code loads Vue.js from CDN.

Vue.js has several environment construction methods, but when it comes to large-scale projects, It is better to create a project template with CLI.

However, since this is a small application, we will use a CDN.

Create a function to add TODO 

 <form @submit.prevent="addTodo">
   <input v-model="newTodo" placeholder="Add TODO" />
   <button type="submit">Add</button>
 </form>

Create a submit event listener with the @submit.prevent directive on the <form> element. Prevent the default behavior and call the addTodo() method when the form is submitted. If you don’t add prevent to submit, redirect processing will occur, so don’t forget to add it.

The form has an input element with a v-model directive, which is used to enter new TODO items.

addTodo() {
  let text = this.newTodo.trim();
  if (text) {
    this.todos.push({
      id: this.todos.length + 1,
      text,
      completed: false,
  });
  this.newTodo = "";
  }
}

This method is a function to add a new TODO entered from the form.

Assign the trimmed value of newTodo to the first variable text. Add a new TODO to the todos array if text is not empty using conditional branching.

A new TODO has id, text and completed properties. id will be the length of the current todos array +1 text is the text of the new TODO entered completed defaults to False and is an item that has completed the TODO but is checked by the user.

Finally, empty the newTodo value.

list TODO 

<ul>
  <li v-for="todo in todos" :key="todo.id">
    <input type="checkbox" v-model="todo.completed" />
    <span v-if="!todo.editing">{{ todo.text }}</span>
    <input
      v-else
      v-model="todo.text"
      @blur="todo.editing = false"
      @keyup.enter="todo.editing = false"
    />
    <button @click="removeTodo(todo)">Remove</button>
    <button v-if="!todo.editing" @click="todo.editing = true">Edit</button>
  </li>
</ul>

Use the v-for directive to generate li elements for every element in the TODO list. Each li element has a checkbox with a v-model directive to check if the TODO item has been completed. Also, the span element displays the text of the TODO item, and you can delete the TODO item by pressing the delete button.

Furthermore, by pressing the edit button, you can edit the TODO item, Using the @blur event listener, the form exit and edits are performed. Similarly, using the @keyup.enter event listener, pressing the Enter key will perform the edit.

removeTodo(todo) {
  this.todos = this.todos.filter((t) => t.id !== todo.id);
},

A function for deleting TODO items.

Creates a new array containing only elements whose id property of the todo object passed as an argument does not match the id property of each element in the todos array, and assigns it to this.todos . This removes the specified TODO item and also updates the display.

Create save function 

localStorage.setItem("todos", JSON.stringify(this.todos));

Description for saving the TODO list in Web Storage. The localStorage.setItem() method is used to save data to web storage. Pass the key name to save the data to the first argument and the data to save to the second argument. In this TODO app, a key named “todos” stores the current todos array converted to JSON format.

data() {
  return {
    newTodo: "",
    todos: JSON.parse(localStorage.getItem("todos")) || \[\],
  };
},

The saved data will be loaded the next time you open the app and your TODO list will be restored.

end

What do you think. I think it’s very simple.

If you have any questions, please feel free to contact us.

The source code created this time is placed below. https://github.com/wiblok/Vue.js

← Component
Let's leave the cumbersome recalculations to computed properties! →