11、Vue之vue-resource 请求数据(官方自带模块)

数据请求步骤：
一、vue-resource的配置：
1、在相应的工程中（注意：一定要在相应的项目文件夹中） npm install vue-resource --save(‘save’的作用是将模块保存在package.json中，以便项目转接时省事);

image.png

2、在main.js中 import VueResource from 'vue-resource'(从'Vue-resource'中引入模块，并命名为'VueResource');
3、Vue.use(VueResource);(官方插件都这样用)

image.png

二、使用：
1、在组件中使用：（以QQ音乐接口为例）
let api='https://api.bzqll.com/music/tencent/songList?key=579621905&id=1147906982';//QQ音乐接口
this.$http.get(api).then(function(reponse){
console.log(reponse)
},function(err){
console.log(err)
})

image.png

代码：

image.png

main.js:
// The Vue build version to load with the import command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'Vue-resource'
//从'Vue-resource'中引入模块，并命名为'VueResource'
Vue.config.productionTip = false;
Vue.use(VueResource);//官方插件都这样用
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: ''
})

Home.vue: