关于vue.js:一篇文章教会你创建vue项目和使用vuejs实现数据增删改查

简介： 一篇文章教会你创立 vue 我的项目和应用 vue.js 实现数据增删改查

【一、我的项目背景】

   在管理员的一些后盾页面里，数据列表中都会对这些数据进行增删改查的操作，例如管理员增加商品、批改商品价格、删除商品、查问商品，咱们应该关注这些数据的操作和解决。

【二、我的项目指标】

   次要有以下 5 个指标：

1、如何创立 vue 我的项目。

2、数据增加办法：获取到 id 和 name 在 data 下面获取，组织一个对象，把对象通过数组的相干办法，增加到以后 data 的自定义的一个数组，在 VM 应用 Model 数据操作。

3、数据删除办法：依据 id 找到要删除这一项的索引值，找到后调用数组的 splice 办法。

4、数据批改办法：依据 Id 找到批改这一项的索引值，找到索引值后数据就会更改。

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

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

如果蕴含，则返回 true，否则返回 false。

【三、成果展现】

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

【四、创立 vue 我的项目】

上面介绍如何创立 vue 的我的项目。

1）关上 cmd 命令步骤：第一步点击开始菜单，找到“运行”，点击进去，也能够间接通过“win+R”关上运行，

2）第二步进去运行之后，在运行输入框外面输出“cmd”，

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

4）装置 npm(npm 全称为 Node Package Manager 是一个基于 Node.js 的包管理器，也是整个 Node.js 社区最风行、反对的第三方模块最多的包管理器)。

npm -v

5）npm 装置如下图所示：

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 如下图所示：

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

11）点击 vue 我的项目管理器；

12）点击在此创立新我的项目；

13）输出我的项目名（我的我的项目名是 test）后点击下一步；

14）创立我的项目实现。

15）创立我的项目加载须要肯定工夫，加载完后再应用命令前进到这个我的项目输出 npm install 后再运行这个我的项目输出命令 cnpm run serve 如下图：

16）最初依据 Local 或 Network 输出到网址中；

以上就是创立 vue 我的项目，接下咱们开始写这个增加、删除、批改、查问数据商品代码。

【五、界面的布局】

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

1）关上 cmd 命令再这个我的项目输出 npm install bootsrtap；

2）在 style 款式内写入这行代码：

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

3）写页面须要用到的组件布局：

4）在 v -for 中的数据，间接从 data 上的 list 中间接渲染过去的，咱们自定义了一个 search 办法，同时，把所有的关键字，通过传参的模式，传递给了 search 办法，在 search 办法外部，通过 for 循环，把所有合乎 搜寻关键字的数据，保留到 一个新数组中，返回。

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

【六、数据增加办法】

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

2、组织出一个对象，把这个对象调用数组的相干办法，增加到以后 data 上的 list 中。

3、在 Vue.js 中曾经实现了数据双向绑定，每当咱们批改了 data 中的数据后，监听到数据改名，主动把最新数据显示在页面。

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

5、代码如下图：

【七、数据删除办法】

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

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

3、代码如下图：

【八、数据批改办法】

1、定义一个在 data 自定义一个数组用来保留批改后的数据 edit:[]；

2、在办法外面定义对象，依据 Id，找到批改这一项的索引值，找到索引值后数据就会更改。

3、代码如下图：

【九、数据查询方法】

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

2、在 ES6 中，为字符串提供了一个新办法，String.prototype.includes(‘ 要蕴含的字符串 ’)，如果蕴含，则返回 true，否则返回 false。

3、代码如下图：

【十、总结】

1、创立 vue 我的项目应用 cmd 命令装置 npm、cnpm、vue-cli、webpack，输出 vue ui 开始创立 vue 我的项目。

2、删除办法，能够应用索引，为每一行设置一个 id 属性值，而后删除总数据 id 属性值的那个项。

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

看完本文有播种？请转发分享给更多的人