一篇文章教會你創(chuàng)建vue項目和使用vue.js實現數據增刪改查
【一、項目背景】
在管理員的一些后臺頁面里,數據列表中都會對這些數據進行增刪改查的操作,例如管理員添加商品、修改商品價格、刪除商品、查詢商品,我們應該關注這些數據的操作和處理。
【二、項目目標】
主要有以下5個目標:
1、如何創(chuàng)建vue項目。
2、數據添加方法:獲取到id和name在data上面獲取,組織一個對象,把對象通過數組的相關方法,添加到當前data的自定義的一個數組,在VM使用Model數據操作。
3、數據刪除方法:根據id找到要刪除這一項的索引值,找到后調用數組的splice方法。
4、數據修改方法:根據Id找到修改這一項的索引值,找到索引值后數據就會更改。
5、數據查詢方法:在ES6中,為字符串提供了一個新方法:
String.prototype.includes('要包含的字符串')
如果包含,則返回 true ,否則返回 false。
【三、效果展示】
先上結果顯示圖后,小編就開始教你如何寫這個項目。
【四、創(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)由于網絡原因安裝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)輸入之后會彈出一網頁如下圖
11)點擊vue項目管理器;

請輸入評論內容...
請輸入評論/評論長度6~500個字