To build a simple TODO list app in Vue, start with a basic setup using Vite, implement core features like adding, toggling, and deleting tasks, and optionally enhance with localStorage and filters. Begin by creating a Vue project with Vite via npm create vite@latest and select Vue with JavaScript. Next, design the UI structure in App.vue with an input field, a list, and buttons for task actions. Then, use Vue’s reactivity system—via ref and functions like addTask, toggleDone, and deleteTask—to manage and update task data. Optionally, improve usability by saving tasks in localStorage, adding task filters, or supporting keyboard shortcuts. This approach keeps the app functional and educational while avoiding unnecessary complexity.

Starting a TODO list app in Vue might sound basic, but it's a solid way to get familiar with Vue’s core features. The key is to keep it simple—focus on data handling, user interaction, and basic state management. You don’t need a full backend or complex tools to make it work. Here’s how to build one that actually does something useful without overcomplicating things.

Setting up the Vue project

Before writing any logic, you need a working Vue environment. The easiest way is to use Vite, which is fast and modern. You can create a Vue project with just a few commands:

• Run npm create vite@latest and follow the prompts
• Choose Vue and JavaScript (unless you want TypeScript)
• Install dependencies with npm install

Once that’s done, you’ll have a basic Vue setup ready to go. No need for Webpack or Babel unless you want to customize things later.

You can start the dev server with npm run dev and open your browser to see the default Vue template.

Creating the TODO list structure

The main components of a TODO list are:

• An input field to add new tasks
• A list that displays all tasks
• Buttons or checkboxes to mark tasks as done or delete them

In your App.vue, you can start by setting up the basic HTML structure inside the <template></template> tag. The key is to bind this structure to the reactive data in Vue.

Here’s a simple example:

<template>
  <div>
    <input v-model="newTask" @keyup.enter="addTask" placeholder="Add a new task" />
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        <span :class="{ done: task.done }">{{ task.text }}</span>
        <button @click="toggleDone(index)">?</button>
        <button @click="deleteTask(index)">?</button>
      </li>
    </ul>
  </div>
</template>

This gives you a basic layout that users can interact with. Now let’s hook it up with Vue logic.

Managing task data with Vue’s reactivity

Inside the <script setup> block (or data() if you're using the Options API), define the reactive variables:

import { ref } from 'vue'

const newTask = ref('')
const tasks = ref([])

Then create the functions to manipulate the data:

function addTask() {
  if (newTask.value.trim() === '') return
  tasks.value.push({ text: newTask.value, done: false })
  newTask.value = ''
}

function toggleDone(index) {
  tasks.value[index].done = !tasks.value[index].done
}

function deleteTask(index) {
  tasks.value.splice(index, 1)
}

These functions are straightforward: they add, toggle, and remove tasks. Vue’s reactivity system ensures the UI updates automatically when the data changes.

Making it a bit smarter (optional improvements)

You can add small enhancements to make the app more usable without overcomplicating it:

• Persist tasks in localStorage: Save tasks so they don’t disappear after a refresh
• Filter tasks: Add buttons to show "All", "Active", or "Completed" tasks
• Add keyboard shortcuts: Like pressing Esc to clear the input

For example, to save tasks to localStorage:

// Load on mount
tasks.value = JSON.parse(localStorage.getItem('tasks') || '[]')

// Save on every change
watchEffect(() => {
  localStorage.setItem('tasks', JSON.stringify(tasks.value))
})

These touches make the app feel more complete and user-friendly.

That’s basically it. With Vue’s simplicity and reactivity, building a TODO list is both fast and educational. You can expand it later, but starting small helps you understand the core concepts without getting lost in complexity.

The above is the detailed content of Building a simple TODO list application in Vue. For more information, please follow other related articles on the PHP Chinese website!