前面的文章写的页面都是静态的,也就是说数据是固定不变的。在实际的应用中,需要请求外部数据以动态改变页面内容。对应有一个库叫vue-resource帮我们解决这个问题。
使用命令行安装
cnpm install vue-resource –save
在main.js引入并注册vue-resource
importVueResourcefrom'vue-resource'
Vue.use(VueResource);
我们在secondcomponent.vue上来动态加载数据
添加一个列表:
{{article.title}}
在data里面加入数组articles并赋值为[]
然后在data后面加入加入钩子函数mounted(详细请参照官方文档关于vue生命周期的解析),data和mount中间记得记得加逗号
mounted:function() {
this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10', {}, {
headers: {
},
emulateJSON: true
}).then(function(response) {
//这里是处理正确的回调
this.articles = response.data.subjects
// this.articles = response.data["subjects"]也可以
},function(response) {
//这里是处理错误的回调
console.log(response)
});
}
这里使用的是豆瓣的公开GET接口,如果接口是跨域的POST请求,则需要在服务器端配置:
Access-Control-Allow-Origin: *
这时候运行看看。等一会接口返回数据,咦,数据加载出来了,棒棒哒!