vue3开发一个todo List

创建新的 Vue 3 项目：

按装vue3的工具

npm install -g @vue/cli

创建一个新的 Vue 3 项目：

vue create vue3-todolist

进入项目目录：

cd vue3-todolist

代码：

在项目的 src/components 目录下，创建一个新的文件 TodoList.vue，将以下代码复制到这个文件中：

<template><div><h1>任务 例表</h1><div><input v-model="newTodo" @keyup.enter="addTodo" placeholder="增加任务"><button @click="addTodo">Add</button></div><ul><li v-for="(todo, index) in todos" :key="index"><span>{{ todo.text }}</span><button @click="removeTodo(index)">删除</button></li></ul></div>
</template><script>
import { ref } from 'vue';export default {setup() {const newTodo = ref('');const todos = ref([]);const addTodo = () => {if (newTodo.value.trim() !== '') {todos.value.push({ text: newTodo.value });newTodo.value = '';}};const removeTodo = (index) => {todos.value.splice(index, 1);};return {newTodo,todos,addTodo,removeTodo};}
};
</script>

在主应用文件中使用组件：

打开 src/App.vue 文件，将以下代码替换到文件中：

<template><div id="app"><TodoList /></div>
</template><script>
import TodoList from './components/TodoList.vue';export default {components: {TodoList}
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;color: #2c3e50;margin-top: 60px;
}button {margin-left: 5px;
}
</style>