vue-resource:vue.js关于客户端请求数据的官方插件
使用vue-resource请求数据的步骤
1:安装vue-resource插件,记得添加--save 若安装淘宝镜像用cnpm
npm install vue-resource --save / cnpm
2:main.js引入vue-resource
import VueResource from 'vue-resource'
3:
Vue.use(VueResource)
4:在组件中使用vue-resource
var api='http://www.phonegap100.com/appapi.php?a=getPortalCate'
this.$http.get(api).then(response => {
// get body data
this.someData = response.body;
}, response => {
// error callback
});
//vue组件中请求数据的实例
<template>
<ul>
<li v-for="(item,index) in list" :key="index">
{{item.catname}}
</li>
</ul>
</template>
<script>
export default {
data(){
return{
list:[]
}
},
methods: {
getData(){
var api='http://www.phonegap100.com/appapi.php?a=getPortalCate'
this.$http.get(api).then((response)=>{
/* es6中this就指向当前上下文 ,非es6语法中需要提前设置that=this*/
console.log(response)
this.list=response.body.result
},(err)=>{
console.log(err)
})
}
}
}
</script>
上述代码的效果图如下
简单的总结了vue-resource的用法,各方大佬若有更好的例子,欢迎讨论!!!