App下載

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

星河幾重 2021-08-25 14:17:03 瀏覽數(shù) (3926)
反饋

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

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

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

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

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

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

開始:安裝 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)。


0 人點(diǎn)贊