Vue.js学习系列（十）---给页面增加动态数据

前面的文章写的页面都是静态的，也就是说数据是固定不变的。在实际的应用中，需要请求外部数据以动态改变页面内容。对应有一个库叫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: *

这时候运行看看。等一会接口返回数据，咦，数据加载出来了，棒棒哒!