按照要求和图片写出代码

为了帮助您更好地理解并实现这个 Todo 列表功能，我将提供一个基于 Vue.js 单文件组件 (SFC) 的示例代码。请注意，实际应用中可能需要根据具体需求进行调整或优化。以下是符合您的描述的代码：

### `App.vue` 文件

<template>
  <div id="app">
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="新增待办事项" />
    <ul>
      <li v-for="(todo, index) in todos" :key="index" :class="{ completed: todo.completed }" @mouseover="showDelete(index)" @mouseout="hideDelete(index)">
        <input type="checkbox" v-model="todo.completed" />
        {{ todo.text }}
        <button v-show="isDeleting === index" @click="removeTodo(index)">删除</button>
      </li>
    </ul>
    <footer v-if="todos.length > 0">
      <input type="checkbox" v-model="allSelected" />
      已完成 {{ completedTodosCount }} / 全部 {{ todos.length }}
      <button @click="clearCompleted">清除已完成任务</button>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: [],
      isDeleting: -1,
    };
  },
  computed: {
    allSelected: {
      get() {
        return this.todos.every(todo => todo.completed);
      },
      set(value) {
        this.todos.forEach(todo => (todo.completed = value));
      }
    },
    completedTodosCount() {
      return this.todos.filter(todo => todo.completed).length;
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.unshift({ text: this.newTodo, completed: false });
        this.newTodo = '';
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    },
    showDelete(index) {
      this.isDeleting = index;
    },
    hideDelete() {
      this.isDeleting = -1;
    },
    clearCompleted() {
      this.todos = this.todos.filter(todo => !todo.completed);
    }
  }
};
</script>

<style scoped>
.completed {
  text-decoration: line-through;
}
li:hover {
  background-color: #f0f0f0;
}
</style>

### 解释
1. **模板部分 (`<template>`)**:
- 使用 `<input>` 绑定 `v-model` 来获取新的待办事项，并通过 `@keyup.enter` 监听回车键事件来添加新项。
- 使用 `<ul>` 和 `<li>` 显示待办事项列表，每个列表项包括一个复选框和一个文本内容。
- 鼠标悬停时显示删除按钮，通过 `@mouseover` 和 `@mouseout` 控制 `isDeleting` 变量来决定是否显示删除按钮。
- 底部的 `footer` 区域显示全选复选框、已完成任务数和总任务数，并提供清除已完成任务的按钮。

2. **脚本部分 (`<script>`)**:
- `data` 中定义了 `newTodo`（用于输入新的待办事项）、`todos`（存储所有待办事项）和 `isDeleting`（控制删除按钮的显示）。
- `computed` 计算属性 `allSelected` 用于全选和取消全选，`completedTodosCount` 用于计算已完成的任务数。
- `methods` 中定义了添加、删除、显示和隐藏删除按钮以及清除已完成任务的方法。

3. **样式部分 (`<style scoped>`)**:
- `.completed` 类用于标记已完成的待办事项，加上删除线效果。
- `li:hover` 样式用于鼠标悬停时的高亮背景色。

希望这段代码能帮助您完成《Web前端框架》期中考试的 Todo 列表展示实验。如果有任何疑问或需要进一步的帮助，请随时告诉我！