【音乐App】—— Vue-music 项目学习笔记：歌手页面开发

【【音乐App】—— Vue-music 项目学习笔记：歌手页面开发】的更多相关文章

【音乐App】—— Vue-music 项目学习笔记：歌手页面开发

前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记. 项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star. 一.歌手页面布局与设计需求:联系人列表形式.左右联动的滚动列表.顶部标题随列表滚动而改变歌手列表快速入口列表二.歌手数据接口抓取 api目录下创建singer.js——同recommend.js,依赖jsonp和一些公共参数 import jsonp from '@/common/js/jsonp' import {…

【音乐App】—— Vue-music 项目学习笔记：推荐页面开发

前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记. 上一篇总结了项目概述.项目准备.页面骨架搭建.这一篇重点梳理推荐页面开发.项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star. 一.页面简介+轮播图数据分析数据:从QQ音乐抓取的真实数据轮播图热门歌单推荐二.JSONP原理介绍一句话解释JSONP原理:动态生成一个JavaScript标签,其src由接口url.请求参数.callback函数名拼接而成:利用js标签没有…

【音乐App】—— Vue-music 项目学习笔记：项目准备

前言: 学习慕课网Vue高级实战课程后,在实践中总结一些这个项目带给自己的收获,希望可以再次巩固关于Vue开发的知识.这一篇主要梳理:项目概况.项目准备.页面骨架搭建.项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star. 一.项目概况项目目标: 开发一个媲美原生的移动端音乐App 主页面用户个人中心播放器播放列表前端技术栈: Vue:用于构建用户界面的 MVVM 框架.它的核心是响应的数据绑定和组系统件 vue-router…

【音乐App】—— Vue-music 项目学习笔记：歌手详情页开发

前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记. 项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star. 歌曲列表歌曲播放一.子路由配置以及转场动画实现 components->singer-detail目录下:创建singer-detai.vue route->index.js中:引入并配置Singer子路由SingerDetail import SingerDetail from '@/components/singe…

【音乐App】—— Vue-music 项目学习笔记：歌单及排行榜开发

前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记. 项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star. 歌单及详情页排行榜及详情页一.歌单详情页开发歌单详情页布局介绍及Vuex实现路由数据通讯 components->disc目录下:创建disc.vue router->index.js中:给Recommend添加二级子路由Disc { path: '/recommend', component: Recommend,…

【音乐App】—— Vue-music 项目学习笔记：搜索页面开发

前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记. 项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star. 搜索歌手歌曲搜索历史保存一.搜索页面布局 search-Box组件开发 <div class="search-box"> <i class="icon-search"></i> <input class="box" v-model…

【音乐App】—— Vue-music 项目学习笔记：播放器内置组件开发（二）

前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记. 项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star. 播放模式切换歌词滚动显示一.播放器模式切换功能实现按钮样式随模式改变而改变动态绑定iconMode图标class: <i :class="iconMode"></i> import {playMode} from '@/common/js/config' iconMode(){ re…

【音乐App】—— Vue-music 项目学习笔记：用户个人中心开发

前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记. 项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star. 歌曲列表收藏歌曲一.用户个人中心开发基础功能开发设置路由跳转在components->user-center目录下:创建user-center.vue router->index.js中配置路由: { path: '/user', component: UserCenter } m-header.vue中通过&l…

【音乐App】—— Vue-music 项目学习笔记：歌曲列表组件开发

前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记. 项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star. 当前歌曲播放列表添加歌曲到队列 components->playlist目录下:创建playlist.vue -- 在play.vue中应用一..歌曲列表组件显示和隐藏的控制 data中维护一个数据 showFlag: false 使用v-show判断showFlag控制显示隐藏 <div class="pl…