这里用最简单的例子让大家感受一下各种写法思路的不同。
todolist domo，有新增，有删除。需求都一样。
image.png
分别是jq、vue、react
jq:
<body>
<input type="text" id='input' /><button id='add'>add</button>
<ul id='list'>
</ul>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script>
$(function () {
let globalData = {
list: [{ id: 1, name: '做作业' }, { id: 2, name: '看电影' }]
}
//渲染list
const renderList = (() => {
const ul = $('ul')
let str = ''
globalData.list.forEach(item => {
str +=
`<li>
<span>${item.name}</span>
<button class="finish" data-id="${item.id}">完成</button>
</li>`
})
ul.html(str)
//完成
$('.finish').on('click', function (event) {
const id = $(this).attr('data-id');
globalData.list = globalData.list.filter(item => item.id != id);
renderList()
})
})
renderList(list)
//寻找最大的id
const findMaxId = () => {
let id = 0;
globalData.list.forEach(item => {
if (item.id > id) id = item.id
})
return id
}
//新增
$('#add').on('click', () => {
const value = $('#input').val()//input框的值
if (value !== '') {
globalData.list.push({ id: findMaxId()+1, name: value})
renderList()
}
$('#input').val('')//清空
})
})
</script>
</body>
vue：
data里面用来存放数据，mothods里面是方法。
@方法。v-model双向绑定
vue-for循环
vue改变数据自己就会重新渲染。只要让data改变，页面就会改变。
vue偏模板写法
<template>
<div>
<input type="text" v-model="value"><button @click="add">add</button>
<ul>
<li v-for="item in list" :key="item.id">
<span>{{item.name}}</span>
<button class="finish" @click="finish(item.id)">完成</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
value:'',
list:[{ id: 1, name: '做作业' }, { id: 2, name: '看电影' }]
}
},
methods:{
findMaxId(){
let id = 0;
this.list.forEach(item => {
if (item.id > id) id = item.id
})
return id
},
add(){
this.list=[...this.list,{id:this.findMaxId()+1,name:this.value}]
this.value=''
},
finish(id){
this.list = this.list.filter(item => item.id !== id)
}
}
}
</script>
<style>
</style>
react:
useState是初始赋值
setxx改变状态。
class要写出className
方法就onxxx
{}里面写js代码，react偏js写法
单向数据流
通过onChange={handleChange}实现双向绑定
react是通过setxx来触发重新渲染
import React, { useState } from 'react';
export default function() {
const [list, setList] = useState([{ id: 1, name: '做作业' }, { id: 2, name: '看电影' }])
const [value, setValue] = useState("")
//完成
const finish = (id) => {
const newList = list.filter(item => item.id !== id)
setList(newList)
}
const handleChange=(e)=>{
setValue(e.target.value)
}
const findMaxId = () => {
let id = 0;
list.forEach(item => {
if (item.id > id) id = item.id
})
return id
}
//新增
const add=()=>{
if(value!==""){
const newList=[...list,{id:findMaxId()+1,name:value}]
setList(newList)
setValue("")
}
}
return (
<div className="App">
<input value={value} onChange={handleChange}/><button onClick={add}>add</button>
<ul>
{list.map(item =>
<li key={item.id}>
<span>{item.name}</span>
<button className="finish" onClick={()=>finish(item.id)}>完成</button>
</li>
)}
</ul>
</div>
);
}
todolist-jq:https://github.com/lanweipeng/todolist-jq
todolist-vue:https://github.com/lanweipeng/todolist-vue
todolist-react(hooks):https://github.com/lanweipeng/todolist-react
网友评论