青岛网站建设大全,有哪些企业可以做招聘的网站有哪些内容,做免费互动小游戏的网站,深圳设计优化公司1. js、vue2、vue3、react类组件、react函数组件的特性
1.1 JavaScript#xff08;JS#xff09;特性
弱类型#xff1a;JavaScript是一种弱类型语言#xff0c;变量的类型可以在运行时动态改变。基于原型的面向对象#xff1a;JavaScript使用原型链来实现面向对象编程。…1. js、vue2、vue3、react类组件、react函数组件的特性
1.1 JavaScriptJS特性
弱类型JavaScript是一种弱类型语言变量的类型可以在运行时动态改变。基于原型的面向对象JavaScript使用原型链来实现面向对象编程。事件驱动JavaScript可以通过事件监听和触发来实现交互功能。动态性JavaScript具有动态创建、修改和删除元素的能力。广泛应用JavaScript不仅可以在网页上运行还可以在服务器端和移动端等平台上运行。
1.2 Vue2特性
双向数据绑定Vue2使用数据绑定机制实现了数据的双向绑定。组件化开发Vue2将界面拆分成独立的可复用组件提高了开发效率和代码的可维护性。虚拟DOMVue2使用虚拟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
headtitleTodo List/title
/head
bodyh1Todo List/h1input typetext idtaskInputbutton onclickaddTask()Add Task/buttonul idtaskList/ulscript srcscript.js/script
/body
/htmlJavaScript部分
// 保存任务的数组
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
headtitleTodo List/titlescript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
/head
bodydiv idapph1Todo List/h1input v-modelnewTodo keyup.enteraddTodo placeholderAdd a new todoulli v-for(todo, index) in todos :keyindex{{ todo }}button clickremoveTodo(index)Delete/button/li/ul/divscriptnew 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
templatediv classtodo-listh1Todo List/h1input v-modeltask placeholderAdd a task keyup.enteraddTaskulli v-for(task, index) in tasks :keyindexspan{{ task }}/spanbutton clickdeleteTask(index)Delete/button/li/ul/div
/templatescript
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};}
};
/scriptstyle
.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 (divh1Todo List/h1form onSubmit{this.handleSubmit}input typetext value{newTodo} onChange{this.handleChange} /button typesubmitAdd/button/formul{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 (divh1Todo List/h1input typetext value{inputValue} onChange{handle} /button onClick{handleAddTodo}Add/buttonul{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。
