vue写一个记事本有一个添加任务的按钮，然后运行步骤

在Vue.js中创建一个简单的记事本应用，其中包含添加任务的功能，可以按照以下步骤操作：

1. **初始化项目**:
首先，确保已安装Vue CLI工具。如果没有，请通过命令行运行 `npm install -g @vue/cli` 安装。

2. **创建新项目**:
使用Vue CLI生成一个新的项目，输入命令 `vue create my-notes-app`，选择默认选项即可。

3. **进入项目目录**:
创建完成后，切换到项目文件夹：`cd my-notes-app`.

4. **结构设计**:
在`src/components`目录下创建一个记事本组件（如`NoteList.vue`），用于显示任务列表；以及一个单独的任务输入组件（如`TaskInput.vue`）用于添加新的任务。

5. **组件编写**:
- **`NoteList.vue`**:

     <template>
       <div>
         <h2>任务列表</h2>
         <ul ref="taskList">
           <!-- 使用v-for遍历数据 -->
           <li v-for="(task, index) in tasks" :key="index">{{ task }}</li>
         </ul>
         <button @click="addTask">添加任务</button>
       </div>
     </template>

     <script>
       export default {
         data() {
           return {
             tasks: [],
           };
         },
         methods: {
           addTask() {
             const newTask = prompt("请输入新任务");
             if (newTask) {
               this.tasks.push(newTask);
             }
           },
         },
       };
     </script>

- **`TaskInput.vue`**:

     <template>
       <input type="text" v-model="newTask" placeholder="输入任务...">
       <button @click="submitNewTask">添加</button>
     </template>

     <script>
       export default {
         data() {
           return {
             newTask: "",
           };
         },
         methods: {
           submitNewTask() {
             this.$emit('new-task-added', this.newTask);
             this.newTask = "";
           },
         },
       };
     </script>

6. **组件连接**:
在`NoteList.vue`中引入`TaskInput.vue`并使用`v-if`或`v-show`条件渲染，然后监听`new-task-added`事件来处理添加任务的行为。

7. **主入口`App.vue`**:
简单地导入并使用`NoteList`组件，并将`TaskInput`作为子组件传递：

   <template>
     <div id="app">
       <note-list :tasks="tasks"></note-list>
       <task-input @new-task-added="addNewTask"></task-input>
     </div>
   </template>

   <script>
   import NoteList from "./components/NoteList.vue";
   import TaskInput from "./components/TaskInput.vue";

   export default {
     name: "App",
     components: {
       NoteList,
       TaskInput,
     },
     data() {
       return {
         tasks: [],
       };
     },
     methods: {
       addNewTask(task) {
         this.tasks.push(task);
       },
     },
   };
   </script>

8. **运行项目**:
在项目根目录下，运行 `npm run serve` 或 `yarn serve` 启动本地开发服务器，然后在浏览器中访问 `http://localhost:8080` 即可看到记事本应用。

完成以上步骤后，你就有了一个基本的记事本应用，点击“添加任务”按钮可以输入新任务并自动添加到列表中。