vue写一个记事本有一个添加任务的按钮

在Vue.js中创建一个简单的记事本应用，我们可以使用单文件组件（Single File Component, SFC）的方式来实现。这里我们假设有一个`TaskItem.vue`组件用于显示一个任务项，然后在主组件`Notebook.vue`里添加添加任务的功能。

首先，创建一个基本的`TaskItem.vue`组件：

<!-- TaskItem.vue -->
<template>
  <li class="task-item">
    <input type="text" v-model="taskContent" placeholder="请输入任务内容...">
    <button @click="addTask">添加</button>
  </li>
</template>

<script>
export default {
  data() {
    return {
      taskContent: '',
    };
  },
  methods: {
    addTask() {
      this.$emit('add-task', this.taskContent);
      // 清空输入框内容
      this.taskContent = '';
    },
  },
};
</script>

接下来，在`Notebook.vue`组件中引入并使用`TaskItem`：

<!-- Notebook.vue -->
<template>
  <div class="notebook">
    <h2>记事本</h2>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        <TaskItem :content="task.content" @add-task="addNewTask"></TaskItem>
      </li>
    </ul>
    <button @click="showAddForm">添加任务</button>
    <TaskItem v-if="isAdding" :content="newTaskContent" @add-task="handleAddTaskSuccess"></TaskItem>
  </div>
</template>

<script>
import TaskItem from './TaskItem.vue';

export default {
  components: { TaskItem },
  data() {
    return {
      tasks: [],
      isAdding: false,
      newTaskContent: '',
    };
  },
  methods: {
    showAddForm() {
      this.isAdding = true;
    },
    handleAddTaskSuccess(task) {
      // 这里可以将新任务添加到tasks数组中
      this.tasks.push({ content: task });
      // 关闭添加模式
      this.isAdding = false;
    },
    addNewTask(content) {
      // 当子组件触发添加事件时，调用这个方法处理
      this.newTaskContent = content;
      this.showAddForm();
    },
  },
};
</script>

在这个例子中，当你点击“添加任务”按钮，`Notebook.vue`会显示添加任务的表单。用户填写后，点击添加按钮会触发`TaskItem.vue`的`add-task`事件，`Notebook.vue`接收到这个事件后会在`handleAddTaskSuccess`方法中处理任务内容，并更新任务列表。