Vue 数据怎么获取使用外部的数据
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 数据怎么获取使用外部的数据相关的知识，希望对你有一定的参考价值。
var arr=[1,2,3];
var goodslist = new Vue(
el: '#goods-list',
data:
items:[
obj:'1',
obj:'1',
],
);
html:
<div v-for="item in items"></div>
如何在vue 中使用到arr 呢？ 例如这样 <div v-for="item in arr"></div> 可以使用arr的数据绑定
通常情况下，在构建 javascript 应用程序时，您希望从远程源或从API获取数据。我最近研究了一些公开的API，发现可以使用这些数据源完成很多很酷的东西。
更多来自作者的提示
快速提示：如何在JavaScript中排序对象数组
使用Vue.js，可以逐步地构建围绕其中一个服务的应用程序，并在几分钟内就可以开始向用户提供内容服务。
我将演示如何构建一个简单的新闻应用程序，它可以显示当天的热门新闻文章，并允许用户按照他们的兴趣类别进行过滤，从纽约时报API获取数据。您可以在这里找到本教程的完整代码。
下面是最终应用的外观：
要学习本教程，您将需要一些非常基本的Vue.js的知识。 您可以在这里找到一个很棒的“入门指南”。 我还将使用ES6语法，您可以到这里进一步学习：
项目结构
为了保持简单，我们只使用2个文件:
./app.js ./index.htmlapp.js将包含我们应用程序的所有逻辑，index.html 文件将包含我们应用程序的主视图。
我们先在 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>然后，在index.html的底部导入 Vue.js和app.js，就在</body>标签之前：
<script src="/vue"></script> <script src="app.js"></script>可选的，我们还可以导入Foundation，以利用一些预先创建的样式，来使我们的视图看起来更好一点。
<link rel="stylesheet" ajax/libs/foundation/6.3.1/css/foundation.min.css">创建一个简单的 Vue App
首先，我们将在div#app 元素上创建一个新的 Vue 实例，并使用一些测试数据来模拟新闻API的响应：
// ./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" ] );我们通过el选项告诉 Vue 要挂载的目标元素，并通过data选项指定我们的应用程序用到的数据。
要在我们的应用程序视图中显示这些模拟数据，我们可以在#app元素中写入下面的标记：
<!-- ./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>v-for 指令用于渲染我们的 results 列表。 我们使用双花括号来显示每一项的内容。
您可以在 Vue 模板语法 这里阅读更多内容
我们现在已经完成了基本的布局工作：
从 API 获取数据
要使用 纽约时报API，您需要获得一个API密钥。所以如果你还没有，注册并获取一个热点事件API的API密钥。
创建ajax请求和处理响应
Axios是一个基于 Promise 的HTTP客户端，用于创建 Ajax请求，并且非常适合我们的应用。它提供了一些简单而丰富的API。 它与fetchAPI非常相似，但不需要为旧版浏览器额外的添加一个polyfill，另外还有一些很巧妙的地方。
以前，vue-resource 通常用于Vue项目，但现在已经退休了。
用 vue-resource 请求后台数据 详细请看链接 http://www.gonghaibo.cn
vue怎么获取到接口返回数据后再调其他方法
参考技术A Vue.js中可以使用axios库来获取接口返回的数据，然后在axios的回调函数中调用其他方法。以上是关于Vue 数据怎么获取使用外部的数据的主要内容，如果未能解决你的问题，请参考以下文章