vue、react前端框架实现TodoList页面案例_业界新闻

发布时间:2024-07-29 04:59

阅读量:0

原始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; }