个人练习----Vue中使用vue-resource请求数据【如有不对，欢迎指正】

本文主要是介绍个人练习----Vue中使用vue-resource请求数据【如有不对，欢迎指正】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一，安装 vue-resource ( 官方的插件 )
1，cd 到项目的目录
2，安装 npm install vue-resource --save
注意：( --save 是写入到package.json，如果不写是不会写入到 pachsge.json )
3，在 main.js 中引入import vueResource from 'vue-resource'; （ 后面vue-resource 必须和模块的名字 一样，前面的可以随便起名字，后面的赋给前面的 vueResource ， ）
4，使用 Vue.use(vueResource);调用这个插件，官方的插件都这么用。

二，

<template><!-- 所有的内容要被根节点包含 --><div><button @click="getData()">请求数据</button><hr><ul><li v-for="(item, key) in list" :key="key"><p>{{ item.theme_id }}</p><p>{{ item.screen_name }}</p><p>{{ item.text }}</p><p>{{ item.theme_name }}</p><img :src="item.imgSrc" alt=""></li><hr>  </ul></div>
</template><script>/* vue请求数据的模板vue-resourceaxiosfetch-jsonp*/export default {data() {return {flag:false,imgSrc:'',list:[]}},methods: {getData(){var api = 'https://www.apiopen.top/satinApi?type=1&page=1'this.$http.get(api).then((res)=>{console.log(res);this.list = res.body.data;for( var i = 0; i < this.list.length; i++){this.list[i].imgSrc = res.body.data[i].image0;}    },(err)=>{console.log(err);})}},mounted() {this.getData();},}
</script>

获取后台数据要使用 res.body.data;
如有图片需要 for 循环一下

这篇关于个人练习----Vue中使用vue-resource请求数据【如有不对，欢迎指正】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---