用vue写一个任务清单

好的，以下是一个简单的 Vue 任务清单应用程序：

首先，在 HTML 中创建一个基本的布局，包括一个输入框和一个按钮，用于添加新任务。还需要一个任务列表，以显示当前的任务。

<div id="app">
  <h1>任务清单</h1>
  
  <div>
    <input v-model="newTask" placeholder="添加新任务">
    <button @click="addTask">添加</button>
  </div>
  
  <ul>
    <li v-for="(task, index) in tasks" :key="index">{{ task }}</li>
  </ul>
</div>

接下来，在 Vue 实例中定义数据和方法：

new Vue({
  el: '#app',
  data: {
    newTask: '',
    tasks: []
  },
  methods: {
    addTask() {
      if (this.newTask) {
        this.tasks.push(this.newTask);
        this.newTask = '';
      }
    }
  }
});

在这里，我们定义了 `newTask` 和 `tasks` 这两个数据属性。`newTask` 存储新任务的名称，`tasks` 存储当前所有的任务。

我们还定义了一个 `addTask` 方法，它将新任务添加到任务列表中。如果 `newTask` 不为空，则将其添加到 `tasks` 数组中，并将 `newTask` 重置为空字符串。

现在，当用户输入新任务并点击“添加”按钮时，它将被添加到任务列表中。

为了让应用程序更加交互和有用，我们可以添加其他功能，例如删除任务、标记任务已完成等。

希望这个简单的例子能够帮助你入门 Vue 和任务清单应用程序的开发。