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

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