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

原始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() === '') return
      this.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;
}

运行项目：

npm start

网页查看：