一篇文章教會你建立vue項目和使用vue.js實現數據增刪改查

簡介： 一篇文章教會你建立vue項目和使用vue.js實現數據增刪改查

【1、項目背景】

   在管理員的一些後臺頁面裏，數據列表中都會對這些數據進行增刪改查的操做，例如管理員添加商品、修改商品價格、刪除商品、查詢商品，咱們應該關注這些數據的操做和處理。

【2、項目目標】

   主要有如下5個目標：

一、如何建立vue項目。

二、數據添加方法：獲取到id和name在data上面獲取，組織一個對象，把對象經過數組的相關方法，添加到當前data的自定義的一個數組，在VM使用Model數據操做。

三、數據刪除方法：根據id找到要刪除這一項的索引值，找到後調用數組的splice方法。

四、數據修改方法：根據Id找到修改這一項的索引值，找到索引值後數據就會更改。

五、數據查詢方法：在ES6中，爲字符串提供了一個新方法：

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

若是包含，則返回 true ，不然返回 false。

【3、效果展現】

   先上結果顯示圖後，小編就開始教你如何寫這個項目。

【4、建立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項目，接下咱們開始寫這個添加、刪除、修改、查詢數據商品代碼。

【5、界面的佈局】

這個項目咱們用到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。

【6、數據添加方法】

一、獲取到id 和name,在data 上面獲取。

二、組織出一個對象，把這個對象調用數組的相關方法，添加到當前data 上的 list 中。

三、在Vue.js中已經實現了數據雙向綁定，每當咱們修改了data中的數據後，監聽到數據更名，自動把最新數據顯示在頁面。

四、在進行VM中的Model數據操做，同時，在操做Model數據的時候，指定的業務邏輯操做。

五、代碼以下圖：

【7、數據刪除方法】

一、如何根據Id，找到要刪除這一項的索引值。

二、當找到索引了就調用數組的 splice方法。

三、代碼以下圖：

【8、數據修改方法】

一、定義一個在data自定義一個數組用來保存修改後的數據edit:[]；

二、在方法裏面定義對象，根據Id，找到修改這一項的索引值，找到索引值後數據就會更改。

三、代碼以下圖：

【9、數據查詢方法】

一、forEach 、some 、filter 、findIndex這些都屬於數組的新方法，都會對數組中的每一項，進行遍歷，執行相關的操做。

二、在ES6中，爲字符串提供了一個新方法，String.prototype.includes('要包含的字符串')，若是包含，則返回 true ，不然返回 false。

三、代碼以下圖：

【10、總結】

一、建立vue項目使用cmd命令安裝npm、cnpm、vue-cli、webpack，輸入vue ui開始建立vue項目。

二、刪除方法，可使用索引，爲每一行設置一個id屬性值，而後刪除總數據id屬性值的那個項。

三、操做Model數據的時候，指定的業務邏輯操做。

看完本文有收穫？請轉發分享給更多的人