前提是你已经用脚手架cli搭建好了一个项目。
1.cd到项目文件夹cnpm install --save mockjs 下载mockjs
2.在你的项目的文件夹下面的src文件夹下面创建一个mock文件夹
3.在这个mock文件夹的下面创建一个data文件夹用来存放数据。
4.然后再这个mock文件夹下面创建一个index.js文件来写代码。
5.在这个data文件夹下面创建一个home.json文件用来放返回来的数据。
6.模拟数据,创建假的数据。
7.引入mock并且用mock方法请求数据
8.在主配置文件main.js中引用mock
9.至此,mock已经配置完毕,现在我们发送一个请求来测试数据是否可以返回。
10.下载axios来发送数据
进入到当前文件目录下输入以下命令:sudo cnpm install --save axios
11.然后在你想要渲染的地方请求数据。
1.在哪里用在哪里请求数据
2.全局引用axios,就是可以全局使用
12.然后在任何一个页面中使用。
13.使用axios请求放在mock里面的数据(37行到49行)
此时在后台就可以看到请求回来的数据了,我这是请求成功。
14.在components中创建一个子组件
15.然后在你想要渲染的页面路由当中引入子组件。父组件里面写
16.调用子组件。父组件里面写
17.使用子组件。父组件里面写
18.然后用子组件接受外部传过来的数据(这个zidata是绑定到父组件上面的属性,通过这个传值)子组件里面写
19.父组件给子组件传值,并且在页面上渲染子组件,在父组件里面写
20.在父组件的data里面放请求过来的数据,在父组件里面写
21.这时我们把axios请求过来的数据放到fudata里面,在父组件里面写。
22.在子组件里面循环渲染父组件传过来的数据
23.这时在终端里面cd到项目文件夹,输入npm run serve 运行项目。
24.就可以看到我们用mock模拟的数据,用axios请求,并且用组件在页面成功渲染。
记得好好学习。