vue-resource请求网络接口

vue-resource,http请求使用示例

【首先，安装vue-resource的包】 npm install vue-resource --save

【main.js】页面

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'  
import VueResource from 'vue-resource'  /* 1、引用vue-resource，http请求 */

import Mans from './components/Mans.vue'   
import Users from './components/Users.vue'

Vue.config.productionTip = false 
Vue.use(VueRouter)   
Vue.use(VueResource)   /*/2、声明http请求vue-resource的使用 */

const router=new VueRouter({   
  routes:[
    {path:"/",component:Users}, 
    {path:"/mans",component:Mans},
  ],
  mode:"history"   
})

new Vue({
  el: '#app',
  router,   
  components: { App },   
  template: '<App/>'  
})


【User.js】页面
<template>   
  <div class="Users">
      <h1>{{name}}</h1>
      <ul>
        <li v-for="every in userInfo" :key="every.id">
            <div>{{every.name}} -- {{every.username}}</div>
        </li>
      </ul>
  </div>
</template>

<script>
  export default {
    name: "Users",  
    data(){
      return {
        name:"亚索哈哈哈",
        userInfo:null,
      }
    },
    methods:{

    },
    created(){   /* 生命周期的created阶段，我们在这个阶段去请求数据 */ 
      /* 因为我们引用了vue-resource的http请求功能，所以我们在这里就可以去请求线上网站里的一条数据了 */
      this.$http.get("http://jsonplaceholder.typicode.com/users").then((data)=>{
        this.userInfo=data.body;
        console.log(this.userInfo)
      }).catch((error)=>{
        console.log("服务器请求出错")
      })
      
    }
  }
</script>

<style></style>