Introduction to Vue.js Todo List App

In this tutorial, we will build a simple Todo List application using Vue.js. This application will allow users to add, remove, and mark tasks as completed.

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:

// src/components/TodoList.vue
<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' }
      ]
    }
  }
}
</script>

Step 3: Adding New Todos

Now, we need to add a form to allow users to add new todos. We can do this by adding a new input field and a button to our TodoList component:

// src/components/TodoList.vue
<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' }
      ],
      newTodo: ''
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ : .. + , : . })
      . = 
    }
  }
}