一篇文章教会你创建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

相关推荐

  • 开发桌面程序界面语言推荐

    开发桌面程序界面语言推荐 随着计算机技术的发展,开发桌面程序界面已经成为了一个越来越重要的话题。在开发桌面程序界面时,选择合适的编程语言可以提高开发效率和界面美观度。本文将介绍一些…

    科研百科 2024年10月23日
    0
  • 国防科技公园(国防科技馆有哪些科研项目)

    国防科技馆有哪些科研项目 国防科技馆是中华人民共和国国防科技工业局所属的一个科技场馆,主要目的是展示和宣传国防科技知识,为国防科技创新提供支持和保障。 在国防科技馆中,有很多科研项…

    科研百科 2024年8月2日
    64
  • 重庆黔江:着力打造畜牧业四化高地

      近年来,黔江区以促进农民增收为重点,大力发展特色畜牧养殖业,确立了“示范带动、扩大规模、争创名牌”的发展思路,坚定不移地走规模化、产业化和标准化发展道路…

    科研百科 2022年5月20日
    290
  • 黔南州“三式”破解国资监管服务“最后一公里”难题(黔南州国资监管局)

    近年来,我州主动探索“三式”工作法,构建政企联动新机制,把工作重心转到服务企业生产经营改革发展、服务企业广大干部职工群众上来,着力破解国资监管服务“最后一公里”难题,切实推动国有企…

    科研百科 2023年1月23日
    383
  • 市政地下管线1100+BIM构件快速使用方式

    在市政工程设计中,由于城市地下管线包含供水、排水、燃气、热力、电力、通信、广播电视、工业等管线及其附属设施,涉及专业多,设计内容复杂,容易造成管线碰撞等问题。因此,在设计过程中,除…

    2022年7月9日
    342
  • 项目评审意见这样写,不妥(项目评审意见这样写,不妥怎么写)

    科学网作者:丁克强 评审意见这样写,不妥 申报过很多次项目,也做过专家审过别人的项目。科学网有很多大牛,还有很多年轻人,也有很多未来的专家。写这博文的目的,是希望后来年轻的专家能避…

    科研百科 2024年6月24日
    275
  • 物流项目管理软件

    物流项目管理软件 随着物流行业的不断发展,物流项目管理软件已经成为了一个不可或缺的工具。物流项目管理软件可以帮助项目经理和物流供应商更好地管理物流项目,提高物流项目的效率和质量。本…

    科研百科 2024年8月14日
    46
  • 工程公司项目管理系统

    工程公司项目管理系统:优化工作流程,提高项目管理效率 随着现代工程公司的不断发展,项目管理已经成为了一项重要的工作。而传统的手动管理方式已经无法满足现代工程公司的需求,因此开发一套…

    科研百科 2024年7月14日
    53
  • 退休人员党支部工作计划2024年

    退休人员党支部工作计划2024年 尊敬的领导、各位同事: 退休人员党支部成立于2017年,是我们党在退休人员中设立的党支部,旨在加强对退休人员的服务和管理,促进退休人员的身心健康,…

    科研百科 2024年10月19日
    127
  • 项目工程管理系统企业

    项目工程管理系统企业 随着现代企业竞争的不断加剧,项目工程管理系统在企业中的应用也越来越广泛。项目工程管理系统是一种可以帮助企业高效地管理项目和工程的软件系统,它可以提高企业的项目…

    科研百科 2024年12月20日
    0