- vue-resource
- axios
- fetch-jsonp
一、vue-resource插件请求数据
(一)安装vue-resource插件
备注:在安装组件时,一定要加上
--save
,这样该组件才会出现在package.json
中,这样别人拿到把你的项目才能正确的把依赖下载完毕,才能成功运行项目!
cnpm install vue-resource --save
(二)main.js 引入 并应用vue-resource
import VueResource from 'vue-resource';
Vue.use(VueResource);
(三)在组建里使用 vue-resource 语法请求数据
<script>
import Head from './Head.vue';
import Life from './Life.vue';
export default {
data() {
return {
msg: '我是一个组件',
flag: true,
list: []
}
},
methods: {
run() {
alert(this.msg);
},
getData() {
var url = "https://api.douban.com/v2/movie/top250";
// 使用 vue-resource 请求数据
this.$http.get(url).then((response) => {
console.log(response);
this.list = response.body.result;
console.log(list);
}, function(err){
console.log(err);
});
}, function(err){
console.log(err);
});
}
},
components: {
"v-head": Head,
"v-life": Life
},
// 页面刷新时请求数据
mounted() {
this.getData();
}
}
</script>
二、axios插件请求数据
1.安装axios插件
cnpm install axios --save
2.哪里用哪里引入axios
axios 和 vue-resource的区别就在于:vue-resource只要一个全局引入,哪里都能用;而 axios哪里用,哪里就需要引入!!
<script>
import Head from './Head.vue';
import Life from './Life.vue';
// 引入 axios
import Axios from 'axios';
export default {
data() {
return {
msg: '我是一个组件',
flag: true,
list: []
}
},
methods: {
run() {
alert(this.msg);
},
getData() {
var url = "https://api.douban.com/v2/movie/top250";
// 使用axios请求数据
Axios.get(url).then((response) => {
console.log(response);
this.list=response.data.result;
console.log(this.list);
}).catch((err) => {
console.log(err);
});
}, function(err){
console.log(err);
});
}
},
components: {
"v-head": Head,
"v-life": Life
},
// 页面刷新时请求数据
mounted() {
this.getData();
}
}
</script>