vue安裝到使用製做項目

1.copy files(複製文件夾)
2.run ->cd current position（切換到當前位置）
3.npm install /cnpm install
4.npmrundev
整個環境搭建過程以下
http://blog.qianduanchina.cn/post/596c5bb27838a71273eb4da3

1.下載node js
node安裝過程以下：

解決node-v不是內部命令


在用戶變量裏面設置PATH:C:\Users\Administrator\AppData\Roaming\npm
而且在系統變量中設置PATH :C:\Program Files\nodejs



遇到vue不是可用命令檢查文件是否對應以下圖


打開cmd 輸入下面這行命令
npm install --global vue-cli

新建一個文件夾放項目地址並更改到你新建的文件夾的當前路徑
 
Vue init webpack firstvue(文件夾名你隨變起)





環境搭建好以後每次打開項目記得npm run dev


2.安裝json和resource和router
npm install vue-router --save
npm install vue-resource –save
上面兩句話同這句話
npm install vue-router vue-resource --save
npm install json-server --save

1.瞭解jsonplaceholder是什麼
Github 官網：https://github.com/typicode/jsonplaceholder
測試數據官網
http://jsonplaceholder.typicode.com/
2.瞭解json-server是什麼
官網地址：https://www.npmjs.com/package/json-server
3.全局安裝json-server
npm install -g json-server
4.初始化依賴安裝.json文件
Npm init/npm init-yes
5.新建一個文件夾切換到文件夾地址.安裝以下一直顯示默認就ok


6.初始化package.json以後須要去安裝json-server
Npm install json-server –save
7.安裝完以後須要打開package.json文件夾須要將原來的文件改一下
原來文件：

改爲如今的

8.新建一個以db.json命名的文件夾（你取的db.json 文件夾名字來源於上述watch後面的db.json）
數據部分截圖


9.Npm run json:server

出現以下圖即爲配置好


根據地址去查找出對應的數據好比
http://localhost:3000/users/1可找出name爲曽都的學生
10.請將下列的查找信息用地址拼接找出來
參考網址：https://www.npmjs.com/package/json-server
1.獲取全部的學校信息
http://localhost:3000/schools

2.獲取學校id爲1的信息
http://localhost:3000/schools/1
3.獲取全部學校id爲1的學生信息
http://localhost:3000/users?schoolId=1
http://localhost:3000/schools/1/users
4.獲取學生年齡爲18而且school爲1的學生
http://localhost:3000/users?age=18&schoolid=1

5.獲取學校的描述爲mechanicalschool的學校信息
6.http://localhost:3000/schools?sDescription=mechanicalschool

http://localhost:3000/schools?sDescription=mechanicalschool
7.獲取學校的描述爲electricalschool和socialschool的學校信息
8.http://localhost:3000/schools?sDescription=socialschool&sDescription=electrical school

9.獲取學校信息第一頁且只展現兩條信息

http://localhost:3000/schools?_page=1&_limit=2
http://localhost:3000/users?_page=10等同於下面這句話
http://localhost:3000/users?_page=10&_limit=10

10.將全部的學生年齡信息按照升序排列
http://localhost:3000/users?_sort=age&_order=asc
11.獲取因此大於等於年齡18歲學生的信息
http://localhost:3000/users?age_gte=18

12.獲取年齡在20-22歲的學生信息
13.http://localhost:3000/users?age_gte=20&age_lte=22
gte  大於(gt)等於  lte 小於(lt)等於等於eq 不等於ne
equal/ not equal/ greater than/ less than/ less than or equal/ great than or equal/



11.Remote數據(將jsonplaceholder裏面的數據搭建到本地服務器)

後面加上這樣這樣一段代碼
"json:server:remote":"json-server http://jsonplaceholder.typicode.com/db"

12.開啓remoteserver
npmrunjson:server:remote
出現下圖說明安裝好了

利用前兩天學的知識新建一個項目以下

點擊關於咱們正確顯示關於咱們頁面
tr
<td></td>

postman


1.查詢，用$http.get獲取用戶信息
配置好各路由
用tr去for循環獲得的數據

2.添加，用$http.post添加用戶表單信息
1.注意submit去提交時會去作不少驗證事件，因此須要阻止默認時間
e.preventDefault()
2.新建一個空數組用來v-model存儲界面輸入的用戶信息

v-model和v-bind 的區別

通常建議是表單控件用v-model 
添加用戶

3.Alert組件


判斷是否輸入用戶名電話郵箱代碼




4.詳情展現
新建一個vue文件在mainjs裏面引入路徑


在studentInfo.vue中加上按鈕注意綁定表達式要用v-bind ,而且有字符串時須要‘’

Details頁面




5.編輯和刪除
刪除：在studentInfo裏面加上編輯和刪除按鈕

刪除代碼

編輯代碼：

6.總體效果截圖




利用filter實現搜索功能
1.html代碼
<input type="text" class="form-control" placeholder="搜索" v-model="filterInput"/>
2.data裏面加上filterInput字段
3.在tr for循環中再也不循環用戶數據，而是根據用方法實現根據各類條件循環
4.實現filterByUser方法