Getting Started with Vue.js: A Beginner's Guide to Building a 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 do this by running the following command in our terminal:

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 our Todo List. We can do this by creating 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 Interactivity to the Todo List

Finally, we need to add interactivity to our Todo List. We can do this by adding a text input and a button to add new todos:

<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="newTodo" placeholder="Add new todo">
    <button @click="addTodo">Add</button>
    <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' }
      ],
      newTodo: ''
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ id: this.todos.length + 1, text: this.newTodo })
      this.newTodo = ''
    }
  }
}
</script>