How to build simple todo list with Vue.js - Part 1
Tags: html, css, javascript, vue
Published: 2022-08-04 18:35:35

### 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](https://vuejs.org/guide/quick-start.html). 
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:

```html
<!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 <div id="app"> 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:

```html
<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:

```html
<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:

```html
<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.