Vue 数据怎么获取使用外部的数据_框架

通常情况下，在构建 JavaScript 应用程序时，您希望从远程源或从API获取数据。我最近研究了一些公开的API，发现可以使用这些数据源完成很多很酷的东西。

更多来自作者的提示

快速提示：如何在JavaScript中排序对象数组

使用Vuejs，可以逐步地构建围绕其中一个服务的应用程序，并在几分钟内就可以开始向用户提供内容服务。

我将演示如何构建一个简单的新闻应用程序，它可以显示当天的热门新闻文章，并允许用户按照他们的兴趣类别进行过滤，从纽约时报API获取数据。您可以在这里找到本教程的完整代码。

下面是最终应用的外观：

要学习本教程，您将需要一些非常基本的Vuejs的知识。您可以在这里找到一个很棒的“入门指南”。我还将使用ES6语法，您可以到这里进一步学习：

项目结构

为了保持简单，我们只使用2个文件:

/appjs /indexhtml

appjs将包含我们应用程序的所有逻辑，indexhtml 文件将包含我们应用程序的主视图。

我们先在 indexhtml 中写一些基本的标记:

<!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>

然后，在indexhtml的底部导入 Vuejs和appjs，就在</body>标签之前：

可选的，我们还可以导入Foundation，以利用一些预先创建的样式，来使我们的视图看起来更好一点。

创建一个简单的 Vue App

首先，我们将在div#app 元素上创建一个新的 Vue 实例，并使用一些测试数据来模拟新闻API的响应：

// /appjs 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"} ] } });

我们通过el选项告诉 Vue 要挂载的目标元素，并通过data选项指定我们的应用程序用到的数据。

要在我们的应用程序视图中显示这些模拟数据，我们可以在#app元素中写入下面的标记：

<div class="columns medium-3" v-for="result in results"> <div> <div> {{ resulttitle }} </div> <div> <p>{{ resultabstract }}</p> </div> </div> </div>

v-for 指令用于渲染我们的 results 列表。我们使用双花括号来显示每一项的内容。

您可以在 Vue 模板语法这里阅读更多内容

我们现在已经完成了基本的布局工作：

从 API 获取数据

要使用纽约时报API，您需要获得一个API密钥。所以如果你还没有，注册并获取一个热点事件API的API密钥。

创建ajax请求和处理响应

Axios是一个基于 Promise 的>

以前，vue-resource 通常用于Vue项目，但现在已经退休了。

不会。vuex中watch的使用，在全局路由守卫中想要通过store拿到异步请求的数据是无法拿到的。常见使用vuex，是store模块文件写相关的数据信息。vuex是一个专门为vue，js应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

以上就是关于Vue 数据怎么获取使用外部的数据全部的内容，包括:Vue 数据怎么获取使用外部的数据、vue中路由里会去获取vuex中数据吗、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/9568966.html

Vue 数据怎么获取使用外部的数据

发表评论

评论列表（0条）