todolist的五种写法（原生、vue2、vue3、react类组件，react函数组件）
1. js、vue2、vue3、react类组件、react函数组件的特性
1.1 JavaScript（JS）特性
- 弱类型：JavaScript是一种弱类型语言，变量的类型可以在运行时动态改变。
- 基于原型的面向对象：JavaScript使用原型链来实现面向对象编程。
- 事件驱动：JavaScript可以通过事件监听和触发来实现交互功能。
- 动态性：JavaScript具有动态创建、修改和删除元素的能力。
- 广泛应用：JavaScript不仅可以在网页上运行，还可以在服务器端和移动端等平台上运行。
1.2 Vue2特性
- 双向数据绑定：Vue2使用数据绑定机制，实现了数据的双向绑定。
- 组件化开发：Vue2将界面拆分成独立的可复用组件，提高了开发效率和代码的可维护性。
- 虚拟DOM：Vue2使用虚拟DOM来提高渲染性能，减少真实DOM的操作次数。
- 生命周期钩子：Vue2提供了一系列的生命周期钩子函数，可以在组件的不同阶段执行相应的操作。
- 指令系统：Vue2提供了一套指令系统，可以用于操作DOM元素。
1.3 Vue3特性
- 更好的性能：Vue在虚拟DOM、编译器和响应式系统等方面进行了优化，提高了性能。
- 更小的体积：Vue3通过优化打包策略和使用Tree-shaking技术，减小了框架的体积。
- 更好的开发体验：Vue3引入了Composition API，提供了更灵活、可组合的函数式API，使得开发更加简单和直观。
- 更好的TypeScript支持：Vue3对TypeScript的支持更加友好，提供了更准确的类型推断和类型检查。
- 更好的可维护性：Vue3通过组合式API和更好的TypeScript支持，提高了代码的可维护性。
1.4 React类组件特性
- 生命周期方法：React类组件提供了一系列的生命周期方法，可以在组件的不同阶段执行相应的操作。
- 状态管理：React类组件使用this.state来管理组件的状态，并通过this.setState方法来更新状态。
- 事件处理：React类组件可以通过this.props来接收父组件传递的属性，并通过事件处理函数来处理用户的交互操作。
- 渲染方法：React类组件使用render方法来定义组件的渲染逻辑。
1.5 React函数组件特性
- 简洁易懂：React函数组件相比于React类组件更加简洁和易懂，代码量更少。
- 无状态：React函数组件是无状态的，不需要管理状态，只需要处理传入的props，并返回一个React元素。
- 高性能：React函数组件相比于React类组件具有更高的性能，因为函数组件不需要实例化和维护状态。
2. 使用js实现todolist
HTML部分：
DOCTYPE html>
<html>
<head>
<title>Todo Listtitle>
head>
<body>
<h1>Todo Listh1>
<input type="text" id="taskInput">
<button onclick="addTask()">Add Taskbutton>
<ul id="taskList">ul>
<script src="script.js">script>
body>
html>
JavaScript部分：
// 保存任务的数组
var tasks = [];
// 添加任务
function addTask() {
var taskInput = document.getElementById("taskInput");
var taskList = document.getElementById("taskList");
// 创建新的任务项
var taskItem = document.createElement("li");
taskItem.innerHTML = taskInput.value;
taskList.appendChild(taskItem);
// 将任务到数组中
tasks.push(taskInput.value);
// 清空输入框
taskInput.value = "";
}
// 初始化任务列表
function initTaskList() {
var taskList = document.getElementById("taskList");
// 清空任务列表
taskList.innerHTML = "";
// 添加保存的任务
for (var i = 0; i < tasks.length; i++) {
var taskItem = document.createElement("li");
taskItem.innerHTML = tasks[i];
taskList.appendChild(taskItem);
}
}
// 页面加载时初始化任务列表
window.onload = function() {
initTaskList();
}
通过输入框输入任务，点击"Add Task"按钮将任务添加到任务列表中。同时，将任务保存在名为"tasks"的数组中，以便在页面刷新后能够保留之前添加的任务。在页面加载时，通过调用initTaskList()函数，将保存的任务重新添加到任务列表中。
3. 使用vue2实现todolist
DOCTYPE html>
<html>
<head>
<title>Todo Listtitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<h1>Todo Listh1>
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo">
<ul>
<li v-for="(todo, index) in todos" :key="index">
{{ todo }}
<button @click="removeTodo(index)">Deletebutton>
li>
ul>
div>
<script>
new Vue({
el: '#app',
data: {
todos: [],
newTodo: ''
},
methods: {
addTodo() {
if (this.newTodo.trim() !== '') {
this.todos.push(this.newTodo);
this.newTodo = '';
}
},
removeTodo(index) {
this.todos.splice(index, 1);
}
}
});
script>
body>
html>
使用Vue的双向绑定（v-model）来实现输入框与数据的同步。当用户在输入框中按下回车键时，addTodo方法会被调用，将新的todo添加到todos数组中，并清空输入框。每个todo都有一个删除按钮，点击按钮时，removeTodo方法会被调用，从todos数组中移除对应的todo。
4. 使用vue3实现todolist
<template>
<div class="todo-list">
<h1>Todo Listh1>
<input v-model="task" placeholder="Add a task" @keyup.enter="addTask">
<ul>
<li v-for="(task, index) in tasks" :key="index">
<span>{{ task }}span>
<button @click="deleteTask(index)">Deletebutton>
li>
ul>
div>
template>
<script>
import { ref } from 'vue';
export default {
name: 'TodoList',
setup() {
const task = ref('');
const tasks = ref([]);
const addTask = () => {
if (task.value.trim() !== '') {
tasks.value.push(task.value);
task.value = '';
}
};
const deleteTask = (index) => {
tasks.value.splice(index, 1);
};
return {
task,
tasks,
addTask,
deleteTask
};
}
};
script>
<style>
.todo-list {
max-width: 400px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #ccc;
}
button {
padding: 5px 10px;
background-color: #ff0000;
color: #fff;
border: none;
cursor: pointer;
}
style>
使用v-model指令将输入框的值与task绑定，使其成为双向绑定的。使用v-for指令遍历tasks数组，并使用:key绑定每个任务的索引。点击"Delete"按钮时，会调用deleteTask函数删除对应的任务。
在setup函数中，使用ref函数来创建响应式的数据task和tasks。task用于存储输入框中的值，tasks用于存储所有的任务列表。
addTask函数用于将输入框中的值添加到任务列表中，并清空输入框。deleteTask函数用于删除指定索引的任务。
5. 使用react类组件实现todolist
import React from 'react';
class TodoList extends React.Component {
constructor(props) {
super(props);
this.state = {
todos: [],
newTodo: ''
};
}
handleChange = (event) => {
this.setState({ newTodo: event.target.value });
}
handleSubmit = (event) => {
event.preventDefault();
const { todos, newTodo } = this.state;
if (newTodo.trim() !== '') {
this.setState({
todos: [...todos, newTodo],
newTodo: ''
});
}
}
handleDelete = (index) => {
const { todos } = this.state;
this.setState({
todos: todos.filter((todo, i) => i !== index)
});
}
render() {
const { todos, newTodo } = this.state;
return (
Todo List
{todos.map((todo, index) => (
-
{todo}
))}
);
}
}
export default TodoList;
使用React的类组件来实现一个简单的todolist。组件的状态包括一个todos数组和一个newTodo字符串，分别用于存储待办事项列表和用户输入的新待办事项。
在handleChange方法中，通过event.target.value获取用户输入的值，并将其更新到newTodo状态中。
在handleSubmit方法中，调用event.preventDefault()来阻止表单的默认提交行为，检查newTodo是否为空字符串，如果不为空，就将其添加到todos数组中，并将newTodo重置为空字符串。
在handleDelete方法中，使用filter方法来过滤掉要删除的待办事项。
在render方法中，使用JSX语法来渲染组件的结构。当用户输入新待办事项时，通过onChange事件监听输入框的变化，并调用handleChange方法更新newTodo状态。当用户点击添加按钮时，通过onSubmit事件监听表单的提交，并调用handleSubmit方法处理提交事件。待办事项列表通过map方法遍历todos数组来渲染。每个待办事项都有一个删除按钮，点击按钮时调用handleDelete方法删除对应的待办事项。
最后，将TodoList组件导出供其他组件使用。
6. 使用react函数组件实现todolist
import React, { useState } from 'react';
const TodoList = () => {
const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');
const handleInputChange = (e) => {
setInputValue(e.target.value);
};
const handleAddTodo = () => {
if (inputValue.trim() !== '') {
setTodos([...todos, inputValue]);
setInputValue('');
}
};
const handleDeleteTodo = (index) => {
const newTodos = [...todos];
newTodos.splice(index, 1);
setTodos(newTodos);
};
return (
Todo List
{todos.map((todo, index) => (
-
{todo}
))}
);
};
export default TodoList;
使用React的useState钩子来管理状态。todos状态用于保存todo列表，inputValue状态用于保存输入框的值。
handleInputChange函数用于更新输入框的值，handleAddTodo函数用于添加todo到列表中，handleDeleteTodo函数用于删除指定索引的todo。
在渲染部分，使用元素来接收用户的输入，使用元素来添加todo，使用元素来展示todo列表。每个todo后面有一个删除按钮，点击按钮会调用handleDeleteTodo函数删除对应的todo。