vue系列文章（20） vue网络请求vue-resource

vue-resource和vue-router配置大致相同，它的目的就是讲后台的接口数据传输给前端进行显示。

首先需要安装vue-resource

npm install vue-resource --init-dev

安装完成后需要在main.js里面引用vue-resource

import VueResource from 'vue-resource'

Vue.use(VueResource)

这样的话就可以在页面中调用后台接口了

先造一下数据，如我们请求的Users里面的数据改为网络请求接口的数据，

http://jsonplaceholder.typicode.com/users

这个是json数据的格式。

在dom未加载完成前需要加载我们的数据，那么我们可以在created()的钩子函数中请求后台接口。

 created() {
    this.$http.get("http://jsonplaceholder.typicode.com/users").then((data) => {
      this.users = data.body;
    })
  }

请求的数据的格式我们可以用console.log(data)打印下看看

将我们的data赋值给我们的this.users

这样就可以达到请求后台接口的目的了。

后面我们将axios也可以达到同样的效果，并且可以比vue-resource达到更好的效果，而且还有接口封装，拦截器等等功能，后面再继续讲解。

   Vue系列文章目录 

1. vue系列文章（1）：对象绑定，属性绑定
2. Vue系列文章（2）事件绑定，鼠标点击事件
3. vue系列文章（3）：事件修饰符
4. Vue系列文章（4）键盘事件及键盘修饰符
5. vue系列文章（5）双向数据绑定
6. vue系列文章（6）计算属性computed
7. vue系列文章（7）动态CSS类型绑定
8. vue系列文章（8）条件渲染
9. vue系列文章（9）v-for条件循环
10. vue系列文章（10）vue实战项目demo
11. vue系列文章(11)：初始化多个实例对象
12. vue系列文章（12）初始组件的应用
13. Vue系列文章（13）vue cli脚手架
14. vue系列文章（14）vue-cli脚手架，组件嵌套，全局组件注册和局部组件注册
15. vue系列文章（15）属性传值props
16. vue系列文章（16）传值和传引用的类型和区别
17. vue系列文章（17）利用事件传递将子组件值传递给父组件
18. vue系列文章（18）vue生命周期
19. vue系列文章（19）vue路由配置
20. vue系列文章（20） vue网络请求vue-resource

 如果上面文章对你有用，打赏下我吧@*@