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

todolist的五种写法（原生、vue2、vue3、react类组件，react函数组件）

article 2024/11/17 3:37:40

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函数来创建响应式的数据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 (
      <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.kler.cn/a/232265.html

相关文章：

  • java版嘎嘎快充汽车单车充电系统源码系统jeecgboot
  • Excel模板下载\数据导出
  • AdaBoost 二分类问题
  • 4. Spring Cloud Ribbon 实现“负载均衡”的详细配置说明
  • 图像处理之cornerdetection(角点检测)综述
  • uniapp ios app以framwork形式接入sentry
  • tee漏洞学习-翻译-2：探索 Qualcomm TrustZone的实现
  • python将Excel文档转成.db数据库文件
  • Vue2中v-for 与 v-if 的优先级
  • flask+pyinstaller实现mock接口，并打包到exe运行使用postman验证
  • video标签
  • 传输层协议 ——— TCP协议
  • Hyper-V 调整 设置 Ubuntu 虚拟机的分辨率
  • 人类的信息不同于机器的信息
  • 图论与图数据应用综述：从基础概念到知识图谱与图智能
  • 【RL】Bellman Equation （贝尔曼等式）
  • 【开源】JAVA+Vue.js实现高校实验室管理系统
  • 算法学习系列（三十三）：线性DP
  • Golang 学习（二）进阶使用
  • Java排序方法
  • 桌面显示器应用Type-C接口有什么好处
  • 人工智能专题：量子汇编语言和量子中间表示发展白皮书
  • python烟花绘制，春节祝福
  • React 组件跨层级数据共享：createContext、useContext、useMemo
  • Compose | UI组件(十四) | Navigation-Data - 页面导航传递数据
  • OpenHarmony轻量级驱动开发