分析文件并用Vue3的形式编写

好的，我将根据提供的文档内容，用 Vue 3 的形式来编写一个简单的待办事项应用。以下是完整的代码示例：

### 项目结构

src/
├── App.vue
├── components/
│   ├── Header.vue
│   ├── Main.vue
│   └── Footer.vue
└── main.js

### `main.js`

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

### `App.vue`

<template>
  <div id="app">
    <Header @add-task="addTask" />
    <Main :tasks="tasks" @delete-task="deleteTask" />
    <Footer :task-count="tasks.length" @clear-tasks="clearTasks" />
  </div>
</template>

<script>
import Header from './components/Header.vue';
import Main from './components/Main.vue';
import Footer from './components/Footer.vue';

export default {
  name: 'App',
  components: {
    Header,
    Main,
    Footer
  },
  data() {
    return {
      tasks: []
    };
  },
  methods: {
    addTask(task) {
      this.tasks.push(task);
    },
    deleteTask(index) {
      this.tasks.splice(index, 1);
    },
    clearTasks() {
      this.tasks = [];
    }
  }
};
</script>

<style>
/* 基础样式 */
body {
  font-family: Arial, sans-serif;
}
</style>

### `components/Header.vue`

<template>
  <header class="header">
    <h1>记事本</h1>
    <input type="text" v-model="newTask" @keyup.enter="addTask" placeholder="请输入任务" />
  </header>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      newTask: ''
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim()) {
        this.$emit('add-task', { text: this.newTask, completed: false });
        this.newTask = '';
      }
    }
  }
};
</script>

<style scoped>
.header {
  background-color: #f8f9fa;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

input {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>

### `components/Main.vue`

<template>
  <main class="main">
    <ul>
      <li v-for="(task, index) in tasks" :key="index" :class="{ completed: task.completed }">
        <span>{{ task.text }}</span>
        <button @click="$emit('delete-task', index)">删除</button>
      </li>
    </ul>
  </main>
</template>

<script>
export default {
  name: 'Main',
  props: {
    tasks: Array
  }
};
</script>

<style scoped>
.main {
  padding: 20px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.completed {
  text-decoration: line-through;
}

button {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #c82333;
}
</style>

### `components/Footer.vue`

<template>
  <footer class="footer">
    <p>总任务数: {{ taskCount }}</p>
    <button @click="$emit('clear-tasks')">清空任务</button>
  </footer>
</template>

<script>
export default {
  name: 'Footer',
  props: {
    taskCount: Number
  }
};
</script>

<style scoped>
.footer {
  background-color: #f8f9fa;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>

### 总结
- **根组件** `App.vue` 负责管理任务列表，并通过事件传递与子组件通信。
- **头部组件** `Header.vue` 提供输入框和添加任务的功能。
- **主体组件** `Main.vue` 渲染任务列表，并提供删除任务的功能。
- **底部组件** `Footer.vue` 显示任务总数，并提供清空任务的功能。

希望这些代码能帮助你完成任务！如果有任何问题或需要进一步的帮助，请随时告诉我。