Getting Started with Vue.js: A Beginner's Guide to Building a Simple Todo List App

Introduction to Vue.js

Vue.js is a progressive and flexible JavaScript framework used for building user interfaces and single-page applications. In this tutorial, we will build a simple Todo List app to get started with Vue.js.

Step 1: Setting up the Project

First, we need to set up a new Vue.js project. We can use the Vue CLI to create a new project.

npm install -g @vue/cli
vue create todo-list-app

Step 2: Creating the Todo List Component

Next, we need to create a new component for the Todo List. Create a new file called TodoList.vue in the src/components directory.

<template>
  <div>
    <h1>Todo List</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [
        { id: 1, text: 'Buy milk' },
        { id: 2, text: 'Walk the dog' },
        { id: 3, text: 'Do homework' }
      ]
    }
  }
}
</script>

Step 3: Adding New Todos

Now, we need to add a form to add new todos. Update the TodoList.vue file to include a form.

<template>
  <div>
    <h1>Todo List</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
      </li>
    </ul>
    <form @submit.prevent="addTodo">
      <input type="text" v-model="newTodo" placeholder="Add new todo">
      <button type="submit">Add</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [
        { id: 1, text: 'Buy milk' },
        { id: 2, text: 'Walk the dog' },
        { id: 3, text: 'Do homework' }
      ],
      newTodo: ''
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ id: this.todos.length + 1, text: this.newTodo })
      this.newTodo = ''
    }
  }
}
</script>

Conclusion

In this tutorial, we learned how to build a simple Todo List app using Vue.js. We covered the basics of Vue.js and how to create a new project, component, and add new todos.