如何用Vue.js语言编写一个简单的待办事项列表（Todo List）应用？

在 Vue.js 中创建一个简单的待办事项（Todo List）应用，你可以按照下面的步骤进行：

1. **安装Vue**：
首先，你需要确保已经安装了Node.js和npm。然后，在项目目录下运行 `vue create todo-list-app` 创建一个新的Vue CLI项目，或手动创建一个基本的HTML文件并引入Vue。

2. **设置数据结构**：
在你的组件中，可以初始化一个数组来存储待办事项，例如：

   data() {
     return {
       todos: [
         { text: 'Buy milk', completed: false },
         { text: 'Call mom', completed: true }
       ]
     };
   }

3. **模板（HTML）**：
使用Vue的v-for指令遍历待办事项数组，显示每个条目：

   <div v-for="todo in todos" :key="todo.id">
     <input type="text" v-model="todo.text" />
     <input type="checkbox" v-model="todo.completed" />
     <button @click="deleteTodo(todo)">Delete</button>
   </div>

4. **方法（Methods）**：
定义一些处理用户操作的方法，如添加新任务、删除任务等：

   methods: {
     addTodo(text) {
       this.todos.push({ text, completed: false });
     },
     deleteTodo(todo) {
       this.todos = this.todos.filter(t => t !== todo);
     }
   }

5. **绑定事件和响应式**：
`v-model` 将双向地绑定输入框的值到数据模型上，当状态改变时自动更新视图。

6. **完整例子**：
这是一个简化的Todo List组件示例：

   <template>
     <div>
       <input v-model="newTodoText" placeholder="Add a new item" @keyup.enter="addTodo" />
       <ul>
         <li v-for="todo in todos" :key="todo.id">
           {{ todo.text }} ({{ todo.completed ? 'Completed' : 'Incomplete' }})
           <button @click="deleteTodo(todo)">X</button>
         </li>
       </ul>
     </div>
   </template>

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