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

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

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

我將演示如何構(gòu)建一個(gè)簡(jiǎn)單的新聞app，它將顯示當(dāng)天的熱門新聞，還允許用戶通過感興趣的類別進(jìn)行過濾。我們將從紐約時(shí)報(bào)API獲取數(shù)據(jù)。可以在這里找到本教程的完整代碼。

下面是最終app的效果：

要使用本教程，你將需要了解基本的Vue.js知識(shí)。這是一個(gè)vue教程直達(dá)。教程將使用ES6語法。

項(xiàng)目結(jié)構(gòu)

我們將只用2個(gè)文件來保持項(xiàng)目簡(jiǎn)潔：

./app.js
./index.html

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

我們從index.html開始：

    
        
        
    
    
        

            
Vue新聞
        
    

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

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

創(chuàng)建一個(gè)簡(jiǎn)單Vue應(yīng)用程序

首先，我們將在元素div#app上創(chuàng)建一個(gè)新的Vue實(shí)例，并使用一些測(cè)試數(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指令用于渲染我們的列表。我們還使用雙花括號(hào)來顯示每一個(gè)result的內(nèi)容。

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

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

要使用紐約時(shí)報(bào)API，需要獲得一個(gè)API密鑰。所以如果你沒有的話，點(diǎn)擊這里，注冊(cè)以獲取Top Stories API的API密鑰（注冊(cè)時(shí)API一欄選擇Top Stories API）。

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

引入axios：

現(xiàn)在，一旦我們的Vue應(yīng)用程序掛載(mounted)，我們就發(fā)送請(qǐng)求獲取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替換為之前注冊(cè)獲得的API key。

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

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

為了使我們的項(xiàng)目更加整潔，可復(fù)用，我們將做一些小的重構(gòu)，并介紹一個(gè)幫助函數(shù)來構(gòu)建我們的URL。 我們還將注冊(cè)getPosts作為我們應(yīng)用程序的一個(gè)方法((將其添加到vue對(duì)象的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);
            });
        }
    }
});

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

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;
        }
    }
});

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

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

Note: 你也可以使用像Lodash這樣的庫進(jìn)行分塊。

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

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

接下來，我們?cè)?b>index.html中修改我們的html標(biāo)簽，以顯示我們的計(jì)算結(jié)果：

    

        

            

                {{ post.title }}
            
            
                
            
            

                
{{ post.abstract }}
            
        
    

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

新聞列表組件

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

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

            

                

                    

                        

                        {{ post.title }}
                        
                        
                        

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

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

我們來簡(jiǎn)單看一下其他幾個(gè)參數(shù)：

props：這是一個(gè)我們希望從父作用域傳遞給組件的數(shù)組。 我們傳遞了results，因?yàn)槲覀儚闹鲬?yīng)用程序?qū)嵗虞d組件。

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

    
Vue新聞
    

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

實(shí)現(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è)置默認(rèn)的展示類別
        section: "home",
    },
    mounted () {
        this.getPosts(this.section);
    },
    //...
});

    
分類
    

        

            

                
                    
                        {{ section }}
                    
                
            
            

                我要看新聞
            
        
    

最終demo

結(jié)尾

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