Vue作為目前比較熱門(mén)的前端框架之一，今天就和大家分享一下如何在Vue應(yīng)用程序中加載動(dòng)畫(huà)。將為大家解釋，為什么要加載動(dòng)畫(huà)，以及Vue中的加載器是怎么使用的。
為什么我們需要加載動(dòng)畫(huà)？
加載動(dòng)畫(huà)只是讓我們通知用戶正在進(jìn)行的過(guò)程（例如數(shù)據(jù)檢索、驗(yàn)證等）
我們?nèi)绾卧?Vue 中使用加載器
在本文中，當(dāng)我們嘗試從 API 檢索數(shù)據(jù)時(shí)，我們將設(shè)置一個(gè)簡(jiǎn)單的加載器來(lái)運(yùn)行。開(kāi)始：
1.設(shè)置一個(gè)Vue項(xiàng)目Vue CLI的要求：
- 節(jié)點(diǎn)
- 計(jì)算機(jī)上打開(kāi)的命令行終端
開(kāi)始：安裝 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)畫(huà)我們可以在這里有一個(gè)示例加載動(dòng)畫(huà)：這是在 JavaScript 部分完成的，我們將使用NBA boxscores。下面是我們將如何做到這一點(diǎn)：
- 創(chuàng)建數(shù)據(jù)對(duì)象并將加載設(shè)置為true
- 在方法列表中添加獲取數(shù)據(jù)的方法
- 創(chuàng)建時(shí)，獲取數(shù)據(jù)，附加到 HTML 組件并將加載設(shè)置為 false 以禁用加載動(dòng)畫(huà)
6. 最后在 HTML 中引用更新后的數(shù)據(jù)現(xiàn)在一起：
文章到此就結(jié)束了！現(xiàn)在，當(dāng)你嘗試從端點(diǎn)檢索數(shù)據(jù)時(shí)，加載動(dòng)畫(huà)將首先顯示以獲得更好的用戶體驗(yàn)。
