一篇文章教會你創(chuàng)建vue項目和使用vue.js實現(xiàn)數(shù)據(jù)增刪改查
【一、項目背景】
在管理員的一些后臺頁面里，數(shù)據(jù)列表中都會對這些數(shù)據(jù)進行增刪改查的操作，例如管理員添加商品、修改商品價格、刪除商品、查詢商品，我們應(yīng)該關(guān)注這些數(shù)據(jù)的操作和處理。
【二、項目目標(biāo)】
主要有以下5個目標(biāo)：
1、如何創(chuàng)建vue項目。
2、數(shù)據(jù)添加方法：獲取到id和name在data上面獲取，組織一個對象，把對象通過數(shù)組的相關(guān)方法，添加到當(dāng)前data的自定義的一個數(shù)組，在VM使用Model數(shù)據(jù)操作。
3、數(shù)據(jù)刪除方法：根據(jù)id找到要刪除這一項的索引值，找到后調(diào)用數(shù)組的splice方法。
4、數(shù)據(jù)修改方法：根據(jù)Id找到修改這一項的索引值，找到索引值后數(shù)據(jù)就會更改。
5、數(shù)據(jù)查詢方法：在ES6中，為字符串提供了一個新方法：
String．prototype．includes（＇要包含的字符串＇）
如果包含，則返回 true ，否則返回 false。
【三、效果展示】
先上結(jié)果顯示圖后，小編就開始教你如何寫這個項目。
【四、創(chuàng)建vue項目】
下面介紹如何創(chuàng)建vue的項目。
1）打開cmd命令步驟：第一步點擊開始菜單，找到“運行”，點擊進去，也可以直接通過“win＋R”打開運行，
2）第二步進去運行之后，在運行輸入框里面輸入“cmd”，
3）第三步點擊確定，就進去命令提示符了。
4）安裝npm（npm全稱為 Node Package Manager是一個基于Node．js的包管理器，也是整個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）安裝完之后開始創(chuàng)建項目。輸入vue ui如下圖所示：
10）輸入之后會彈出一網(wǎng)頁如下圖
11）點擊vue項目管理器；
分享
請輸入評論內(nèi)容...
請輸入評論/評論長度6~500個字
最新活動更多
推薦專題
- 1 UALink規(guī)范發(fā)布：挑戰(zhàn)英偉達AI統(tǒng)治的開始
- 2 北電數(shù)智主辦酒仙橋論壇，探索AI產(chǎn)業(yè)發(fā)展新路徑
- 3 降薪、加班、裁員三重暴擊，“AI四小龍”已折戟兩家
- 4 “AI寒武紀”爆發(fā)至今，五類新物種登上歷史舞臺
- 5 國產(chǎn)智駕迎戰(zhàn)特斯拉FSD，AI含量差幾何？
- 6 光計算迎來商業(yè)化突破，但落地仍需時間
- 7 東陽光：2024年扭虧、一季度凈利大增，液冷疊加具身智能打開成長空間
- 8 地平線自動駕駛方案解讀
- 9 封殺AI“照騙”，“淘寶們”終于不忍了？
- 10 優(yōu)必選：營收大增主靠小件，虧損繼續(xù)又逢關(guān)稅，能否乘機器人東風(fēng)翻身？
