vue-cli 中 使用vue-resource 輸出後臺數據

 

閱讀此文前，請了解vue-cli 組件如何使用  http://www.cnblogs.com/pearl07/p/6252116.html

 

1，mock（模擬）後臺數據（新建data.Json文件）。

 

2，在build文件夾下的dev-server.js中，導入數據。

 

3，在main.js文件中引用vue-resource。

----在此以前，須要使用  npm install vue-resource  安裝  vue-resource 依賴。

 

4，在app.vue中，在鉤子函數內，利用vue-resource發送異步請求，成功後執行。

----在template中使用的<headcomp></headcomp>組件中，綁定（v-bind）獲取的數據。

----v-bind：home=「home」  能夠簡寫爲 --- ：home=「home」。

 

5，headcomp組件，在export default中，使用props接收綁定傳過來的數據。

----因而即可以{{home.title}}進行調用，並渲染出。

 

6，最終效果