【一、專案背景】

在管理員的一些後臺頁面裡，資料列表中都會對這些資料進行增刪改查的操作，例如管理員新增商品、修改商品價格、刪除商品、查詢商品，我們應該關注這些資料的操作和處理。

【二、專案目標】

主要有以下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資料的時候，指定的業務邏輯操作。

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

IT共享之家

入群請在微信後臺回覆【入群】