介绍
Vue.js 是一个用于构建用户界面的前端 JavaScript 框架。它从一开始就被设计成易于逐步扩展，并能与其他库或现有项目良好集成。这种设计理念使其既适用于小型项目，也适用于与其他工具和库配合使用的复杂单页应用程序。.
应用程序编程接口 (API) 是一种软件接口，它允许两个应用程序相互通信。API 通常会公开一些数据，供其他开发者在自己的应用程序中使用，而无需担心数据库或编程语言的差异。开发者通常从 API 获取 JSON 格式的数据，然后将其集成到前端应用程序中。Vue.js 非常适合使用这类 API。.
在本教程中，您将创建一个 Vue 应用程序，该应用程序使用 Cryptocompare API 来显示两种主流加密货币（比特币和以太坊）的当前价格。除了 Vue 之外，您还将使用 Axios 库来发出 API 请求并处理返回的结果。Axios 的优势在于它可以自动将 JSON 数据转换为 JavaScript 对象并支持 Promise，从而使代码更易于阅读和调试。为了让页面看起来更美观，我们将使用 CSS Foundation 框架。.
先决条件
- 支持 JavaScript 语法高亮显示的文本编辑器，例如 Atom、Visual Studio Code 或 Sublime Text。这些编辑器可在 Windows、macOS 和 Linux 系统上使用。.
- 熟悉 HTML 和 JavaScript 的结合使用。了解更多信息，请参阅“如何在 HTML 中添加 JavaScript”。.
- 了解 JSON 数据格式，您可以在这里了解更多关于如何在 JavaScript 中使用 JSON 的信息。.
- API 请求入门 要了解有关使用 API 的全面教程，请参阅《如何在 Python3 中使用 Web API》。虽然它是用 Python 编写的，但仍然可以帮助您理解使用 API 的核心概念。.
步骤 1 – 创建一个基本的 Vue 应用
在这一步中，您将创建一个基本的 Vue 应用。我们将创建一个包含一些模拟数据的 HTML 页面，最终会将其替换为来自 API 的实时数据。我们将使用 Vue.js 来显示这些模拟数据。在第一步中，我们将所有代码都放在一个文件中。.
使用文本编辑器创建一个名为 index.html 的新文件。.
在此文件中添加以下 HTML 标记，它定义了一个 HTML 框架，并从内容分发网络 (CDN) 拉取 CSS Foundation 框架和 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@3"></script>
</body>
</html>{{ BTCinUSD }} 行是 Vue.js 提供的数据占位符，允许我们在 UI 中以声明式的方式呈现数据。让我们来定义这些数据。.
标签正下方 با Vue، این کد را برای ایجاد یک برنامه جدید Vue اضافه کنید و یک ساختار داده برای نمایش در صفحه تعریف کنید:
...
<script>
const { createApp } = Vue
createApp({
data() {
return {
BTCinUSD: 3759.91
}
}
}).mount('#app')
</script>
这段代码创建了一个新的 Vue 应用实例，并将该实例绑定到具有应用 ID 的元素上。Vue 将此过程称为“挂载应用”。我们定义了一个新的 Vue 实例，并通过传递一个配置对象来对其进行配置。我们向 `createApp` 实例传递一个返回值为 BTCinUSD 的数据对象。此外，我们调用 `createApp` 实例的 `mount` 方法，并传入参数 `#app`，该参数指定了要挂载此应用的元素 ID 以及一个包含要在视图中显示的数据的 `data` 选项。.
在这个例子中，我们的数据模型包含一个键值对，其中包含一个表示比特币价格的虚拟值：{ BTCinUSD: 3759.91}。该数据会显示在我们的 HTML 页面或视图中，我们将键用双花括号括起来，如下所示：
<div class="card-divider">
<p>{{ BTCinUSD }}</p>
</div>我们将最终用来自 API 的实时数据替换此加密值。.
请在浏览器中打开此文件。屏幕上将显示以下输出，其中包含示例数据：
我们目前以美元显示价格。要以其他货币（例如欧元）显示价格，我们需要在数据模型中添加另一个键值对，并在标记中添加另一列。首先，将欧元行添加到数据模型中：
<script>
const { createApp } = Vue
createApp({
data() {
return {
BTCinUSD: 3759.91,
BTCinEURO: 3166.21
}
}
}).mount('#app')
</script>然后是该部分 <div class> 将现有代码替换为以下代码。.
<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 class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in EURO </p>
</div>
<div class="card-divider">
<p>{{ BTCinEURO }}</p>
</div>
</div>
</div>
</div>现在保存文件并在浏览器中重新加载。应用程序现在将以欧元和美元两种货币显示比特币价格。.
在这一步中，你需要创建带有示例数据的 Vue 应用，以确保它能够加载。目前为止，所有操作都在一个文件中完成，现在我们将把代码拆分到不同的文件中，以提高可维护性。.
步骤二——为了清晰起见，将 JavaScript 和 HTML 分开
为了了解其工作原理，我们将所有代码放在一个文件中。在这一步中，我们将应用程序代码拆分为两个单独的文件：index.html 和 vueApp.js。index.html 文件处理页面标记，而 JavaScript 文件包含应用程序逻辑。我们将这两个文件放在同一个目录下。.
首先，修改 index.html 文件，删除 JavaScript 代码，并将其替换为指向 vueApp.js 文件的链接。.
找到文件中的这一部分：
...
<script src="https://unpkg.com/vue@3"></script>
<script>
const { createApp } = Vue
createApp({
data() {
return {
BTCinUSD: 3759.91,
BTCinEURO: 3166.21
}
}
}).mount('#app')
</script>
...并将其更改为如下所示：
...
<script src="https://unpkg.com/vue@3"></script>
<script src="vueApp.js"></script>
...然后，在与 index.html 文件相同的文件夹中创建 vueApp.js 文件。.
在这个新文件中，粘贴与 index.html 文件中相同的 JavaScript 代码，但不要添加 <code> 标签。 قرار دهید:
const { createApp } = Vue createApp({ data() { return { BTCinUSD: 3759.91, BTCinEURO: 3166.21 } } }).mount('#app')保存文件，然后在浏览器中重新加载 index.html 文件。你会看到和之前一样的结果。.
这里，您已经将应用程序与标记语言分离了。接下来，您将添加更多数据，以支持除比特币之外的更多加密货币。.
步骤 3 – 使用 Vue 迭代数据
在此步骤中，您将重建数据并更改其视图以显示比特币和以太坊的价格。.
打开 vueApp.js 文件，并将数据模型的返回部分更改为如下所示：
const { createApp } = Vue
createApp({
data() {
return {
results: {"BTC": {"USD":3759.91,"EUR":3166.21}, "ETH": {"USD":281.7,"EUR":236.25}}
}
}
}).mount('#app')我们的数据模型由于采用了嵌套数据结构而变得更加复杂。现在我们有一个名为 results 的键，其中包含两条记录：一条是比特币价格，另一条是以太坊价格。这种新的结构有助于减少视图中的重复数据，并且与我们从 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>
...用这段代码替换它，这段代码会遍历你定义的数据集。.
...
<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-for 语句，它的作用类似于 for 循环。它会遍历数据模型中的所有键值对，并显示每个键值对的数据。.
当你在浏览器中重新加载页面时，你就会看到这些离谱的价格：
这项修改允许我们在 vueApp.js 的结果数据中添加一种新的货币，并在屏幕上显示它，而无需进行其他更改。.
为了测试此功能，请在数据集中添加另一个带有高亮信息的模拟条目：
const { createApp } = Vue
createApp({
data() {
return {
results: {"BTC": {"USD":3759.91,"EUR":3166.21},
"ETH": {"USD":281.7,"EUR":236.25},
"NEW Currency":{"USD":5.60,"EUR":4.70}}
}
}
}).mount('#app')在以太坊条目后输入尾随逗号。保存文件。.
现在，如果您在网页浏览器中加载该页面，您将看到显示的新条目：
当我们以编程方式检查数据时，无需在标记中手动添加新列。.
这里，您使用了示例数据来查看几种货币的价格。现在，让我们使用 Cryptocompare API 获取实际数据。.
第四步 – 从 API 获取数据
在此步骤中，您将使用来自 Cryptocompare API 的实时数据替换模拟数据，以便在网页上以美元和欧元显示比特币和以太坊的价格。.
为了获取我们页面所需的数据，我们请求 https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR，该 API 请求以美元和欧元计价的比特币和以太坊价格。此 API 返回 JSON 响应。.
使用 curl 向 API 发送请求，在终端会话中查看响应：
curl 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR'你会看到类似这样的输出：
Output
{"BTC":{"USD":21694.18,"EUR":21407.64},"ETH":{"USD":1504.02,"EUR":1485.99}}这个结果与你在上一步中使用的编码数据模型类似，但使用的是比特币和以太坊的当前价格。现在我们只需要通过应用程序请求这个 URL 来修改数据即可。.
对于此请求，我们使用 Vue 的 mounted() 函数结合 Axios 库的 GET 函数来获取数据并将其存储在数据模型中的 results 数组中。mounted() 函数在 Vue 应用挂载到元素上时被调用。Vue 应用挂载完成后，我们向 API 发送请求并存储结果。网页会收到更改通知，并将更改后的值显示在页面上。.
首先，打开 index.html 文件，并在放置 Vue 的代码行下方添加以下脚本来加载 Axios 库：
...
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="vueApp.js"></script>
...保存文件，然后打开 vueApp.js。.
修改和更新 vueApp.js，使其能够请求 API 并将结果填充到数据模型中。.
const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR";
const { createApp } = Vue
createApp({
data() {
return {
results:[]
}
},
mounted() {
axios.get(url).then(response => {
this.results = response.data
})
}
}).mount('#app')请注意，我们已移除结果的默认值，并将其替换为一个空数组。应用首次加载时，将没有任何数据，但 HTML 视图期望在重新加载时重复显示一些数据。.
axios.get 函数使用 Promise。当 API 成功返回数据后，代码块内的代码就会执行，并将数据存储到 results 变量中。.
保存文件，然后在浏览器中重新加载 index.html 页面。这次，您将看到加密货币的当前价格。.
如果看不到任何内容，您可以查看“如何使用 JavaScript 开发者控制台”并使用 JavaScript 控制台调试代码。页面可能需要一分钟才能刷新以显示 API 数据。.
您还可以查看这个 GitHub 仓库，其中包含可供下载进行交叉验证的 HTML 和 JS 文件。您也可以克隆该仓库。.
至此，您已修改应用程序以调用实时数据进行审核。.
结果
不到五十行代码，你就用 Vue.js、Axios 和 Cryptocompare API 这三个工具创建了一个 API 调用应用程序。你学习了如何在页面上显示数据、遍历结果以及用 API 结果替换静态数据。.
现在您已经掌握了基础知识，可以为您的应用程序添加更多功能了。您可以修改此应用程序以显示其他货币，或者使用本教程中学到的技巧，利用不同的 API 创建其他 Web 应用程序。.
