内容
Vue.js 是用于构建用户界面的前端 JavaScript 框架。 它从一开始就设计为可逐步采用，能和其他图书馆或现有项目很好地结合。 这使得它非常适合小型项目以及与其他工具和库一起使用时复杂的单页面应用程序。
API 应用程序接口是允许两个应用程序相互通信的软件中介。 API 经常公开其他开发人员在自己的应用程序中使用的数据，而不必担心数据库或编程语言的差异。 开发人员往往从返回 JSON 格式数据的 API 中获取数据，他们把这些数据集成到前端应用程序中。,Vue.js 非常适合使用这些 API 。
在本教程中，您将创建一个 Vue 应用程序，该应用程序使用 CryptoCompare API 显示两种主要加密货币的当前价格：比特币和 Etherium。 除了 Vue 之外，您还将使用 Axios 库来发出 API 请求并处理获得的结果。
Axios 非常适合，因为它可以自动将 JSON 数据转换为 JavaScript 对象，并且它支持 Promises，从而使代码更易于阅读和调试。 为了让事情看起来不错，我们将使用基础 CSS 框架。
注意：CryptoCompare API 仅可用于非商业用途。 如果您希望在商业项目中使用它，请查看其许可条款。
先决条件
在开始本教程之前，您需要以下内容：
- 支持 JavaScript 语法突出显示的文本编辑器，例如 Atom，Visual Studio Code 或 Sublime Text 。这些编辑器可以在Windows、macOS 和 Linux 上使用。
- 熟悉一起使用 HTML 和 JavaScript 。 详细知道如何将 JavaScript 添加到 HTML 。
- 熟悉 JSON 数据格式，您可以在 JavaScript 中了解如何使用 JSON 。
- 熟悉向 API 发出请求。 有关 API 的详细教程，请参阅 如何在 Python3 中使用 Web API 。 虽然它是为 Python 编写的，但它仍然可以帮助您理解使用 API 的核心概念。
第1步 – 创建基本 Vue 应用程序
让我们创建一个基本的 Vue 应用程序。 我们将构建一个包含一些模拟数据的 HTML 页面，我们最终将使用 API 中的实时数据替换这些数据。 我们将使用 Vue.js 来显示这个模拟数据。
对于第一步，我们将所有代码保存在一个文件中。使用文本编辑器创建一个名为 index.html 的新文件。在此文件中，添加以下 HTML 标记，该标记定义 HTML 框架，并从内容交付网络（CDN）中提取 Foundation CSS 框架和 Vue.js 库。 通过使用 CDN，您不需要下载额外的代码即可开始构建应用程序。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
<meta charset="utf-8">
<title>Cryptocurrency Pricing Application</title>
</head>
<body>
<div class="container" id="app">
<h3 class="text-center">Cryptocurrency Pricing</h3>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in USD </p>
</div>
<div class="card-divider">
<p>{{ BTCinUSD }}</p>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/vue"></script>
</body>
</html>
行 {{BTCinUSD}} 是 Vue.js 将提供的数据的占位符， 这就是 Vue 如何让我们在 UI 中以声明方式呈现数据的方式。 让我们定义那些数据。
在包含 Vue 的 < script > 标记的正下方，添加此代码，创建一个新的 Vue 应用程序并定义我们将在页面上显示的数据结构：
<script>
const vm = new Vue({
el: '#app',
//Mock data for the value of BTC in USD
data: { BTCinUSD: 3759.91}
});
</script>
此代码创建一个新的 Vue 应用程序实例，并将实例附加到 id 为 app 的元素，Vue 将此过程称为安装应用程序。
我们定义一个新的 Vue 实例并通过传递配置对象来配置它。 该对象包含一个 el 选项，它指定我们要在其上安装此应用程序的元素的 id，以及一个包含我们想要的视图数据的数据选项。
在此示例中，我们的数据模型包含一个键值对，其中包含比特币价格的模拟值：{BTCinUSD：3759.91}。 这些数据将显示在我们的 HTML 页面或我们的视图中，在这里我们将密钥括在双花括号中，如下所示：
<div class="card-divider">
<p>{{ BTCinUSD }}</p>
</div>
我们最终将使用 API 中的实时数据替换此硬编码值。
在浏览器中打开此文件。 您将在屏幕上看到以下输出，其中显示模拟数据：
我们用美元显示价格。 如果要以欧元等其他货币显示，我们需要在数据模型中添加另一个键值对，并在标记中添加另一列。
首先，更改数据模型：
<script>
const vm = new Vue({
el: '#app',
//Mock data for the value of BTC in USD
data: { BTCinUSD: 3759.91, BTCinEURO:3166.21 }
});
</script>
然后在标记中添加一个新部分，在现有代码下方以欧元显示价格
<div class="container" id="app">
<h3 class="text-center">Cryptocurrency Pricing</h3>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in USD </p>
</div>
<div class="card-divider">
{{BTCinUSD}}
</div>
</div>
</div>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in EURO </p>
</div>
<div class="card-divider">
{{BTCinEURO}}
</div>
</div>
</div>
</div>
保存文件并在浏览器中重新加载。 该应用程序现在以欧元和美元显示比特币的价格。
我们在一个文件中完成了所有工作。 让我们分解一下来提高可维护性。
第2步 – 清晰度分离 JavaScript 和 HTML
为了了解工作原理，我们将所有代码放在一个文件中。 现在让我们将应用程序代码分成两个单独的文件，index.html 和 VueApp.js。 index.html 文件将处理标记部分，JavaScript文件将包含应用程序逻辑。 这将使我们的应用程序更易于维护。 我们将两个文件保存在同一目录中。
首先，修改 index.html 文件并删除 JavaScript 代码，将其替换为 VueApp.js 文件的链接。
找到文件的这一部分：
<script src="https://unpkg.com/vue"></script>
<script language="JavaScript">
const vm = new Vue({
el: '#app',
// Mock data for the value of BTC in USD
data: { BTCinUSD: 3759.91, BTCinEURO:3166.21 }
});
</script>
并修改它，使它看起来像这样：
<script src="https://unpkg.com/vue"></script>
<script src="vueApp.js"></script>
然后在与 index.html 文件相同的目录中创建 VueApp.js 文件。
在这个新文件中，放置最初在 index.html 文件中的相同 JavaScript 代码，不带 < script > 标记：
const vm = new Vue({
el: '#app',
// Mock data for the value of BTC in USD
data: { BTCinUSD: 3759.91, BTCinEURO: 3166.21 }
})
保存文件并在浏览器中重新加载 index.html。 您将看到之前看到的相同结果。
我们想要支持比 Bitcoiin 更多的加密货币，所以让我们来看看我们是如何做到这一点的。
第3步 – 使用 Vue 迭代数据
我们目前正在展示一些比特币价格的模拟数据。 但是我们也要添加 Etherium。 为此，我们将重组数据并修改视图以使用新数据。
打开 VueApp.js 文件并修改数据模型，使其如下所示：
const vm = new Vue({
el: '#app',
data: {
results: {"BTC": {"USD":3759.91,"EUR":3166.21},
"ETH": {"USD":281.7,"EUR":236.25}}
}
});
使用嵌套数据结构，我们的数据模型变得更加复杂。 我们现在有一个名为 results 的键，其中包含两个记录： 一个用于比特币价格，另一个用于 Etherium 价格。 这个新结构将让我们减少一些重复的视图。 它也类似于我们从 CryptoCompare API 获得的数据。
保存文件。 现在修改我们的标记，以更加编程的方式处理数据。
打开 index.html 文件，找到我们显示比特币价格的文件的这一部分：
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in USD </p>
</div>
<div class="card-divider">
{{BTCinUSD}}
</div>
</div>
</div>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in EURO </p>
</div>
<div class="card-divider">
{{BTCinEURO}}
</div>
</div>
</div>
将其替换为以下代码，该代码迭代您定义的数据集。
<div class="columns medium-4" v-for="(result, index) in results">
<div class="card">
<div class="card-section">
<p> {{ index }} </p>
</div>
<div class="card-divider">
<p>$ {{ result.USD }}</p>
</div>
<div class="card-section">
<p> € {{ result.EUR }}</p>
</div>
</div>
</div>
此代码使用 v-fo r指令，其作用类似于 for 循环。 它迭代我们数据模型中的所有键值对，并显示每个键值对的数据。
当您在浏览器中重新加载它时，您将看到模拟的价格：
此修改允许我们在 VueApp.js 中为结果数据添加新货币，并使其显示在页面上而无需进一步更改。
将另一个模拟条目添加到数据集以尝试此操作：
const vm = new Vue({
el: '#app',
data: {
results: {"BTC":{"USD":3759.91,"EUR":3166.21},
"ETH":{"USD":281.7,"EUR":236.25},
"NEW Currency":{"USD":5.60,"EUR":4.70}}
}
});
在 Etherium 输入后不要忘记添加尾随逗号。
如果现在在 Web 浏览器中加载页面，您将看到显示的新条目：
一旦我们以编程方式处理数据，我们就不需要手动在标记中添加新列。
现在让我们获取真实数据。
第4步 – 从 API 获取数据
现在是时候用来自 CryptoCompare API 的实时数据替换我们的模拟数据，以美元和欧元显示网页上比特币和以太坊的价格。
要获取我们页面的数据，我们将向以下 URL 发出请求，该 URL 以美元和欧元请求比特币和 Etherium：
https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR
此 API 将返回 JSON 响应。 使用 curl 向 API 发出请求以查看响应：
$ curl 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR'
你会看到这样的输出:
Output {"BTC":{"USD":11388.18,"EUR":9469.64},"ETH":{"USD":1037.02,"EUR":865.99}}
此结果与您在上一步中使用的硬编码数据模型完全相同。 我们现在要做的就是通过从我们的应用程序发出对此 URL 的请求来切换数据。
为了发出请求，我们将使用 Vue 中的 mounted（） 函数和 Axios 库的 GET 函数来获取数据并将其存储在数据模型的结果数组中。 一旦将 Vue 应用程序安装到元素上，就会调用挂载的函数。 安装 Vue 应用程序后，我们将向 API 发出请求并保存结果，通知网页更改，并且值将显示在页面上。
首先，打开 index.html 并通过在包含 Vue 的行下面添加一个脚本来加载 Axios 库：
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
保存文件，然后打开 VueApp.js 并对其进行修改，以便向 API 发出请求并使用结果填充数据模型。
const url =
"https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR";
const vm = new Vue({
el: '#app',
data: {
results: []
},
mounted() {
axios.get(url).then(response => {
this.results = response.data
})
}
});
请注意，我们已删除结果的默认值，并将其替换为空数组。 我们的应用程序首次加载时，我们不会有数据，但我们不希望事情中断。 我们的 HTML 视图期望一些数据在加载时迭代。
axios.get 函数使用 Promise， 当 API 成功返回数据时，将执行 then 块中的代码，并将数据保存到结果变量中。
保存文件并在 Web 浏览器中重新加载 index.html 页面。 这次你会看到加密货币的当前价格。
如果不这样做，请查看教程 如何使用 JavaScript Developer Console 并使用 JavaScript 控制台调试代码。
结论
在不到50行代码中，您仅使用三个工具创建了一个消耗 API的 应用程序：Vue.js，Axios 和 CryptoCompare API。 您学习了如何在页面上显示数据，迭代结果，以及使用 API 的结果替换静态数据。
既然您已了解基础知识，那么您可以为应用程序添加其他功能。 修改此应用程序以显示其他货币，或使用您在本教程中学习的技术使用其他 API 创建其他 Web 应用程序。
