使用Vite构建，暂不考虑拆组件，使用单文件实现Todo List。 删去components文件夹中的hello.vue文件，清空App.vue根组件，编写如下代码：
<template>
<!-- todo list app components -->
<div id="head">
<h1>Todo list</h1>
<input type="text" v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo" >
<button id="add-btn" @click="addTodo">Add</button>
</div>
<div id="display-todo">
<ul v-for="todo in todos">
<span :key="todo.id">
<input type="checkbox" v-model="todo.done">
{{ todo.title }}
<button @click="removeTodo(todo)">Remove</button>
</span>
</ul>
</div>
<div class="footer" v-show="todos.length">
All todos: {{ how_many_done + '/' + todos.length }}
</div>
</template>
<script >
let id = 0;
export default {
data() {
return {
todos: [],
newTodo: '',
editTodo: {}, // 处于修改状态的TODO
}
},
methods: {
addTodo() {
if (!this.newTodo) return;
this.todos.push({
id: id++,
title: this.newTodo,
done: false,
});
this.newTodo = ''; // 清空输入框
},
removeTodo(todo) {
const index = this.todos.findIndex(x => x.id === todo.id);
this.todos.splice(index,1);
}
},
computed: {
how_many_done() {
return this.todos.filter(x => x.done).length;
},
}
}
</script>
<style scoped>
</style>
简单解释
<template> 部分
<template> 是Vue组件的顶级标签，用于定义组件的HTML结构。
-
<div id="head">：这是一个<div>元素，具有一个id属性，值为"head"。这个<div>用于包含应用的头部内容。 -
<h1>Todo list</h1>：这是一个标题标签，显示文本“Todo list”。 -
<input type="text" v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo">：<input type="text">：一个文本输入框。v-model="newTodo"：Vue.js的双向数据绑定指令，将输入框的值与组件data中的newTodo属性绑定。@keyup.enter="addTodo"：一个事件监听指令，当用户在输入框中按下回车键时，触发addTodo方法。placeholder="Add a new todo"：输入框的占位符文本。
-
<button id="add-btn" @click="addTodo">Add</button>：<button>：一个按钮元素。id="add-btn"：按钮的id属性，值为"add-btn"。@click="addTodo"：一个事件监听指令，当按钮被点击时，触发addTodo方法。
-
<div id="display-todo">：另一个<div>元素，具有id属性，值为"display-todo"。这个<div>用于显示待办事项列表。 -
<ul v-for="todo in todos">：<ul>：一个无序列表元素。v-for="todo in todos"：Vue.js的循环指令，遍历todos数组，并为数组中的每个元素（每个待办事项）创建一个列表项。
-
<span :key="todo.id">：<span>：一个行内元素。:key="todo.id"：一个动态属性指令，为每个列表项提供一个唯一的key，这对于Vue.js的虚拟DOM渲染性能优化是重要的。
-
<input type="checkbox" v-model="todo.done">：<input type="checkbox">：一个复选框元素。v-model="todo.done"：双向数据绑定指令，将复选框的选中状态与当前待办事项的done属性绑定。
-
{{ todo.title }}：插值表达式，显示当前待办事项的title。 -
<button @click="removeTodo(todo)">Remove</button>：<button>：一个按钮元素。@click="removeTodo(todo)"：一个事件监听指令，当按钮被点击时，触发removeTodo方法，并传递当前待办事项对象作为参数。
-
<div class="footer" v-show="todos.length">：<div>：一个<div>元素，具有class属性，值为"footer"。v-show="todos.length"：Vue.js的条件渲染指令，如果todos数组的长度大于0，则显示这个<div>。
-
All todos: {{ how_many_done + '/' + todos.length }}：显示已完成的待办事项数量和总待办事项数量。
<script> 部分
<script> 标签用于定义Vue组件的JavaScript逻辑。
let id = 0;：一个全局变量，用于为每个待办事项生成唯一的id。export default { ... }：定义了一个Vue组件对象。data() { return { ... } }：一个函数，返回组件的数据对象，包括todos数组、newTodo字符串和editTodo对象。methods: { ... }：一个对象，包含组件的方法，addTodo用于添加待办事项，removeTodo用于删除待办事项。computed: { ... }：一个对象，包含计算属性，how_many_done计算已完成的待办事项数量。
<style> 部分
<style> 标签用于定义组件的CSS样式。在这个组件中，<style>标签是空的，意味着没有定义任何样式。scope表示css代码仅对本文件生效。
