Vue中音樂播放器

来源:https://www.cnblogs.com/pythonywy/archive/2019/10/09/11640559.html
-Advertisement-
Play Games

一.安裝依賴 ​ or` 二.使用 三.官方文檔 "點我官方文檔" "點我中文官方文檔" ...


一.安裝依賴

yarn add vue-aplayer

​ or`

npm i vue-aplayer

二.使用

<template>
    <div class="vue_aplayer">
        <aplayer autoplay
          :music="{
            title: '歌曲標題',
            artist: '歌手名',
            src: '歌曲url',
            pic: '歌曲播放器封面url'
          }"
        />
    </div>
</template>

<script>
    import aplayer from 'vue-aplayer'
    export default {
        name: "VueAplayer",
        components: {
                aplayer
            }
    }
</script>
<style scoped>

</style>

三.官方文檔

點我官方文檔

點我中文官方文檔


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 作為前端,在工作中難免會遇到關於排版的問題,以下是我整理的一些關於CSS的技巧,希望對你能有幫助。 1、每個單詞的首字母大寫 一般我們會用JS實現,其實CSS就可以實現。 JS代碼: var str = 'hello world'; str.replace(/( |^)[a z]/g,(L)= L. ...
  • 1.引入外部樣式表的格式: <link rel=”stylesheet” type=”text/css” href=”../css/style1.css”> 2.樣式表第一行應註明編碼類型: @charset “utf-8”; 3.css語法: ①一個元素中多個屬性用分號隔開,多個元素之間用逗號隔開 ...
  • 在前端裡面,大家都知道,html中輸入空格或換行是識別不了是空格的,但是有時候需要實現,那麼該如何解決呢?主要有以下幾個方面: 1:常用的轉義:&nbsp; 2:使用全形拼音,然後輸入空格也可實現 3:用標簽 pre實現(一般很少用了) 4:用css text-indent實現(這個一般用於時間段首 ...
  • 1. _proto_和prototype prototype屬性是一個靜態屬性, _proto_屬性是一個實例屬性。 prototype表示類的原型對象,_proto_表示原型對象中定義的內部屬性[prototype]的值。 類的每一個實例都有一個_proto_屬性,用於引用創建它的構造方法的pro ...
  • 關於CSS的書寫規範和順序,是大部分前端er都必須要攻剋的一門關卡,如果沒有按照良好的CSS書寫規範來寫CSS代碼,會影響代碼的閱讀體驗。這裡總結了一個CSS書寫規範、CSS書寫順序供大家參考,這些是參考了國外一些文章以及我的個人經驗總結出來,我想對寫CSS的前端用戶來說是值得學習的。 CSS書寫順 ...
  • vue對比jquery vue:mvvm 數據驅動影響視圖 適用於複雜數據jquery:mvc 視圖塞入數據 適用於複雜視圖動效 (其實都是js 的封裝,以及對html 的擴展) 相關指令 v-text 等同大鬍子效果 但是會轉換為字元串 v-html 綁定html屬性 v-if三兄弟 只會渲染判斷 ...
  • 1. Promise 的含義 Promise 是非同步編程的一種解決方案,比傳統的解決方案 回調函數和事件更合理、更強大。 1.1 什麼是Promise 簡單來說就是一個容器,裡面保存著某個未來才會結束的事件(也就是非同步操作)的結果。從語法上來講,Promise是一個對象,從它可以獲取非同步操作的消息, ...
  • //js layui.use(['laydate', 'layer', 'element', 'form','laypage'], function() { form = layui.form, form.on('switch(used)', function(data){ var s... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...