Ⅰ Vue 數據怎麼獲取使用外部的數據
通常情況下，在構建JavaScript應用程序時，您希望從遠程源或從API獲取數據。我最近研究了一些公開的API，發現可以使用這些數據源完成很多很酷的東西。
更多來自作者的提示
快速提示：如何在JavaScript中排序對象數組
- ./app.js ./index.html
- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>The greatest news app ever</title> </head> <body> <div id="app"> <h3>VueNews</h3> </div> </body> </html>
- <script src="/vue"></script> <script src="app.js"></script>
- <link rel="stylesheet" ajax/libs/foundation/6.3.1/css/foundation.min.css">
- // ./app.js const vm = new Vue({ el: '#app', data: { results: [ {title: "the very first post", abstract: "lorem ipsum some test dimpsum"}, {title: "and then there was the second", abstract: "lorem ipsum some test dimsum"}, {title: "third time's a charm", abstract: "lorem ipsum some test dimsum"}, {title: "four the last time", abstract: "lorem ipsum some test dimsum"} ] } });
- <!-- ./index.html --> <div class="columns medium-3" v-for="result in results"> <div> <div> {{ result.title }} </div> <div> <p>{{ result.abstract }}.</p> </div> </div> </div>
使用Vue.js，可以逐步地構建圍繞其中一個服務的應用程序，並在幾分鍾內就可以開始向用戶提供內容服務。
我將演示如何構建一個簡單的新聞應用程序，它可以顯示當天的熱門新聞文章，並允許用戶按照他們的興趣類別進行過濾，從紐約時報API獲取數據。您可以在這里找到本教程的完整代碼。
下面是最終應用的外觀：
要學習本教程，您將需要一些非常基本的Vue.js的知識。 您可以在這里找到一個很棒的「入門指南」。 我還將使用ES6語法，您可以到這里進一步學習：
項目結構
為了保持簡單，我們只使用2個文件:
app.js將包含我們應用程序的所有邏輯，index.html文件將包含我們應用程序的主視圖。
我們先在index.html中寫一些基本的標記:
然後，在index.html的底部導入Vue.js和app.js，就在</body>標簽之前：
可選的，我們還可以導入Foundation，以利用一些預先創建的樣式，來使我們的視圖看起來更好一點。
創建一個簡單的VueApp
首先，我們將在div#app元素上創建一個新的Vue實例，並使用一些測試數據來模擬新聞API的響應：
我們通過el選項告訴Vue要掛載的目標元素，並通過data選項指定我們的應用程序用到的數據。
要在我們的應用程序視圖中顯示這些模擬數據，我們可以在#app元素中寫入下面的標記：
v-for指令用於渲染我們的 results 列表。 我們使用雙花括弧來顯示每一項的內容。
您可以在Vue模板語法這里閱讀更多內容
我們現在已經完成了基本的布局工作：
從 API獲取數據
要使用紐約時報API，您需要獲得一個API密鑰。所以如果你還沒有，注冊並獲取一個熱點事件API的API密鑰。
創建ajax請求和處理響應
Axios是一個基於 Promise 的HTTP客戶端，用於創建 Ajax請求，並且非常適合我們的應用。它提供了一些簡單而豐富的API。 它與fetchAPI非常相似，但不需要為舊版瀏覽器額外的添加一個polyfill，另外還有一些很巧妙的地方。
以前，vue-resource通常用於Vue項目，但現在已經退休了。