【一、項目背景】
在管理員的一些后臺頁面里，數據列表中都會對這些數據進行增刪改查的操作，例如管理員添加商品、修改商品價格、刪除商品、查詢商品，我們應該關注這些數據的操作和處理。
【二、項目目標】
主要有以下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數據的時候，指定的業務邏輯操作。
****看完本文有收獲？請轉發分享給更多的人****
