当前位置：首页 > news >正文

vue、react前端框架实现TodoList页面案例

news 2025/8/13 0:46:22

原始TodoList网页（主要就是链接里网页应用ndex.html、styles.css、script.js ）：
https://blog.csdn.net/weixin_42357472/article/details/140657576
node、npn安装参考：
https://blog.csdn.net/weixin_42357472/article/details/140643624

vue、react区别
Vue：Vue 有自己的脚手架工具 Vue CLI，可以快速创建项目。Vue 还有自己的服务器渲染框架 Nuxt.js。
React：React 有自己的脚手架工具 Create React App，可以快速创建项目。React 还有自己的服务器渲染框架 Next.js。

1、vue框架实现TodoList页面案例

安装vue：

npm install -g @vue/cli
或
npm install -g cnpm --registry=https://registry.npm.taobao.org

在这里插入图片描述
创建应用：

vue create my-vue-project

在这里插入图片描述

进入项目写应用：

cd my-vue-project#修改以下文件：
src/App.vue

src/App.vue代码

<template><div id="app"><h1>TodoList</h1><form @submit.prevent="addTodo"><input v-model="newTodo" placeholder="Add a new todo"><button type="submit">Add</button></form><ul><li v-for="(todo, index) in todos" :key="index" :class="{ completed: todo.completed }"><input type="checkbox" v-model="todo.completed" @change="saveTodos"><span>{{ todo.text }}</span><button @click="deleteTodo(index)">Delete</button></li></ul></div>
</template><script>
export default {name: 'App',data() {return {newTodo: '',todos: []}},methods: {loadTodos() {const savedTodos = localStorage.getItem('todos')if (savedTodos) {this.todos = JSON.parse(savedTodos)}},saveTodos() {localStorage.setItem('todos', JSON.stringify(this.todos))},addTodo() {if (this.newTodo.trim() === '') returnthis.todos.unshift({ text: this.newTodo, completed: false })this.newTodo = ''this.saveTodos()},deleteTodo(index) {this.todos.splice(index, 1)this.saveTodos()}},mounted() {this.loadTodos()}
}
</script><style>
#app {font-family: Arial, sans-serif;max-width: 500px;margin: 0 auto;padding: 20px;
}
h1 {text-align: center;
}
form {display: flex;margin-bottom: 20px;
}
input[type="text"] {flex-grow: 1;padding: 10px;font-size: 16px;border: 1px solid #ddd;border-radius: 4px 0 0 4px;
}
button {padding: 10px 20px;font-size: 16px;background-color: #4CAF50;color: white;border: none;border-radius: 0 4px 4px 0;cursor: pointer;
}
ul {list-style-type: none;padding: 0;
}
li {display: flex;align-items: center;padding: 10px;background-color: #f9f9f9;border: 1px solid #ddd;margin-bottom: 10px;border-radius: 4px;
}
li.completed {text-decoration: line-through;opacity: 0.6;
}
li input[type="checkbox"] {margin-right: 10px;
}
li button {margin-left: auto;background-color: #f44336;
}
</style>

在这里插入图片描述

运行项目：

npm run serve

在这里插入图片描述
打开网页

1、react框架实现TodoList页面案例

安装好node自带了npx

创建应用：

npx create-react-app react-todolist
或
##安装create-react-app
cnpm install -g create-react-app
##创建应用
create-react-app react-todolist

在这里插入图片描述

进入项目写应用：

cd react-todolist#修改以下文件：
src/App.js
src/App.css

src/App.js 代码

import React, { useState, useEffect } from 'react';
import './App.css';function App() {const [todos, setTodos] = useState([]);const [newTodo, setNewTodo] = useState('');useEffect(() => {loadTodos();}, []);const loadTodos = () => {const savedTodos = localStorage.getItem('todos');if (savedTodos) {setTodos(JSON.parse(savedTodos));}};const saveTodos = (updatedTodos) => {localStorage.setItem('todos', JSON.stringify(updatedTodos));};const addTodo = (e) => {e.preventDefault();if (newTodo.trim() === '') return;const updatedTodos = [{ text: newTodo, completed: false }, ...todos];setTodos(updatedTodos);setNewTodo('');saveTodos(updatedTodos);};const toggleTodo = (index) => {const updatedTodos = todos.map((todo, i) => i === index ? { ...todo, completed: !todo.completed } : todo);setTodos(updatedTodos);saveTodos(updatedTodos);};const deleteTodo = (index) => {const updatedTodos = todos.filter((_, i) => i !== index);setTodos(updatedTodos);saveTodos(updatedTodos);};return (<div className="App"><h1>TodoList</h1><form onSubmit={addTodo}><input type="text" value={newTodo} onChange={(e) => setNewTodo(e.target.value)}placeholder="Add a new todo"/><button type="submit">Add</button></form><ul>{todos.map((todo, index) => (<li key={index} className={todo.completed ? 'completed' : ''}><input type="checkbox" checked={todo.completed}onChange={() => toggleTodo(index)}/><span>{todo.text}</span><button onClick={() => deleteTodo(index)}>Delete</button></li>))}</ul></div>);
}export default App;

src/App.css代码

.App {font-family: Arial, sans-serif;max-width: 500px;margin: 0 auto;padding: 20px;
}h1 {text-align: center;
}form {display: flex;margin-bottom: 20px;
}input[type="text"] {flex-grow: 1;padding: 10px;font-size: 16px;border: 1px solid #ddd;border-radius: 4px 0 0 4px;
}button {padding: 10px 20px;font-size: 16px;background-color: #4CAF50;color: white;border: none;border-radius: 0 4px 4px 0;cursor: pointer;
}ul {list-style-type: none;padding: 0;
}li {display: flex;align-items: center;padding: 10px;background-color: #f9f9f9;border: 1px solid #ddd;margin-bottom: 10px;border-radius: 4px;
}li.completed {text-decoration: line-through;opacity: 0.6;
}li input[type="checkbox"] {margin-right: 10px;
}li button {margin-left: auto;background-color: #f44336;
}