vue
文章平均质量分 55
抒深
你随风而来,我心花盛开。
展开
-
vue实现歌词与播放时间同步
引言作为音乐播放器没有歌词怎么行!实现结果如下:在上一篇博文中我们已经讲了如何将从后台返回的歌词解析为我们所需要的格式,那么本篇的目的就是将这些歌词渲染到屏幕上并实现动态滚动效果。1.先将歌词渲染到页面<ul> <li v-for="(item, index) in lyric" :key="index" > {{ item.str }} </li></ul>lyric为解析好的歌词。2.接着给他加上一点原创 2021-05-12 15:21:13 · 1820 阅读 · 0 评论 -
解析neatEaseMusic歌词
引言由于从后台返回的歌词格式有许多种,今天主要讲的是网易云音乐的后台歌词解析。1.首先我们来看看网易云返回给我们的歌词格式是什么样的。以梅梅的歌曲为例:返回的歌词是如上格式的字符串。每一行有一个换行符,并且前面一部分是播放当前歌词的时间,后面一部分是歌词。因此,首先我们得先把歌词给切分开来,得到我们想要的数据。2.根据自己的项目需求解析为具体格式。我将会把歌词拆分为如下格式:lyricArr = [ { time: '00:00.000', lyric: '作词: T原创 2021-05-10 17:58:26 · 481 阅读 · 0 评论 -
vuex在刷新页面时数据清空
今天在使用vuex管理数据时,发现页面刷新后数据清空了。后来查了些资料,发现vuex的数据是存储在内存中,页面刷新时,内存将会被释放,并会重新加载js脚本,变量重新赋值。所以如果想要做到数据持久化,就需要将数据存储在localstorage,seassionstorage或者cookie里。例如://在store/index.js中修改如下state: sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state'原创 2021-04-23 22:07:30 · 2117 阅读 · 0 评论 -
在vue中使用NeteaseCloudMusicApi并调用这个接口获取数据
文章目录前言一、node环境安装二、运行Api1.利用git将项目clone到本地2.给项目安装依赖三、在vue中调用接口并获取数据总结前言在vue中如何使用NeteaseCloudMusicApi今天我们要实现的就是调用NeteaseCloudMusicApi接口并获取我们所需要的数据这里我们获取的是banner(轮播图数据),结果图如下:![在这里插入图片描述](https://img-blog.csdnimg.cn/20201031205959172.png?x-oss-process=原创 2020-10-31 22:11:42 · 3662 阅读 · 5 评论 -
vue封装导航栏
文章目录前言一、项目结构二、明确组件特征总结前言利用vue封装自己的导航栏我的组件需要完成的结果如下:一、项目结构首先我们利用vue-cli脚手架工具创建了我们的vue项目,这时候我们会发现他已经将基本的项目结构划分完成了,这个时候我们需要根据自己的实际项目需求完善自己的项目结构。(创建vue项目见前博文)。既然我们要封装一个导航栏那么我们应该将这个组件放在什么地方呢?为了方便管理,我们又该如何设置项目结构呢?根据以上问题我们可以在components下创建一个common文件夹,用来存储抽原创 2020-10-30 12:45:45 · 1536 阅读 · 0 评论 -
创建vue项目
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、安装node.js环境2.安装vue-cli脚手架3.创建vue项目总结前言创建vue项目的基本配置一、安装node.js环境在用Vue.js构建大型应用的时候通常使用NPM安装方法,NPM能更加方便快捷的搭建项目,例如在项目当中我们常常需要安装各种插件以及打包工具等。1.从node.js官网下载并安装node,安装过程很简单,一直点下一步就ok了,安装完之后,我们通过打开命令行工具(win+R),输入 node原创 2020-10-18 22:00:56 · 700 阅读 · 0 评论