Vue作為目前比較熱門的前端框架之一，今天就和大家分享一下如何在Vue應(yīng)用程序中加載動畫。將為大家解釋，為什么要加載動畫，以及Vue中的加載器是怎么使用的。
為什么我們需要加載動畫？
加載動畫只是讓我們通知用戶正在進行的過程（例如數(shù)據(jù)檢索、驗證等）
我們?nèi)绾卧?Vue 中使用加載器
在本文中，當我們嘗試從 API 檢索數(shù)據(jù)時，我們將設(shè)置一個簡單的加載器來運行。開始：
1.設(shè)置一個Vue項目Vue CLI的要求：
- 節(jié)點
- 計算機上打開的命令行終端
開始：安裝 Vue CLI 以從終端輕松創(chuàng)建新的 Vue 項目：
安裝完成后，輸入以下代碼創(chuàng)建一個新的 vue 項目：要查看如何設(shè)置 Vue CLI 項目，請單擊此處
2. 設(shè)置一個簡單的 Vue 文件基本的 Vue SFC(Single File Component) 包含三個部分
<template></template>- 這包括你的 HTML
<script></script>- 這包括你的 Javascript
<style></style>- 這包括你的 css
這是一個示例 Vue 文件：
3. 為數(shù)據(jù)設(shè)置 HTML 容器
4. 為容器設(shè)置 CSS 和布局我已經(jīng)設(shè)置了一個帶有居中內(nèi)容的簡單 flexbox：
5. 設(shè)置數(shù)據(jù)檢索和加載動畫我們可以在這里有一個示例加載動畫：這是在 JavaScript 部分完成的，我們將使用NBA boxscores。下面是我們將如何做到這一點：
- 創(chuàng)建數(shù)據(jù)對象并將加載設(shè)置為true
- 在方法列表中添加獲取數(shù)據(jù)的方法
- 創(chuàng)建時，獲取數(shù)據(jù)，附加到 HTML 組件并將加載設(shè)置為 false 以禁用加載動畫
6. 最后在 HTML 中引用更新后的數(shù)據(jù)現(xiàn)在一起：
文章到此就結(jié)束了！現(xiàn)在，當你嘗試從端點檢索數(shù)據(jù)時，加載動畫將首先顯示以獲得更好的用戶體驗。
