todolist的五种写法(原生、vue2、vue3、react类组件,react函数组件)

1. js、vue2、vue3、react类组件、react函数组件的特性

1.1 JavaScript(JS)特性

  1. 弱类型:JavaScript是一种弱类型语言,变量的类型可以在运行时动态改变。
  2. 基于原型的面向对象:JavaScript使用原型链来实现面向对象编程。
  3. 事件驱动:JavaScript可以通过事件监听和触发来实现交互功能。
  4. 动态性:JavaScript具有动态创建、修改和删除元素的能力。
  5. 广泛应用:JavaScript不仅可以在网页上运行,还可以在服务器端和移动端等平台上运行。

1.2 Vue2特性

  1. 双向数据绑定:Vue2使用数据绑定机制,实现了数据的双向绑定。
  2. 组件化开发:Vue2将界面拆分成独立的可复用组件,提高了开发效率和代码的可维护性。
  3. 虚拟DOM:Vue2使用虚拟DOM来提高渲染性能,减少真实DOM的操作次数。
  4. 生命周期钩子:Vue2提供了一系列的生命周期钩子函数,可以在组件的不同阶段执行相应的操作。
  5. 指令系统:Vue2提供了一套指令系统,可以用于操作DOM元素。

1.3 Vue3特性

  1. 更好的性能:Vue在虚拟DOM、编译器和响应式系统等方面进行了优化,提高了性能。
  2. 更小的体积:Vue3通过优化打包策略和使用Tree-shaking技术,减小了框架的体积。
  3. 更好的开发体验:Vue3引入了Composition API,提供了更灵活、可组合的函数式API,使得开发更加简单和直观。
  4. 更好的TypeScript支持:Vue3对TypeScript的支持更加友好,提供了更准确的类型推断和类型检查。
  5. 更好的可维护性:Vue3通过组合式API和更好的TypeScript支持,提高了代码的可维护性。

1.4 React类组件特性

  1. 生命周期方法:React类组件提供了一系列的生命周期方法,可以在组件的不同阶段执行相应的操作。
  2. 状态管理:React类组件使用this.state来管理组件的状态,并通过this.setState方法来更新状态。
  3. 事件处理:React类组件可以通过this.props来接收父组件传递的属性,并通过事件处理函数来处理用户的交互操作。
  4. 渲染方法:React类组件使用render方法来定义组件的渲染逻辑。

1.5 React函数组件特性

  1. 简洁易懂:React函数组件相比于React类组件更加简洁和易懂,代码量更少。
  2. 无状态:React函数组件是无状态的,不需要管理状态,只需要处理传入的props,并返回一个React元素。
  3. 高性能:React函数组件相比于React类组件具有更高的性能,因为函数组件不需要实例化和维护状态。

2. 使用js实现todolist

HTML部分:

<!DOCTYPE html>
<html>
<head><title>Todo List</title>
</head>
<body><h1>Todo List</h1><input type="text" id="taskInput"><button onclick="addTask()">Add Task</button><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 List</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body><div id="app"><h1>Todo List</h1><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)">Delete</button></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 List</h1><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)">Delete</button></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函数来创建响应式的数据tasktaskstask用于存储输入框中的值,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 (<div><h1>Todo List</h1><form onSubmit={this.handleSubmit}><input type="text" value={newTodo} onChange={this.handleChange} /><button type="submit">Add</button></form><ul>{todos.map((todo, index) => (<li key={index}>{todo}<button onClick={() => this.handleDelete(index)}>Delete</button></li>))}</ul></div>);}
}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 (<div><h1>Todo List</h1><input type="text" value={inputValue} onChange={handle} /><button onClick={handleAddTodo}>Add</button><ul>{todos.map((todo, index) => (<li key={index}>{todo}<button onClick={() => handleDeleteTodo(index)}>Delete</button></li>))}</ul></div>);
};export default TodoList;

使用React的useState钩子来管理状态。todos状态用于保存todo列表,inputValue状态用于保存输入框的值。

handleInputChange函数用于更新输入框的值,handleAddTodo函数用于添加todo到列表中,handleDeleteTodo函数用于删除指定索引的todo。

在渲染部分,使用<input>元素来接收用户的输入,使用<button>元素来添加todo,使用<ul><li>元素来展示todo列表。每个todo后面有一个删除按钮,点击按钮会调用handleDeleteTodo函数删除对应的todo。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/675447.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第59讲订单数据下拉实现

import com.baomidou.mybatisplus.extension.plugins.pagination.Page;/*** 订单查询 type值 0 全部订单 1待付款 2 待收货 3 退款/退货* param type* return*/RequestMapping("/list")public R list(Integer type,Integer page,Integer pageSize){System.out.pri…

【C#】Xasset加载资源模块

分享一下之前接Xasset的模块Code【仅用于业务参考】 using System; using System.Collections.Generic; using System.IO; using Common; using Cysharp.Threading.Tasks; using UnityEngine; using xasset; using xasset.example; using Logger xasset.Logger; using Object…

Vue-57、Vue技术路由的参数如何传递

query参数传递 1、传递参数 <!-- 跳转路由并携带query参数&#xff0c;to的字符串写法--> <router-link :to"/home/message/detail?id${p.id}&title${p.title}"> {{p.title}} </router-link><!-- 跳转路由…

ElasticSearch 8.x 使用 High Level Client 以 HTTPS 方式链接,SSL 证书、主机名验证器 各是什么,如何忽略

ElasticSearch 1、ElasticSearch学习随笔之基础介绍 2、ElasticSearch学习随笔之简单操作 3、ElasticSearch学习随笔之java api 操作 4、ElasticSearch学习随笔之SpringBoot Starter 操作 5、ElasticSearch学习随笔之嵌套操作 6、ElasticSearch学习随笔之分词算法 7、ElasticS…

人工智能之线性优化和非线性优化

如果目标函数或者约束函数中存在非线性函数,此类问题称为非线性优化。 线性优化 在一组线性的等式或不等式约束下,求一个线性函数的最小值,此类问题的数学模型如下: m i n c x s . t . { A x ≤ b x ≥ 0 min\quad cx \\ \\ s.t. \begin{cases} Ax\leq b \\ \\ x\geq0 \…

基金是什么

一、基金是什么&#xff1f; 买基金就是委托别人帮我们投资&#xff0c;替我们买卖股票债券。 二、为什么委托别人&#xff1f; 因为我们不懂投资方面的知识&#xff0c;或者我们没有时间来做投资&#xff0c;那么就可以找专业人士帮我们投资。就像家长帮小孩报辅导班&#…

[幻灯片]分析设计高阶-02-领域建模结构部分Part1

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 如何选择UMLChina服务 UMLChina公众号精选&#xff08;20240207更新&#xff09;

四、机器学习基础概念介绍

四、机器学习基础概念介绍 1_机器学习基础概念机器学习分类1.1 有监督学习1.2 无监督学习 2_有监督机器学习—常见评估方法数据集的划分2.1 留出法2.2 校验验证法&#xff08;重点方法&#xff09;简单交叉验证K折交叉验证&#xff08;单独流出测试集&#xff09;&#xff08;常…

大数据思考:面对海量数据时,选择哪种模式才是更适合自己的?

如果您从事科技行业或者您不在这个行业&#xff0c;也许您已经听说过很多关于 AI 的信息。 我所说的不仅仅是多年来我们都喜欢的科幻小说中“天网正在接管地球”式的人工智能&#xff0c;而是人工智能和机器学习已经逐渐成为我们日常生活中的实际应用 . 大数据是人工智能与机器…

PCIE 参考时钟架构

一、PCIe架构组件 首先先看下PCIE架构组件&#xff0c;下图中主要包括&#xff1a; ROOT COMPLEX (RC) (CPU); PCIE PCI/PCI-X Bridge; PCIE SWITCH; PCIE ENDPOINT (EP) (pcie设备); BUFFER; 各个器件的时钟来源都是由100MHz经过Buffer后提供。一个PCIE树上最多可以有256…

Android Studio中打开文件管理器

文章目录 一、前言二、操作步骤 一、前言 在Android Studio中有时候需要查看手机的文件目录或者复制文件&#xff0c;但是有时候文件管理器找不到在哪&#xff0c;这里记录该操作流程 二、操作步骤 第一步: 第二步: 第三步:

云游戏发行需要哪些条件

云游戏是一种创新性的游戏服务模式&#xff0c;将游戏运算和渲染等处理任务移至云端服务器&#xff0c;通过互联网实时传输画面和操作指令&#xff0c;使玩家能够在低端终端设备上也能流畅玩游戏。要做云游戏发行&#xff0c;需要考虑一系列条件&#xff0c;包括技术、基础设施…

Qt未来市场洞察

跨平台开发&#xff1a;Qt作为一种跨平台的开发框架&#xff0c;具有良好的适应性和灵活性&#xff0c;未来将继续受到广泛应用。随着多设备和多平台应用的增加&#xff0c;Qt的前景在跨平台开发领域将更加广阔。 物联网应用&#xff1a;由于Qt对嵌入式系统和物联网应用的良好支…

Ubuntu 18.04上安装cuDNN 8.9.6.50:一站式指南

Content 一、前言二、准备工作三、安装步骤1. 启用本地仓库2. 导入CUDA GPG密钥3. 更新仓库元数据4. 安装运行时库5. 安装开发者库6. 安装代码示例7. 另外一种安装办法 四、验证安装1. 验证cuDNN版本2. 测试示例代码 五、总结 一、前言 在深度学习领域&#xff0c;高效的计算资…

通过Demo学WPF—数据绑定(二)

准备 今天学习的Demo是Data Binding中的Linq&#xff1a; 创建一个空白解决方案&#xff0c;然后添加现有项目&#xff0c;选择Linq&#xff0c;解决方案如下所示&#xff1a; 查看这个Demo的效果&#xff1a; 开始学习这个Demo xaml部分 查看MainWindow.xaml&#xff1a; …

【Java八股面试系列】JVM-常见参数设置

目录 堆内存相关 显式指定堆内存–Xms和-Xmx 显式新生代内存(Young Generation) 显式指定永久代/元空间的大小 垃圾收集相关 垃圾回收器 GC 日志记录 处理 OOM JDK监控和故障处理工具总结 堆内存相关 Java 虚拟机所管理的内存中最大的一块&#xff0c;Java 堆是所有线…

【嵌入式-传感器】从旋转编码器到学会看懂方波

背景&#xff1a; 在学习STM32F103的中断时&#xff0c;用到旋转编码器&#xff0c;需要通过旋转编码器输出的DO信号&#xff0c;获取旋转的刻度和方向。 前提知识&#xff1a; 使用中断需要RCC使能GPIO外设口及AFIO口、初始化GPIO、中断引脚AFIO选择配置、EXTI外部中断配置…

第62讲商品搜索动态实现以及性能优化

商品搜索后端动态获取数据 后端动态获取数据&#xff1a; /*** 商品搜索* param q* return*/GetMapping("/search")public R search(String q){List<Product> productList productService.list(new QueryWrapper<Product>().like("name", q)…

SpringMVC 1.请求参数检查 2.全局异常处理 3.请求参数封装为Pojo

ErrorEnum.java // 枚举所有的错误 package com.example.demo.enums;import lombok.Getter;public enum ErrorEnum {SYSTEM_ERROR(-1, "系统错误"),PARAM_ERROR(-2, "参数错误"),OK(0, "成功"),;Getterprivate final int code;Getterprivate fi…

免费生成ios证书的方法(无需mac电脑)

使用hbuilderx的uniapp框架开发移动端程序很方便&#xff0c;可以很方便地开发出移动端的小程序和app。但是打包ios版本的app的时候却很麻烦&#xff0c;官方提供的教程需要使用mac电脑来生成证书&#xff0c;但是mac电脑却不便宜&#xff0c;一般的型号都差不多上万。 因此&a…