[1.项目后台】在管理员的一些后台页面，会在数据列表中对这些数据进行增删改查。例如管理员添加商品、修改商品价格、删除商品、查询商品等。我们应该注意对这些数据的操作和处理。[2。项目目标】主要有以下五个目标：1.如何创建一个vue项目。2、数据添加方法：获取数据上的id和name，组织一个对象，通过数组的相关方法将对象添加到当前数据的自定义数组中，在VM中使用Model数据操作。3.数据删除方法：根据id找到要删除的item的索引值，找到后调用数组的splice方法。4.数据修改方法：根据Id查找并修改此项的索引值，找到索引值后数据会发生变化。5、数据查询方法：ES6中为字符串提供了新的方法：String.prototype.includes('stringtobeincluded')如果被包含则返回true，否则返回false。[3.【效果展示】先上传结果展示图，小编就开始教大家写这个项目。[4.创建vue项目】下面介绍如何创建vue项目。1）打开cmd命令步骤：第一步点击开始菜单，找到“运行”，点击进入，也可以通过“win+R”直接打开运行，2）第二步进入运行后，输入“cmd”，3）第三步点击确定，将进入命令提示符。4）安装npm（npm的全称是NodePackageManager，是一个基于Node.js的包管理器，也是整个Node.js社区中最流行的包管理器，支持的第三方模块最多）。npm-v5)npm安装如下图所示：6)由于网络原因安装cnpmnpminstall-gcnpm--registry=https://registry.npm.taobao.org7)安装vue-clicnpminstall-g@vue/cli8)安装webpackcnpminstall-gwebpack
webpack是一个JavaScript打包器（模块打包器）9)安装后开始创建项目。如下图输入vueui：10）输入后，会弹出一个网页，如图11）点击vue项目管理器；12)点击这里创建一个新项目；13）输入项目名称（我的项目名称是test），点击Nextstep；14)创建项目完成。15)创建项目并加载它需要一定的时间。加载完成后使用命令行进入项目输入npminstall，然后运行项目输入命令cnpmrunserve如下图：16)最后根据Local或Network输入URL；以上就是创建Vue项目，接下来我们开始编写增删改查数据这个产品代码。[5.界面布局】我们在这个项目中使用了boostrap.css文件，如何引入这个boostrap包呢？1）打开cmd命令，在本项目中输入npminstallbootsrtap；2）在style中写这行代码：@import"~bootstrap/dist/css/bootstrap.min.css"3）写页面Layout需要的组件：4）直接渲染v-for中的数据从数据列表中。我们自定义了一个搜索方法，同时将所有要搜索的关键字以参数传递方法的形式传入，在搜索方法内部，通过一个for循环，将所有匹配搜索关键字的数据保存到一个新的数组中并返回.5)接下来，定义数据中的id、名称、关键字、列表。[6.数据添加方法】1、获取id和name，在数据上获取。2.组织一个对象，在这个对象上调用数组的相关方法，在当前数据上添加到列表中。3.Vue.js实现了双向数据绑定。每当我们修改data中的数据时，我们都会监听到数据名称的变化，并自动在页面上显示最新的数据。4、在VM中操作Model数据时，同时在操作Model数据时，对指定的业务逻辑进行操作。5、代码如下图所示：[7.数据删除方法】1.如何根据Id找到要删除的item的索引值。2、找到索引后，调用数组的拼接方法。3、代码如下图所示：[8.数据修改方法】1、在data中定义一个自定义数组，用于保存修改后的数据edit:[];数据更改后的项的索引值。3、代码如下图所示：[9.数据查询方法】1、forEach、some、filter、findIndex都是数组新增的方法，会遍历数组中的每一项，进行相关操作。2、ES6中为字符串提供了一个新的方法，String.prototype.includes('要包含的字符串')，如果包含则返回true，否则返回false。3.代码如下：【10.总结】1.创建vue项目使用cmd命令安装npm、cnpm、vue-cli、webpack，输入vueui开始创建vue项目。2、删除方式可以使用索引为每一行设置一个id属性值，然后删除总数据中具有id属性值的item。3.操作Model数据时，指定业务逻辑操作。看完这篇文章你有收获吗？请转发并分享给更多的人。加群请在微信后台回复【加群】
