VUE --- 給頁面加點網絡動態數據

這時候的頁面都是靜態的(數據在寫程序的時候已經固定了不能修改)，而每個應用基本上都會請求外部數據以動態改變頁面內容。對應有一個庫叫 vue-resource 幫我們解決這個問題。

使用命令行安裝

cnpm install vue-resource --save

在 main.js 引入並注冊 vue-resource :

import VueResource from 'vue-resource' Vue.use(VueResource);

我們在 secondcomponent.vue 上來動態加載數據

添加一個列表:

<ul>
      <li v-for="article in articles"> {{article.title}} </li> </ul>

在 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: *

這時候運行看看。等一會接口返回數據，咦，數據加載出來了，棒棒噠 !