【一、項(xiàng)目背景】

在管理員的一些后臺(tái)頁(yè)面里，數(shù)據(jù)列表中都會(huì)對(duì)這些數(shù)據(jù)進(jìn)行增刪改查的操作，例如管理員添加商品、修改商品價(jià)格、刪除商品、查詢(xún)商品，我們應(yīng)該關(guān)注這些數(shù)據(jù)的操作和處理。

【二、項(xiàng)目目標(biāo)】

主要有以下5個(gè)目標(biāo)：

1、如何創(chuàng)建vue項(xiàng)目。

2、數(shù)據(jù)添加方法：獲取到id和name在data上面獲取，組織一個(gè)對(duì)象，把對(duì)象通過(guò)數(shù)組的相關(guān)方法，添加到當(dāng)前data的自定義的一個(gè)數(shù)組，在VM使用Model數(shù)據(jù)操作。

3、數(shù)據(jù)刪除方法：根據(jù)id找到要?jiǎng)h除這一項(xiàng)的索引值，找到后調(diào)用數(shù)組的splice方法。

4、數(shù)據(jù)修改方法：根據(jù)Id找到修改這一項(xiàng)的索引值，找到索引值后數(shù)據(jù)就會(huì)更改。

5、數(shù)據(jù)查詢(xún)方法：在ES6中，為字符串提供了一個(gè)新方法：

String．prototype．includes（＇要包含的字符串＇）

如果包含，則返回 true ，否則返回 false。

【三、效果展示】

先上結(jié)果顯示圖后，小編就開(kāi)始教你如何寫(xiě)這個(gè)項(xiàng)目。

【四、創(chuàng)建vue項(xiàng)目】

下面介紹如何創(chuàng)建vue的項(xiàng)目。

1）打開(kāi)cmd命令步驟：第一步點(diǎn)擊開(kāi)始菜單，找到“運(yùn)行”，點(diǎn)擊進(jìn)去，也可以直接通過(guò)“win＋R”打開(kāi)運(yùn)行，

2）第二步進(jìn)去運(yùn)行之后，在運(yùn)行輸入框里面輸入“cmd”，

3）第三步點(diǎn)擊確定，就進(jìn)去命令提示符了。

4）安裝npm（npm全稱(chēng)為 Node Package Manager是一個(gè)基于Node．js的包管理器，也是整個(gè)Node．js社區(qū)最流行、支持的第三方模塊最多的包管理器）。

npm －v

5）npm安裝如下圖所示：

6）由于網(wǎng)絡(luò)原因安裝cnpm npm install －g cnpm －－registry＝https：／／registry．npm．taobao．org

7）安裝vue－clicnpm install －g ＠vue／cli
8）安裝webpackcnpm install －g webpack＜br＞webpack是JavaScript打包器（module bundler）

9）安裝完之后開(kāi)始創(chuàng)建項(xiàng)目。輸入vue ui如下圖所示：

10）輸入之后會(huì)彈出一網(wǎng)頁(yè)如下圖

11）點(diǎn)擊vue項(xiàng)目管理器；