如何用Vue.js开发一个待办事项应用

vue create todo-app
cd todo-app
npm install
npm run serve

// TodoList.vue
<template>
  <div>
    <h1>待办事项</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加新任务">
    <ul>
      <TodoItem v-for="todo in todos" :key="todo.id" :todo="todo" @remove="removeTodo"/>
    </ul>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue'

export default {
  components: {
    TodoItem
  },
  data() {
    return {
      newTodo: '',
      todos: []
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push({
          id: Date.now(),
          text: this.newTodo,
          done: false
        })
        this.newTodo = ''
      }
    },
    removeTodo(id) {
      this.todos = this.todos.filter(todo => todo.id !== id)
    }
  }
}
</script>

<style scoped>
/* 样式省略 */
</style>

// TodoItem.vue
<template>
  <li :class="{ done: todo.done }">
    <span @click="toggleDone">{{ todo.text }}</span>
    <button @click="$emit('remove', todo.id)">删除</button>
  </li>
</template>

<script>
export default {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  methods: {
    toggleDone() {
      this.todo.done = !this.todo.done
    }
  }
}
</script>

<style scoped>
.done {
  text-decoration: line-through;
}
</style>