Vue中音乐播放器
一.安装依赖
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>
三.官方文档
Vue中音乐播放器的更多相关文章
- vue实现音乐播放器实战笔记
原文链接:https://blog.csdn.net/Forever201295/article/details/80266600 一.项目说明该播放器的是基于学习vue的实战练习,不用于其他途径.应 ...
- Vue实现音乐播放器(七):轮播图组件(二)
轮播图组件 <template> <div class="slider" ref="slider"> <div class=&qu ...
- Vue实现音乐播放器(四):页面入口+header组件的编写
首先下载三个包 babel-runtime对es语法进行转义 fastclick解决移动端点击300毫秒延迟的问题 babel-polyfill对es6 api进行转义 下载了包之后要在main.js ...
- Vue实现音乐播放器(六):jsonp的应用+抓取轮播图数据
用jsonp来获取数据 通过封装方法来获取 在src文件夹下的api文件夹里面去封装一些获取相关部分组件的数据的方法 在api文件夹下的recommend.js中 配置一下公共参数 请求的真实的u ...
- Vue实现音乐播放器(二)-Vue-cli脚手架安装
- 02 Vue介绍与安装,指令系统 v-*、音乐播放器
VUE文档 https://cn.vuejs.org/v2/guide/ 1.vue的介绍 尤雨溪 1.vue的优点 2.vue的介绍 3.vue的安装 4.声明式渲染 <body> &l ...
- vue——一个页面实现音乐播放器
请忽略下面这段文字年关将至,时间好歹又多出了些许.却不敢过度消遣.岁月未曾饶过我,我亦不想饶过岁月.且将它塞得膨胀,让这一年看似加更充实.不曾料想我一个爱些风花雪月.研墨行歌之人,却做起了碼农这一行当 ...
- 如何用vue打造一个移动端音乐播放器
写在前面 没错,这就是慕课网上的那个vue音乐播放器,后台是某音乐播放器的线上接口扒取,虽然这类项目写的人很多,但不得不说这还是个少有的适合vue提升的好项目,做这个项目除了想写一个比较大并且功能复杂 ...
- 【大结局】《从案例中学习JavaScript》之酷炫音乐播放器(四)
这是之前写的用H5制作的音乐播放器,前三节其实已经做得差不多了,音轨的制作原理已经在上一节说明,不过一直还没有和音乐对接. 本章作为该系列的一个完结篇,我会专门把动态音轨的实现代码贴出来,demo地址 ...
随机推荐
- JSP学习笔记(5)——Servlet、监听器、过滤器、MVC模式介绍
MVC模式 在讲解Servlet前,先介绍一下MVC模式. M:model 模型,相当于数据层,用于存放数据,如一个Java中的一个bean类 V:view 视图,相当于页面层,用于显示数据,如一个网 ...
- TypeScript && React
环境搭建 我们当然可以先用脚手架搭建React项目,然后手动配置成支持TypeScript的环境,虽然比较麻烦,但可以让你更清楚整个过程.这里比较麻烦,就不演示了,直接用命令配置好. npx crea ...
- MySQL索引原理及SQL优化
目录 索引(Index) 索引的原理 b+树 MySQL如何使用索引 如何优化 索引虽好,不可滥用 如何验证索引使用情况? SQL优化 explain查询执行计划 id select_type tab ...
- 手写RPC框架指北另送贴心注释代码一套
Angular8正式发布了,Java13再过几个月也要发布了,技术迭代这么快,框架的复杂度越来越大,但是原理是基本不变的.所以沉下心看清代码本质很重要,这次给大家带来的是手写RPC框架. 完整代码以及 ...
- 解决ie6上碰到的css兼容问题
ie6上css碰到的坑 前两天在给一个项目做东西的时候,碰到一个有意思的项目,是需要兼容ie6,有一些碰到并且解决的问题,给大家写下来,方便大家以后碰到类似的问题哈- 喜欢的话还请点赞! 1.impo ...
- ubuntu系统设置开机后使用使用终端运行应用程序
1.在菜单栏输入start,点击startup application进入 2. 添加开机启动程序 3.因为要用终端启动一个应用程序,所以command输入:gnome-terminal -- 程序执 ...
- 快速开始使用spark
1.版本说明 在spark2.0版本以前,spakr编程接口是RDD(Resilient Distributed Dataset,弹性分布式数据集),spark2.0版本即以上,RDD被Dataset ...
- 11-常用SQL总结
1.设置表的列不能为nullalter table run.dbo.T1 alter column Col1 int not null 2.给表添加主键alter table run.dbo.T1 a ...
- 1,eclipse导入项目jdk版本不一样解决方案 2,java报javax.servlet.jsp cannot be resolved to a type
一:eclipse导入项目jdk版本不一样解决方案 参考博文: https://www.cnblogs.com/chenmingjun/p/8472885.html 选中项目右键 --> Pro ...
- [python]OS文件系统
1.getcwdd() 获得应用程序当前的工作目录 #getcwd() 获取应用程序当前的工作目录 import os print(os.getcwd()) 2.chdir(path) 改变当前工作目 ...