一篇文章教会你创建vue项目和用vue.js实现数据增删改查(vue的增删改查实战)

【一、项目背景】

在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品、修改商品价格、删除商品、查询商品,我们应该关注这些数据的操作和处理。

【二、项目目标】

主要有以下5个目标:

1、如何创建vue项目。

2、数据添加方法:获取到id和name在data上面获取,组织一个对象,把对象通过数组的相关方法,添加到当前data的自定义的一个数组,在VM使用Model数据操作。

3、数据删除方法:根据id找到要删除这一项的索引值,找到后调用数组的splice方法。

4、数据修改方法:根据Id找到修改这一项的索引值,找到索引值后数据就会更改。

5、数据查询方法:在ES6中,为字符串提供了一个新方法:

String.prototype.includes('要包含的字符串')

如果包含,则返回 true ,否则返回 false

【三、效果展示】

先上结果显示图后,小编就开始教你如何写这个项目。

一篇文章教会你创建vue项目和用vue.js实现数据增删改查(vue的增删改查实战)

【四、创建vue项目】

下面介绍如何创建vue的项目。

1)打开cmd命令步骤:第一步点击开始菜单,找到“运行”,点击进去,也可以直接通过“win R”打开运行,

2)第二步进去运行之后,在运行输入框里面输入“cmd”,

3)第三步点击确定,就进去命令提示符了。

4)安装npm(npm全称为 Node Package Manager是一个基于Node.js的包管理器,也是整个Node.js社区最流行、支持的第三方模块最多的包管理器)。

npm -v

5)npm安装如下图所示:

一篇文章教会你创建vue项目和用vue.js实现数据增删改查(vue的增删改查实战)

6)由于网络原因安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

7)安装vue-cli

cnpm install -g @vue/cli

8)安装webpack

cnpm install -g webpack<br>webpack是JavaScript打包器(module bundler)

9)安装完之后开始创建项目。输入vue ui如下图所示:

一篇文章教会你创建vue项目和用vue.js实现数据增删改查(vue的增删改查实战)

10)输入之后会弹出一网页如下图

一篇文章教会你创建vue项目和用vue.js实现数据增删改查(vue的增删改查实战)

11)点击vue项目管理器;

一篇文章教会你创建vue项目和用vue.js实现数据增删改查(vue的增删改查实战)

12)点击在此创建新项目;

一篇文章教会你创建vue项目和用vue.js实现数据增删改查(vue的增删改查实战)

13)输入项目名(我的项目名是test)后点击下一步;

一篇文章教会你创建vue项目和用vue.js实现数据增删改查(vue的增删改查实战)

14)创建项目完成。

一篇文章教会你创建vue项目和用vue.js实现数据增删改查(vue的增删改查实战)

15)创建项目加载需要一定时间,加载完后再使用命令行进到这个项目输入npm install 后再运行这个项目输入命令cnpm run serve如下图:

一篇文章教会你创建vue项目和用vue.js实现数据增删改查(vue的增删改查实战)

16)最后根据Local或Network输入到网址中;

一篇文章教会你创建vue项目和用vue.js实现数据增删改查(vue的增删改查实战)

以上就是创建vue项目,接下我们开始写这个添加、删除、修改、查询数据商品代码。

一篇文章教会你创建vue项目和用vue.js实现数据增删改查(vue的增删改查实战)

【五、界面的布局】

这个项目我们用到boostrap.css文件,怎么引入这个boostrap的包呢?

1)打开cmd命令再这个项目输入npm install bootsrtap;

2)在style样式内写入这行代码:

@import "~bootstrap/dist/css/bootstrap.min.css"

3)写页面需要用到的组件布局:

一篇文章教会你创建vue项目和用vue.js实现数据增删改查(vue的增删改查实战)

4)在v-for 中的数据,直接从 data 上的list中直接渲染过来的,我们自定义了一个 search 方法,同时,把所有的关键字,通过传参的形式,传递给了 search方法,在 search 方法内部,通过for 循环,把所有符合 搜索关键字的数据,保存到 一个新数组中,返回。

一篇文章教会你创建vue项目和用vue.js实现数据增删改查(vue的增删改查实战)

5)接下在data定义id、name、keywords、list。

一篇文章教会你创建vue项目和用vue.js实现数据增删改查(vue的增删改查实战)

【六、数据添加方法】

1、获取到id 和name,在data 上面获取。

2、组织出一个对象,把这个对象调用数组的相关方法,添加到当前data 上的 list 中。

3、在Vue.js中已经实现了数据双向绑定,每当我们修改了data中的数据后,监听到数据改名,自动把最新数据显示在页面。

4、在进行VM中的Model数据操作,同时,在操作Model数据的时候,指定的业务逻辑操作。

5、代码如下图:

一篇文章教会你创建vue项目和用vue.js实现数据增删改查(vue的增删改查实战)

【七、数据删除方法】

1、如何根据Id,找到要删除这一项的索引值。

2、当找到索引了就调用数组的 splice方法。

3、代码如下图:

一篇文章教会你创建vue项目和用vue.js实现数据增删改查(vue的增删改查实战)

【八、数据修改方法】

1、定义一个在data自定义一个数组用来保存修改后的数据edit:[];

2、在方法里面定义对象,根据Id,找到修改这一项的索引值,找到索引值后数据就会更改。

3、代码如下图:

一篇文章教会你创建vue项目和用vue.js实现数据增删改查(vue的增删改查实战)

【九、数据查询方法】

1、forEach 、some 、filter 、findIndex这些都属于数组的新方法,都会对数组中的每一项,进行遍历,执行相关的操作。

2、在ES6中,为字符串提供了一个新方法,String.prototype.includes('要包含的字符串'),如果包含,则返回 true ,否则返回 false。

3、代码如下图:

一篇文章教会你创建vue项目和用vue.js实现数据增删改查(vue的增删改查实战)

【十、总结】

1、创建vue项目使用cmd命令安装npm、cnpm、vue-cli、webpack,输入vue ui开始创建vue项目。

2、删除方法,可以使用索引,为每一行设置一个id属性值,然后删除总数据id属性值的那个项。

3、操作Model数据的时候,指定的业务逻辑操作。

****看完本文有收获?请转发分享给更多的人****

IT共享之家

入群请在微信后台回复【入群】

想学习更多Python网络爬虫与数据挖掘知识,可前往专业网站:http://pdcfighting.com/

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2022年7月15日 上午8:49
下一篇 2022年7月16日 上午8:31

相关推荐

  • 四川大竹县三强化助力草食牲畜发展

      一是强化科技推广,抓品种改良。大力推广黑麦草、高丹草、菊苣、紫花苜蓿、青贮玉米等优质牧草种植,夯实草食牲畜发展基础。今年共引进优质牧草种子2.68吨,种植优质牧草及饲用作物7….

    科研百科 2022年5月31日
    359
  • J2eeFAST 开源平台(j2ee开发平台)

    J2eeFAST 是一个 java EE 企业级快速开发平台,基于经典技术组合(spring Boot、Spring MVC、Apache Shiro、MyBatis-Plus、F…

    科研百科 2024年4月29日
    60
  • 云南省交通厅董玉佩

    云南省交通厅董玉佩 云南省交通厅董玉佩是云南省交通运输厅的一名官员。作为云南省交通运输厅的长官,董玉佩的工作涉及到交通、运输、物流等多个领域。 董玉佩毕业于云南大学,获得经济学博士…

    科研百科 2024年11月8日
    0
  • 你真的了解ACCP8.0这门课程吗(accp8.0教材)

    众所周知,目前软件行业发展快速,人才严重短缺。很多人在就业或者再就业的时候首先选择去培训机构学习一门技能,然后在再进行下一步的职业规划。ACCP成为了一个热门选项。 ACCP是大连…

    科研百科 2024年5月20日
    80
  • 广东省民办教育实施意见(广东省民办中小学科研项目)

    广东省民办中小学科研项目 近年来,广东省民办中小学教育得到了快速发展。为了促进这一行业的发展,广东省政府高度重视民办中小学教育科研项目,并加大了对民办中小学教育的支持力度。本文将介…

    科研百科 2024年8月2日
    70
  • 卡玛官方网站(卡玛办公网站)

    卡玛办公网站: 现代企业信赖的办公平台 随着现代企业的不断发展,办公平台也变得越来越重要。卡玛办公网站作为现代企业信赖的办公平台,一直致力于为客户提供高质量、高效率、高安全性的办公…

    科研百科 2024年6月4日
    69
  • 在购买日合并资产负债表中调整盈余公积和未分配利润

    在购买日合并资产负债表中调整盈余公积和未分配利润 在购买日合并资产负债表中,通常会涉及到调整盈余公积和未分配利润。这些调整是为了反映公司实际财务状况,并为投资者提供更准确的信息。 …

    科研百科 2024年10月14日
    5
  • 畜牧业供给侧结构性改革 怎么改 改什么

      2015年11月份中央针对宏观经济提出农业供给侧结构性改革,为什么要进行供给侧结构性改革,改什么,怎么改?在第八届中国蛋鸡行业发展大会上,畜牧业司处长辛国昌做了详细解读,本报进…

    科研百科 2022年5月18日
    432
  • 软件项目运维管理系统

    软件项目运维管理系统 随着软件行业的发展,软件项目越来越重要。但是,传统的手工管理方法已经无法满足现代软件开发的要求。因此,软件项目运维管理系统成为了一个必不可少的工具。本文将介绍…

    科研百科 2024年10月2日
    16
  • 收银管理系统软件

    收银管理系统软件:提升工作效率的神器 随着商业竞争的加剧,企业需要不断地提高生产效率和降低成本,而收银管理系统软件正是实现这一目标的重要手段。本文将介绍收银管理系统软件的基本概念、…

    科研百科 2024年10月1日
    21