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，最终效果