vue框架写todolist

在Vue.js中创建一个简单的待办事项(Todo List)应用是一个很好的开始，它展示了如何利用组件化思想管理UI状态。以下是基本步骤：

1. **安装依赖**:
首先确保已安装Node.js和Vue CLI。在命令行中运行`vue create todo-app`创建一个新的Vue项目。

2. **设置基本结构**:
在`src/components`目录下创建两个文件夹：`Todos` 和 `TodoItem.vue`。`Todos.vue`将作为整体列表组件，而`TodoItem.vue`用于单个待办项。

3. **TodoItem.vue** (单个待办项):
- 创建一个模板，包含输入框、按钮和复选框。

   <template>
     <li>
       <input v-model="item.text" type="text" />
       <button @click="completeItem">完成</button>
       <span class="toggle">
         <input type="checkbox" :checked="item.completed" />
       </span>
       <span>{{ item.text }}</span>
     </li>
   </template>

- 添加数据属性和计算属性。

   <script>
   export default {
     data() {
       return {
         item: {
           text: '',
           completed: false,
         },
       };
     },
     methods: {
       completeItem() {
         this.item.completed = !this.item.completed;
       },
     },
   };
   </script>

4. **Todos.vue** (待办事项列表):
- 引入`TodoItem`组件，并绑定一个数组来存储待办事项。

   <template>
     <div>
       <h1>待办事项列表</h1>
       <ul>
         <li v-for="(todo, index) in todos" :key="index">
           <TodoItem :item="todo" @completeItem="handleCompleteItem(index)" />
         </li>
       </ul>
       <form @submit.prevent="addTodo">
         <input v-model="newTodoText" placeholder="添加新任务" />
         <button>Add</button>
       </form>
     </div>
   </template>

- 定义数据和方法。

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

   export default {
     components: { TodoItem },
     data() {
       return {
         todos: [],
         newTodoText: '',
       };
     },
     methods: {
       addTodo() {
         if (this.newTodoText.trim()) {
           this.todos.push({ text: this.newTodoText, completed: false });
           this.newTodoText = '';
         }
       },
       handleCompleteItem(index) {
         this.todos[index].completed = !this.todos[index].completed;
       },
     },
   };
   </script>

5. **样式**:
在`src/App.vue`或其他适合的地方，添加一些基本CSS样式美化列表和组件。