如何在 Vue 應(yīng)用程序中使用加載動(dòng)畫

Vue作為目前比較熱門的前端框架之一，今天就和大家分享一下如何在Vue應(yīng)用程序中加載動(dòng)畫。將為大家解釋，為什么要加載動(dòng)畫，以及Vue中的加載器是怎么使用的。

為什么我們需要加載動(dòng)畫？

加載動(dòng)畫只是讓我們通知用戶正在進(jìn)行的過(guò)程（例如數(shù)據(jù)檢索、驗(yàn)證等）

我們?nèi)绾卧?Vue 中使用加載器

在本文中，當(dāng)我們嘗試從 API 檢索數(shù)據(jù)時(shí)，我們將設(shè)置一個(gè)簡(jiǎn)單的加載器來(lái)運(yùn)行。開始：

1.設(shè)置一個(gè)Vue項(xiàng)目Vue CLI的要求：

• 節(jié)點(diǎn)
• 計(jì)算機(jī)上打開的命令行終端

開始：安裝 Vue CLI 以從終端輕松創(chuàng)建新的 Vue 項(xiàng)目：

安裝完成后，輸入以下代碼創(chuàng)建一個(gè)新的 vue 項(xiàng)目：要查看如何設(shè)置 Vue CLI 項(xiàng)目，請(qǐng)單擊此處

2. 設(shè)置一個(gè)簡(jiǎn)單的 Vue 文件基本的 Vue SFC(Single File Component) 包含三個(gè)部分

<template></template>- 這包括你的 HTML

<script></script>- 這包括你的 Javascript

<style></style>- 這包括你的 css

這是一個(gè)示例 Vue 文件：

3. 為數(shù)據(jù)設(shè)置 HTML 容器

4. 為容器設(shè)置 CSS 和布局我已經(jīng)設(shè)置了一個(gè)帶有居中內(nèi)容的簡(jiǎn)單 flexbox：

5. 設(shè)置數(shù)據(jù)檢索和加載動(dòng)畫我們可以在這里有一個(gè)示例加載動(dòng)畫：這是在 JavaScript 部分完成的，我們將使用NBA boxscores。下面是我們將如何做到這一點(diǎn)：

• 創(chuàng)建數(shù)據(jù)對(duì)象并將加載設(shè)置為true
• 在方法列表中添加獲取數(shù)據(jù)的方法
• 創(chuàng)建時(shí)，獲取數(shù)據(jù)，附加到 HTML 組件并將加載設(shè)置為 false 以禁用加載動(dòng)畫

6. 最后在 HTML 中引用更新后的數(shù)據(jù)現(xiàn)在一起：

文章到此就結(jié)束了！現(xiàn)在，當(dāng)你嘗試從端點(diǎn)檢索數(shù)據(jù)時(shí)，加載動(dòng)畫將首先顯示以獲得更好的用戶體驗(yàn)。