vue和react两家的对比之--表格-（增删查小demo）

最新推荐文章于 2024-04-24 18:42:31 发布
最新推荐文章于 2024-04-24 18:42:31 发布
阅读量588 收藏 2
点赞数 5
分类专栏： # Vue # React.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44983621/article/details/105619169
版权

vue和react两家的对比之–表格-（增删查小demo）

文章目录


这篇博客主要就是对比一下使用分别react和vue实现下面这个小demo ，这个案例实现起来可以清除的看到vue模板的优势，但是这个案例并不能说明vue就比react要好，vue很多东西都给你封装好了，你只需要去调用，这就可能写出来的东西比较死，但是react就不一样了，大部分实现还得靠自己写，虽然写起来没vue那么快，但是写的花样很多，很灵活，这个可以从我下面的代码中体现出来，这两个都是现在很火的框架，此案例仅供参考。
在这里插入图片描述

vue

代码中使用了 bootstrap3，这个里面有一个需要注意的点是，这个模糊查询 v-for遍历时 in 后面是search函数的返回值，这个使用vue实现起来比较简单 ，，但是使用react相对"麻烦”很多 这个从代码长度上就可以看出来 vue 100行 react 170多行（我写的麻烦了–但是还是有必要的）😂 —vue 版本添加了修改功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="/vue.js"></script> -->
    <script crossorigin="anonymous" integrity="sha512-YXLGLsQBiwHPHLCAA9npZWhADUsHECjkZ71D1uzT2Hpop82/eLnmFb6b0jo8pK4T0Au0g2FETrRJNblF/46ZzQ==" src="http://lib.baomitu.com/vue/2.6.12/vue.js"></script>
    <!-- <link rel="stylesheet" href="./bootstrap.css"> -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <div id="app">
        <div class="panel panel-primary" style="width: 80%; margin: 10px auto;">
            <div class="panel-heading">
                <h3 class="panel-title">添加信息</h3>
            </div>
            <div class="panel-body form-inline">
                <label>
                    ID:
                    <input type="number" class="form-control" v-model="id" />
                </label>
                <label>
                    NAME:
                    <input type="text" class="form-control" v-model="name" />
                </label>
                <input type="button" value="添加" class="btn btn-primary" @click="add" />
                <label>
                    按照关键字搜索:
                        <input type="text" class="form-control" v-model="searchText" />
                </label>
            </div>
        </div>
        <table class="table table-bordered table-hover table-striped" style="width: 80%;  margin: 0 auto;">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>ID</th>
                    <th>NAME</th>
                    <th>CREATE_TIME</th>
                    <th>操作</th>
                </tr>

            </thead>
            <tbody>
                <tr v-for="(item, index) in search()" :key="item.id">
                    <td>{{index + 1}}</td>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.create_time}}</td>
                    <td><a href="" @click.prevent="del(item.id)">删除
                       
                    </a>
                    <button class="btn btn-primary btn" data-toggle="modal" data-target="#myModal" @click="update(item.id)" >
                        修改
                    </button>
                </td>
                </tr>
            </tbody>
        </table>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            修改表单内容
                        </h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
   
                            <div class="form-group">
                                <label for="lastname" class="col-sm-2 control-label">name</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="lastname" v-model="updateName" 
                                           >
                                </div>
                            </div>
                      
                        </form>
                        
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary" @click="submit" data-dismiss="modal">
                            提交更改
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
    </div>

    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                    { id: 1, name: '小张', create_time: new Date().toLocaleString() },
                    { id: 2, name: '小李', create_time: new Date().toLocaleString() },
                    { id: 3, name: '小王', create_time: new Date().toLocaleString() },
                ],
                id: 'null',
                name: null,
                searchText:'',
                updateId:'',
                updateName:''
            },
            methods: {
                add() {
                    let { list, id, name } = this
                    if (list.find(item => item.id === parseInt(id))) {
                        this.id = ''
                        return alert('id重复了')
                    }
                    if (!id || !name) {
                        return alert('不能为空')
                    }
                    list.push({
                        id,
                        name,
                        create_time: new Date().toLocaleString()
                    })
                    // console.log(new Date().toLocaleDateString() +'   ' + new Date().toLocaleString());
                    this.id = ''
                    this.name = ''
                },
                del(id) {
                    const index = this.list.findIndex(item => item.id === id)
                    this.list.splice(index, 1)
                },
                search() {
                    return this.list.filter(item => {
                        if(item.name.includes(this.searchText)) {
                            return item
                        }
                    })
                },
                update(id) {
                    const arr = this.list.find(item => item.id === id)
                    this.updateId = arr.id;
                    this.updateName = arr.name
                },
                submit() {
                    const index = this.list.findIndex(item => item.id === this.updateId)
                    this.list[index].name = this.updateName
                }


            },
        })
    </script>

</body>

</html>

react

当然这个代码 我把这个小案例组件化了 分成了3个组件，这样无形间增加了大量的代码 ，react中这个父 子 组件之间 数据的交流并不是太方便，然后这里就使用了props在父子组件和兄弟组件之间传参。 里面组件之间交流 比较容易整迷了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../day1/js/react.development.js"></script>
    <script src="../day1/js/react-dom.development.js"></script>
    <script src="../day1/js/prop-types.js"></script>
    <script src="../day1/js/babel.min.js"></script>
    <link rel="stylesheet" href="./bootstrap.css">
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        class App extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    list: [
                        { id: 1, name: '小明', create_time: new Date().toLocaleString() },
                        { id: 2, name: '小李', create_time: new Date().toLocaleString() },
                        { id: 3, name: '小天', create_time: new Date().toLocaleString() },
                    ],
                    searchText: ''
                }
            }
            toSearch = (searchText) => {
                this.setState({ searchText })
            }
            toDel = (a) => {
                let { list } = this.state
                const index = list.findIndex(item => item.id === a)
                list.splice(index, 1)
                this.setState({
                    list
                })
            }
            toAdd = (info) => {
                const { id, name, create_time } = info
                let { list } = this.state
                list.push({
                    id,
                    name,
                    create_time
                })
                this.setState({
                    list
                })
            }
            render() {
                const { searchText } = this.state
                const { list } = this.state
                return (
                    <div>
                        <Add toAdd={this.toAdd} toSearch={this.toSearch} list={list} />
                        <Table toDel={this.toDel} list={list} searchText={searchText} />
                    </div>
                )
            }
        }
        class Add extends React.Component {
 
            state = {
                searchText: ''
            }
            static propTypes = {
                toAdd: PropTypes.func.isRequired,
                toSearch:PropTypes.func.isRequired
            }
            add = () => {
                const { list } = this.props
                if (list.find(item => item.id === parseInt(this.idInput.value))) {
                    this.idInput.value = ''
                    return alert('id重复了')
                }
                if (!this.idInput.value || !this.nameInput.value) {
                    return alert('不能为空')
                }
                console.log(this.idInput.value, this.nameInput.value)
                let info = {
                    id: this.idInput.value,
                    name: this.nameInput.value,
                    create_time: new Date().toLocaleString()
                }
                this.props.toAdd(info)
                this.idInput.value = ''
                this.nameInput.value = ''
            }
            handleChange = (event) => {
                const searchText = event.target.value;
                this.setState({ searchText });
                this.props.toSearch(searchText)
            }
            render() {
                return (
                    <div className="panel panel-primary">
                        <div className="panel-heading">
                            <h3 className="panel-title">添加信息</h3>
                        </div>
                        <div className="panel-body form-inline">
                            <label>
                                ID:
                                    <input type="number" className="form-control" ref={input => this.idInput = input} />
                            </label>
                            <label>
                                NAME:
                                    <input type="text" className="form-control" ref={input => this.nameInput = input} />
                            </label>

                            <input type="button" value="添加" className="btn btn-primary" onClick={this.add} />
                            <label>
                                按照关键字搜索:
                                    <input type="text" className="form-control" value={this.state.searchText} onChange={this.handleChange} />
                            </label>
                        </div>
                    </div>
                )
            }
        }
        class Table extends React.Component {
            static propTypes = {
                toDel:PropTypes.func.isRequired,
                list:PropTypes.array.isRequired,
                searchText:PropTypes.string.isRequired
            }
            del = (a) => {
                this.props.toDel(a)
            }
            search = () => {
                const { searchText, list } = this.props
                return list.filter(item => {
                    if (item.name.includes(searchText)) {
                        return item
                    }
                })
            }
            render() {
                let { list } = this.props
                return (
                    <table className="table table-bordered table-hover table-striped">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>ID</th>
                                <th>NAME</th>
                                <th>CREATE_TIME</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                this.search().map((item, index) => {
                                    return (
                                        <tr key={item.id}>
                                            <td>{index + 1}</td>
                                            <td>{item.id}</td>
                                            <td>{item.name}</td>
                                            <td>{item.create_time}</td>
                                            <td><a href="" onClick={(e) => { e.preventDefault(); this.del(item.id) }}>删除</a></td>
                                        </tr>
                                    )
                                })
                            }
                        </tbody>
                    </table>
                )
            }
        }
        ReactDOM.render(<App />, document.getElementById('app'))
    </script>
</body>

</html>
家里有蜘蛛
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vxe-table 两数据表数据对比，并对差异进行标记
小破孩的博客
06-07 3013
vxe-table 两数据表数据对比，并对差异进行标记
Vue 和 React 的对比
青蛙king的博客
09-06 1334
Vue 由 EvanYou 开发。React 由 由 Facebook 开发。React 版本Vue 版本。
【VUE】Vue中实现树状表格结构编辑与版本对比的详细技术实现
最新发布
九日的博客
04-24 1187
在data函数中定义的tableData数组，包含了表格数据和结构信息。此外，我们会备份原始数据以供版本对比之用。data() {return {},// 模拟加载物料信息},methods: {...item,level,parent,}));},// 示例方法：模拟加载物料信息this.materials = [{ materialsTypeId: 1, materialsTypeName: '物料1' }];
【工作】vue对比数据差异展示
weixin_46254175的博客
02-02 2326
调研了很多比对的插件，由于我们的数据是动态的且有一些业务逻辑存在，所以最后采用的是html-diff这个依赖。对应的链接为【html-diff提示：以下是我的解决办法，欢迎大家积极留言交流更好的解决方案以上就是今天要分享的内容啦，本文仅仅简单介绍了html-diff的使用从而解决实现比对的业务场景，如果大家对于以上场景有更好的实现方式，欢迎大家积极评论一起交流呀～～～
【vue】对比两个对象的差异并在页面标记
八块腹肌的博客
09-24 2317
如上demo，当text的内容发生变化时，会将变化标记变红，代码如下： HTML页面，给元素动态绑定ref <div id="app" class="flex"> <div class="container flex"> <!-- 上一个版本内容 --> <div class="container-left flex"> <h3>上一个版本</h3> .
Vue数据响应原理及Diff比对
月光晒了很凉快的博客
09-01 1076
每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。方法通知所有的订阅者，订阅者就会通过patch函数对比新旧虚拟节点是否一样，如果用新的虚拟节点则整个替换老节点，如果不是使用新节点，则根据子节点情况来进行同层比较。假如旧节点中存在 a 节点，而新节点中没有 a 节点，则直接将旧节点中的 a 节点销毁。没有新节点，直接触发旧节点的destory钩子，进行销毁。
vite-vue-react-demo:在一个应用程序中结合Vue和React的单独实例的演示
05-09
Vite-Vue-React-Demo 使用Vite构建，这是在单个应用程序中结合2个Vue实例和1个React实例的基本演示。 恶毒Vue 3 React17 尾风npm installnpm run dev
vuepress-plugin-demo-code::memo:vuepress的演示和代码插件
05-03
vuepress-plugin-demo-code English | vuepress的演示代码插件。 使用此插件，您可以通过以下语法同时显示演示和代码。 ::: demo <div xss=removed>Click me! [removed] export default { methods: { onClick: ...
Vue+Mock.js模拟登录和表格的增删改查功能
10-18
在本文中，我们将深入探讨如何使用Vue.js框架和Mock.js库来模拟登录功能以及实现表格的增删改查。Vue.js是一个轻量级的前端JavaScript框架，它提供了强大的数据绑定和组件化特性，使得开发更加高效。Mock.js则是一个...
vuepress-plugin-demo-block:在vuepress中编写vue，react，vanilla js演示
05-17
vuepress-plugin-demo-block 介绍 演示块用于帮助您在编写文档时添加vue，react或native js示例。 在编写组件文档时，通常需要在文档中添加一些相关示例。 这些示例通常可以使用JSFiddle或Codepen的Iframe来实现，...
react-awesome-query-builder：React的用户友好查询生成器
01-30
React很棒的查询生成器 用户友好的React组件来构建查询。 受启发 使用很棒的 v4进行小部件 现在也支持 ！ 产品特点 高度可配置 字段可以是以下类型： 简单（字符串，数字，布尔值，日期/时间/日期时间，列表） ...
在vue3中使用el-table实现新旧数据对比
m0_65377849的博客
12-01 1225
【代码】在vue3中使用el-table实现新旧数据对比。
vue大数据表格解决方案的比较
草率小猿的博客
02-17 1万+
关于大数据表格的比较，包含了Ant Design、Surley Vue、vxe-table、Ag Grid等框架。
vue和react的区别以及优缺点
zyf971020的博客
10-06 1万+
vue和react的区别以及优缺点
Vue快速入门demo（计数器）并对比React
qq_39112047的博客
06-26 253
Vue与React本质上是一个javascript库，不用想的特别复杂，我们就把它理解成一个已经帮助我们封装好的库。npm下载量 这里有个地方可以简写 计数器，如果用传统的dom开发 传统的dom开发我们也称之为命令式编程，用户给予指令，机器一步一步做。 计数器，使用vue开发 Vue与React采用的是声明式编程。 直接将内容写在template里面，甚至连高亮都没有，这样非常糟糕！所以我们可以采取以下的方式。 或者采取这样的方式,包裹一个template标签，注意，template会被渲染，但是没有任
微前端qiankun vue react项目demo 以及vue项目和react项目之间的参数传递和实现微前端项目之间token免登
qq_42704945的博客
06-07 4093
umi+umi内置qiankun插件，基座和子应用的路由跳转和路由配置以及动态路由配置，微前端qiankun,react作为基座,vue,react作为子项目，项目之间的参数传递和实现微前端项目之间的token免登
vue和react的区别
热门推荐
粥可温
09-07 3万+
如果想要一个轻量级，更快速，更现代的UI库来制作单页面应用程序应该选择Vue.js， 如果是大规模应用程序和移动应用程序的应该选择React。
Vue和React全面对比
xinxin_csdn的博客
05-08 8823
1.
SpringBoot与Vue-admin-template：实现跨域增删改查实战
本文档主要介绍了如何在SpringBoot与Vue-admin-template的环境中实现一个简单的增删改查功能，并处理前端与后端之间的跨域访问问题。首先，作者提到这是一个基于Vue-admin-template的后台管理模板案例，适合有一定...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值