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

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

通常情況下，在構(gòu)建JavaScript應(yīng)用程序時，會從遠程獲取數(shù)據(jù)或使用API。我最近研究了一些公用API，發(fā)現(xiàn)有很多很酷的東西可以用在這些獲取到的數(shù)據(jù)上。

我將演示如何構(gòu)建一個簡單的新聞app，它將顯示當(dāng)天的熱門新聞，還允許用戶通過感興趣的類別進行過濾。我們將從紐約時報API獲取數(shù)據(jù)?？梢栽谶@里找到本教程的完整代碼。

下面是最終app的效果：

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

項目結(jié)構(gòu)

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

./app.js
./index.html

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

我們從index.html開始：

    
        
        
    
    
        

            
Vue新聞
        
    

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

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

創(chuàng)建一個簡單Vue應(yīng)用程序

首先，我們將在元素div#app上創(chuàng)建一個新的Vue實例，并使用一些測試數(shù)據(jù)來模擬新聞API的響應(yīng)：

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

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

要在我們的應(yīng)用程序中顯示模擬數(shù)據(jù)，可以在#app元素中寫入:

    

        

            {{ result.title }}
        
        

            
{{ result.abstract }}.
        
    

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

我們現(xiàn)在有一個基本的布局結(jié)構(gòu)了：

從API獲取數(shù)據(jù)

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

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

引入axios：

現(xiàn)在，一旦我們的Vue應(yīng)用程序掛載(mounted)，我們就發(fā)送請求獲取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。

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

通過Vue Devtools來看看API的響應(yīng)：

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

// ./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獲得的原始結(jié)果進行一些修改，從而對我們的視圖的外觀進行一些更改。

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";
            });
            
            //將數(shù)據(jù)分組
            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屬性給每個新聞對象：
我們通過循環(huán)遍歷API的results，并通過在multimedia數(shù)組中對單個元素搜索來查找所需格式的媒體，然后將該媒體的URL賦值給image_url屬性。在媒體不可用的情況下，我們將默認圖片地址設(shè)置為來自Placehold.it的圖像。

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

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

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

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

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

    

        

            

                {{ post.title }}
            
            
                
            
            

                
{{ post.abstract }}
            
        
    

現(xiàn)在我們的app看起來美觀一些了：

新聞列表組件

組件用于將應(yīng)用程序模塊化?！靶侣劻斜怼笨梢灾貥?gòu)為一個組件，例如，如果我們的app成長起來，并且決定在別的地方也使用新聞列表，組件將會使這變得很容易。

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

            

                

                    

                        

                        {{ post.title }}
                        
                        
                        

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

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

我們來簡單看一下其他幾個參數(shù)：

props：這是一個我們希望從父作用域傳遞給組件的數(shù)組。 我們傳遞了results，因為我們從主應(yīng)用程序?qū)嵗虞d組件。

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

    
Vue新聞
    

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

實現(xiàn)類別過濾

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: [],
        //設(shè)置展示的類別數(shù)組
        sections: SECTIONS.split(", "),
        //設(shè)置默認的展示類別
        section: "home",
    },
    mounted () {
        this.getPosts(this.section);
    },
    //...
});

    
分類
    

        

            

                
                    
                        {{ section }}
                    
                
            
            

                我要看新聞
            
        
    

最終demo

結(jié)尾

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