摘要：要在我們的應用程序中顯示模擬數據，可以在元素中寫入指令用于渲染我們的列表。雖然這超出了本教程的范圍，但建議用于更大或更復雜的應用程序。

這篇文章講述了如何快速構建一個vue程序，并使用axios從遠程獲取數據。
這是原文章的直通門

通常情況下，在構建JavaScript應用程序時，會從遠程獲取數據或使用API。我最近研究了一些公用API，發現有很多很酷的東西可以用在這些獲取到的數據上。

我將演示如何構建一個簡單的新聞app，它將顯示當天的熱門新聞，還允許用戶通過感興趣的類別進行過濾。我們將從紐約時報API獲取數據。可以在這里找到本教程的完整代碼。

下面是最終app的效果：

要使用本教程，你將需要了解基本的Vue.js知識。這是一個vue教程直達。教程將使用ES6語法。

項目結構

我們將只用2個文件來保持項目簡潔：

./app.js
./index.html

app.js包含整個app的邏輯，index.html包含整個app的界面。

我們從index.html開始：

    
        
        
    
    
        

            
Vue新聞
        
    

然后，在index.html的底部，在標簽之前，引入Vue.js和app.js：

可選地，可以引入Foundation，以利用一些預制樣式，使我們的界面看起來更好一點。 將其包含在標簽中：

創建一個簡單Vue應用程序

首先，我們將在元素div#app上創建一個新的Vue實例，并使用一些測試數據來模擬新聞API的響應：

// ./app.js
const vm = new Vue({
    el: "#app",
    data: {
        results: [
            {title: "第一條新聞", abstract: "我是第一條新聞"},
            {title: "接著是第二條", abstract: "我是第二條新聞"},
            {title: "然后是第三條", abstract: "我是第三條新聞"},
            {title: "我是最后一條了", abstract: "我是第四條新聞"}
        ]
    }
});

我們通過el參數告訴Vue要掛載的元素，并通過data參數指定我們的app將使用哪些數據。

要在我們的應用程序中顯示模擬數據，可以在#app元素中寫入:

    

        

            {{ result.title }}
        
        

            
{{ result.abstract }}.
        
    

v-for指令用于渲染我們的列表。我們還使用雙花括號來顯示每一個result的內容。

我們現在有一個基本的布局結構了：

從API獲取數據

要使用紐約時報API，需要獲得一個API密鑰。所以如果你沒有的話，點擊這里，注冊以獲取Top Stories API的API密鑰（注冊時API一欄選擇Top Stories API）。

Axios是一個基于promise的HTTP客戶端，用于發送Ajax請求。它提供了簡單而豐富的API。它與fetch API非常相似，但不需要為舊版瀏覽器添加一個polyfill，還有一些其他的細微之處。

引入axios：

現在，一旦我們的Vue應用程序掛載(mounted)，我們就發送請求獲取top stories的列表：

// ./app.js
const vm = new Vue({
    el: "#app",
    data: {
        results: []
    },
    mounted() {
        axios.get("https://api.nytimes.com/svc/topstories/v2/home.json?api-key=your_api_key")
        .then(response => {
            this.results = response.data.resultes})
    }
});

注意：將your_api_key替換為之前注冊獲得的API key。

現在我們可以在我們的主頁上看到新聞列表。不要擔心不美觀的界面，我們會在后面處理：

通過Vue Devtools來看看API的響應：

為了使我們的項目更加整潔，可復用，我們將做一些小的重構，并介紹一個幫助函數來構建我們的URL。 我們還將注冊getPosts作為我們應用程序的一個方法((將其添加到vue對象的method參數中)：

// ./app.js
const NYTBaseUrl = "https://api.nytimes.com/svc/topstories/v2/";
const Apikey = "your_api_key";

function buildUrl(url) {
    return NYTBaseUrl + url + ".json?api-key=" + Apikey;
}

const vm = new Vue ({
    el: "#app",
    data: {
        results: []
    },
    mounted () {
        this.getPosts("home");
    },
    methods: {
        getPosts(section) {
            let url = buildUrl(section);
            axios.get(url).then((response) => {
                this.results = response.data.results;
            }).catch(error => {
                console.log(error);
            });
        }
    }
});

我們可以通過引入計算屬性(computed property)對API獲得的原始結果進行一些修改，從而對我們的視圖的外觀進行一些更改。

const vm = new Vue ({
    el: "#app",
    data: {
        results: []
    },
    mounted () {
        this.getPosts("home");
    },
    methods: {
        getPosts(section) {
            let url = buildUrl(section);
            axios.get(url).then((response) => {
                this.results = response.data.results;
            }).catch(error => {
                console.log(error);
            });
        }
    },
    computed: {
        processedPosts() {
            let posts = this.results;
            
            //添加image_url屬性
            posts.map(post => {
                let imgObj = post.multimedia.find(media => media.format === "superJumbo");
                post.image_url = imgObj ? imgObj.url : "http://placehold.it/300x200?text=N/A";
            });
            
            //將數據分組
            let i, j, chunkedArray = [], chunk = 4;
            for (i = 0, j = 0; i < posts.length; i += chunk, j++) {
                chunkedArray[j] = posts.slice(i, i + chunk);
            }
            return chunkedArray;
        }
    }
});

在上述代碼中，在計算屬性processedPosts中，我們附加一個image_url屬性給每個新聞對象：
我們通過循環遍歷API的results，并通過在multimedia數組中對單個元素搜索來查找所需格式的媒體，然后將該媒體的URL賦值給image_url屬性。在媒體不可用的情況下，我們將默認圖片地址設置為來自Placehold.it的圖像。

我們還寫了一個循環來將我們的results數組分為四個一組，這將會處理我們前面看到的不美觀界面。

Note: 你也可以使用像Lodash這樣的庫進行分塊。

計算屬性非常適合操縱數據。每當我們需要將results數組分組時，我們可以將它定義為一個計算屬性，按照我們的意愿使用它，因為Vue會在results改動時自動更新processedPosts。

計算屬性也基于它們的依賴關系進行緩存，因此只要results不改變，processedPosts屬性將返回自身的緩存值。這將有助于性能，特別是在進行復雜的數據操作時。

接下來，我們在index.html中修改我們的html標簽，以顯示我們的計算結果：

    

        

            

                {{ post.title }}
            
            
                
            
            

                
{{ post.abstract }}
            
        
    

現在我們的app看起來美觀一些了：

新聞列表組件

組件用于將應用程序模塊化。“新聞列表”可以重構為一個組件，例如，如果我們的app成長起來，并且決定在別的地方也使用新聞列表，組件將會使這變得很容易。

// ./app.js
Vue.component("news-list", {
    props: ["results"],
    template: `
        

            

                

                    

                        

                        {{ post.title }}
                        
                        
                        

                            
{{ post.abstract }}
                        
                    
                
            
        
    `,
    computed: {
        processedPosts() {
            //...
        }
    }
});

在上面的代碼中，我們注冊了一個全局組件：
Vue.component(tagName，options)。建議在定義tagName時使用連字符，這樣它們不會與標準HTML標簽發生沖突。

我們來簡單看一下其他幾個參數：

props：這是一個我們希望從父作用域傳遞給組件的數組。 我們傳遞了results，因為我們從主應用程序實例加載組件。

template：在這里我們定義新聞列表的html。注意，我們將列表包裝在

    
Vue新聞
    

注意：組件也可以創建為單個文件（.vue文件），然后由構建工具（如webpack）解析。雖然這超出了本教程的范圍，但建議用于更大或更復雜的應用程序。

實現類別過濾

const SECTIONS = "home, arts, automobiles, books, business, fashion, food, health, insider, magazine, movies, national, nyregion, obituaries, opinion, politics, realestate, science, sports, sundayreview, technology, theater, tmagazine, travel, upshot, world";

const vm = new Vue({
    el: "#app",
    data: {
        results: [],
        //設置展示的類別數組
        sections: SECTIONS.split(", "),
        //設置默認的展示類別
        section: "home",
    },
    mounted () {
        this.getPosts(this.section);
    },
    //...
});

    
分類
    

        

            

                
                    
                        {{ section }}
                    
                
            
            

                我要看新聞
            
        
    

最終demo

結尾

這篇文章對于vue初學者是一個不錯的教程，它講述了如何快速的搭建起一個vue應用程序，其他詳細的vue特性，可以去官網學習之后基于本項目進行改進。