【一、項(xiàng)目背景】
在管理員的一些后臺(tái)頁面里，數(shù)據(jù)列表中都會(huì)對(duì)這些數(shù)據(jù)進(jìn)行增刪改查的操作，例如管理員添加商品、修改商品價(jià)格、刪除商品、查詢商品，我們應(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ì)象通過數(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ù)查詢方法：在ES6中，為字符串提供了一個(gè)新方法：
String.prototype.includes('要包含的字符串')
如果包含，則返回 true ，否則返回 false。
【三、效果展示】
先上結(jié)果顯示圖后，小編就開始教你如何寫這個(gè)項(xiàng)目。
【四、創(chuàng)建vue項(xiàng)目】
下面介紹如何創(chuàng)建vue的項(xiàng)目。
1）打開cmd命令步驟：第一步點(diǎn)擊開始菜單，找到“運(yùn)行”，點(diǎn)擊進(jìn)去，也可以直接通過“win R”打開運(yùn)行，
2）第二步進(jìn)去運(yùn)行之后，在運(yùn)行輸入框里面輸入“cmd”，
3）第三步點(diǎn)擊確定，就進(jìn)去命令提示符了。
4）安裝npm(npm全稱為 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-cli
cnpm install -g @vue/cli
8）安裝webpack
cnpm install -g webpack<br>webpack是JavaScript打包器（module bundler）
9）安裝完之后開始創(chuàng)建項(xiàng)目。輸入vue ui如下圖所示：
10）輸入之后會(huì)彈出一網(wǎng)頁如下圖
11）點(diǎn)擊vue項(xiàng)目管理器；
12）點(diǎn)擊在此創(chuàng)建新項(xiàng)目；
13）輸入項(xiàng)目名（我的項(xiàng)目名是test）后點(diǎn)擊下一步；
14）創(chuàng)建項(xiàng)目完成。
15）創(chuàng)建項(xiàng)目加載需要一定時(shí)間，加載完后再使用命令行進(jìn)到這個(gè)項(xiàng)目輸入npm install 后再運(yùn)行這個(gè)項(xiàng)目輸入命令cnpm run serve如下圖：
16）最后根據(jù)Local或Network輸入到網(wǎng)址中；
以上就是創(chuàng)建vue項(xiàng)目，接下我們開始寫這個(gè)添加、刪除、修改、查詢數(shù)據(jù)商品代碼。
【五、界面的布局】
這個(gè)項(xiàng)目我們用到boostrap.css文件,怎么引入這個(gè)boostrap的包呢？
1）打開cmd命令再這個(gè)項(xiàng)目輸入npm install bootsrtap；
2）在style樣式內(nèi)寫入這行代碼：
@import "~bootstrap/dist/css/bootstrap.min.css"
3）寫頁面需要用到的組件布局：
4）在v-for 中的數(shù)據(jù)，直接從 data 上的list中直接渲染過來的，我們自定義了一個(gè) search 方法，同時(shí)，把所有的關(guān)鍵字，通過傳參的形式，傳遞給了 search方法，在 search 方法內(nèi)部，通過for 循環(huán)，把所有符合 搜索關(guān)鍵字的數(shù)據(jù)，保存到 一個(gè)新數(shù)組中，返回。
5）接下在data定義id、name、keywords、list。
【六、數(shù)據(jù)添加方法】
1、獲取到id 和name,在data 上面獲取。
2、組織出一個(gè)對(duì)象，把這個(gè)對(duì)象調(diào)用數(shù)組的相關(guān)方法，添加到當(dāng)前data 上的 list 中。
3、在Vue.js中已經(jīng)實(shí)現(xiàn)了數(shù)據(jù)雙向綁定，每當(dāng)我們修改了data中的數(shù)據(jù)后，監(jiān)聽到數(shù)據(jù)改名，自動(dòng)把最新數(shù)據(jù)顯示在頁面。
4、在進(jìn)行VM中的Model數(shù)據(jù)操作，同時(shí)，在操作Model數(shù)據(jù)的時(shí)候，指定的業(yè)務(wù)邏輯操作。
5、代碼如下圖：
【七、數(shù)據(jù)刪除方法】
1、如何根據(jù)Id，找到要?jiǎng)h除這一項(xiàng)的索引值。
2、當(dāng)找到索引了就調(diào)用數(shù)組的 splice方法。
3、代碼如下圖：
【八、數(shù)據(jù)修改方法】
1、定義一個(gè)在data自定義一個(gè)數(shù)組用來保存修改后的數(shù)據(jù)edit:[]；
2、在方法里面定義對(duì)象，根據(jù)Id，找到修改這一項(xiàng)的索引值，找到索引值后數(shù)據(jù)就會(huì)更改。
3、代碼如下圖：
【九、數(shù)據(jù)查詢方法】
1、forEach 、some 、filter 、findIndex這些都屬于數(shù)組的新方法，都會(huì)對(duì)數(shù)組中的每一項(xiàng)，進(jìn)行遍歷，執(zhí)行相關(guān)的操作。
2、在ES6中，為字符串提供了一個(gè)新方法，String.prototype.includes('要包含的字符串')，如果包含，則返回 true ，否則返回 false。
3、代碼如下圖：
【十、總結(jié)】
1、創(chuàng)建vue項(xiàng)目使用cmd命令安裝npm、cnpm、vue-cli、webpack，輸入vue ui開始創(chuàng)建vue項(xiàng)目。
2、刪除方法，可以使用索引，為每一行設(shè)置一個(gè)id屬性值，然后刪除總數(shù)據(jù)id屬性值的那個(gè)項(xiàng)。
3、操作Model數(shù)據(jù)的時(shí)候，指定的業(yè)務(wù)邏輯操作。
****看完本文有收獲？請(qǐng)轉(zhuǎn)發(fā)分享給更多的人****
IT共享之家
入群請(qǐng)?jiān)谖⑿藕笈_(tái)回復(fù)【入群】
想學(xué)習(xí)更多Python網(wǎng)絡(luò)爬蟲與數(shù)據(jù)挖掘知識(shí)，可前往專業(yè)網(wǎng)站：http://pdcfighting.com/
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。
