![](https://img2018.cnblogs.com/blog/1669868/201908/1669868-20190828130812326-333174073.png)
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>