How to build simple todo list with Vue.js - Part 1

#html #css #javascript #vue

What is this article about?

This article is about creating simple todo list web app with the help of awesome javascript framework - Vue. Vue.js has gained a huge popularity among developers because of its simplicity and developer-friendly syntax.

Today i will show how to create a todo list app and explain core features of the framework. This article would be especially helpful if you are a newbie to programming or if you have recently started learning Vue.js. Without much talking let's get started!

Setting up environment

There are 2 ways of adding Vue to your project: with build step and without build step. I will use the latter one because it's easier to connect. You can find more information about adding Vue here.
At first we will create vue-todo-list folder and add index.html file inside of that folder. The initial code of index.html should be like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue todo list app</title>
    <script src="https://unpkg.com/vue@3"></script>
  </head>
  <body>
    <div id="app"></div>

    <script>
      const { createApp } = Vue;

      createApp({
        data() {
          return {};
        },
      }).mount("#app");
    </script>
  </body>
</html>

After that

will be your template where the content of your code will be rendered. The data method inside createApp should always return an object where its properties will be the reactive state of your application.

Let's add html structure of our application:

<div id="app">
  <input type="text" />
  <button>Add</button>
  <br />
  <br />
  <ul></ul>
</div>

We have an input field for entering todo list content, a button for adding entered text and unordered list element for displaying all todo list items.

Now let's add Vue code for making our app interactive:

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        todolist: [],
        todo: "",
      };
    },
    methods: {
      add() {
        this.todo = this.todo.trim();

        if (!this.todo.length) return;

        this.todolist.push(this.todo);
        this.todo = "";
      },
    },
  }).mount("#app");
</script>

todolist inside data attribute is an array where we will store our todo list items and todo is the current value of todo which the user is entering in input field. Inside methods we can write all functionalities when some event is fired.

And now let's bind Vue logic to our template:

<div id="app">
  <input type="text" v-model="todo" />
  <button @click="add">Add</button>
  <br />
  <br />
  <ul>
    <li v-for="item in todolist" :key="item">{{item}}</li>
  </ul>
</div>

Here v-model is a Vue directive where input element and our reactive data is binded. In order to add event listeners to an element we should add @ before the event name. v-for directive is used to render content multiple times based on the source data. key attribute is like an id of the item. The default behavior of v-for will try to patch the elements in-place without moving them. To force it to reorder elements, you should provide an ordering hint with the key special attribute. And for rendering data attributes inside the template, we should wrap them with double curly braces {{}}.

In this article we learned how to add Vue.js to a project, how to render reactive data, how to add event listeners and some basic Vue directives. In the next parts i will add styling and i will show how to work with localStorage in order to keep our data after refreshing.

I hope you enjoyed this article. Thanks for reading.