vue.js待办事项

Vue.js是一个轻量级的前端JavaScript框架，特别适合构建用户界面和管理数据。在Vue.js中创建待办事项应用通常是初学者的一个常见实践项目。下面简单介绍一下如何用Vue构建一个基本的待办事项列表：

1. **设置环境**：首先需要安装Node.js和Vue CLI，然后通过命令行初始化一个新的Vue项目。

2. **创建组件**：可以创建两个核心组件：`TodoList` 和 `TodoItem`。`TodoList`负责显示整个任务列表，`TodoItem`则是单个任务的表示。

<!-- TodoList.vue -->
<template>
  <div>
    <input v-model="newTodo" placeholder="添加新的待办事项">
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo.text }}
        <button @click="removeTodo(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

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

3. **组件实例化**：在主`App.vue`文件中，将这两个组件作为子组件使用，并绑定数据到它们。

4. **状态管理**：为了保持全局的状态，可以使用Vuex进行状态管理，特别是当有多处地方需要用到待办事项列表时。

5. **样式美化**：使用CSS或预处理器如Sass或Less对组件进行样式设计。