写一个vue待办事项

创建一个简单的Vue.js待办事项应用通常包括以下几个步骤：

1. **安装依赖**：
首先，你需要安装Vue CLI，然后初始化一个新的项目。运行命令行：

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

2. **创建组件**：
创建一个名为`TodoItem.vue`的文件，定义一个单个待办事项：

   <template>
     <div class="todo-item">
       <input type="text" v-model="title" placeholder="添加任务...">
       <button @click="deleteItem">删除</button>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         title: '',
       };
     },
     methods: {
       deleteItem() {
         this.$emit('item-delete', this.title);
       }
     }
   }
   </script>
   <style scoped>
   .todo-item {
     padding: 5px;
   }
   </style>

3. **主组件**（如App.vue）中管理列表：

   <template>
     <div id="app">
       <h2>待办事项列表</h2>
       <ul ref="todoList">
         <li v-for="(item, index) in todos" :key="index">
           {{ item }}
           <TodoItem v-on:item-delete="removeTodo(index)" />
         </li>
       </ul>
       <input v-model="newTodo" placeholder="输入新任务...">
       <button @click="addTodo">添加</button>
     </div>
   </template>

   <script>
   import TodoItem from '@/components/TodoItem.vue';

   export default {
     components: { TodoItem },
     data() {
       return {
         newTodo: '',
         todos: [],
      };
     },
     methods: {
       addTodo() {
         if (this.newTodo.trim()) {
           this.todos.push(this.newTodo);
           this.newTodo = '';
         }
       },
       removeTodo(index) {
         this.todos.splice(index, 1);
       }
     }
   }
   </script>

4. **样式** 可以根据需求自定义。