使用VUE2制作音乐播放器

研究了2天的成果终于得到回报了，播放器已经制作完成，但还有待于完善。我总是离不开jQuery的DOM操作，刚开始学习VUE，还是会经常使用到DOM操作。因此写出来的代码还是有很多缺点，等待往后学习的差不多了，我会再改进的。
做播放器的想法来源于之前本人做的web app《vuejs2 + wp-rest-api开发web app》此文章的灵感。因此再献上一个music player来温习下vue。

一、效果

GIF动图有3M多，如果没有显示出来，请再等等

看到了吧，自己的一点小创意，搞了个猪头上去。

二、相关代码

本程序中仅使用了vue的ajax框架vue-resource，未使用到vue-router，因此再安装vue-cli的时候，可以略过vue-router，本程序仅有一个组件，即只有一个vue文件，使用了css预处理语言stylus。使用的json数据为本站相关php代码生成的（仅为了演示），如果你是在本地搭建环境，json也可以写在本地。

本demo已经使用cordova制作成了安卓的apk文件，如需体验，请点击此处下载
源码已经提交到github（记得给我加星哦）：https://github.com/king2088/vue-tplayer
演示地址：http://www.egtch.com/t_works/tplayer/
1、生成json的php如下（代码非常简单，就是定义一串json数据，然后在展现出来）：



2、app.vue代码