用jsonp来获取数据   通过封装方法来获取 在src文件夹下的api文件夹里面去封装一些获取相关部分组件的数据的方法 在api文件夹下的recommend.js中 配置一下公共参数 请求的真实的url实际上是由公共参数和每个页面对应的参数拼接起来的 在recommend.vue组件中获取参数  并且渲染到页面上 在created()生命钩子中完成这些工作…
轮播图组件 <template> <div class="slider" ref="slider"> <div class="slider-group" ref="sliderGroup"> //这里的<slot></slot>插槽表示里面的内容可以由引用这个轮播图组件的推荐组件来插入 只需要在<slider></slider>标签里面插入内容…
原文链接:https://blog.csdn.net/Forever201295/article/details/80266600 一.项目说明该播放器的是基于学习vue的实战练习,不用于其他途径.应用中的全部数据来自于 QQ音乐 移动端(https://m.y.qq.com/),利用 jsonp 以及 axios 代理后端请求抓取. 二.目录结构目录/文件         说明api                    与后台数据交互文件base                 一些与业务逻…
一.安装依赖 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&…
state:所有组件的所有状态和数据  放入同一个内存空间去管理 我们把它称为state Vue Components:state里面的数据可以方便的映射到组件上 然后渲染组件 Actions:当组件的数据发生变化的时候 它可以通过Dispatch一个Actions 然后Actions可以做一些异步操作 比如与后端的一些交互  然后它可以取commit一个mutations 注意:我们也可以在组件中直接commit一个mutations Mutations:是唯一可以修改State的途径  其他…
首先下载三个包 babel-runtime对es语法进行转义 fastclick解决移动端点击300毫秒延迟的问题 babel-polyfill对es6 api进行转义 下载了包之后要在main.js中引入  注意babel-polyfill要引在最前面 在main.js中引入stylus文件夹下的index.styl文件 完成m-header组件 MHeader组件 <template> <div class="m-header"> <div class…
之前得到的歌手数据是用forEach遍历添加的  没有顺序性  我们希望得到的数据是title:"热门"的数据在最上面  title为字母的数据按字母从低到高顺序排列 var hot=[] var ret=[] for(let key in map){ let val=map[key] //在对象map中 键为key 对应的键值 if(val.title.match(\[a-zA-Z]\)){ ret.push(val) }else if(val.title==="热门&qu…
写在前面 没错,这就是慕课网上的那个vue音乐播放器,后台是某音乐播放器的线上接口扒取,虽然这类项目写的人很多,但不得不说这还是个少有的适合vue提升的好项目,做这个项目除了想写一个比较大并且功能复杂的项目,主要原因是要拿它来应对面试,也确实对我vue的业务能力有很全面的提升,也使我找工作更加得心应手 代码内容有区别于作者源码,因为作者编码习惯跟我有很大差别,或者说比我更高级,生搬硬套并没有太大的意义,如果有时间最好从头到尾都自己写,包括所有的样式,代码量比较大,我在业余时间去写大概一个月完成了…
了解better-scroll什么时候是需要refresh计算的??通常我们遇到的better-scroll不能滚动的问题的根源是什么??better-scroll的渲染原理是:根据初始化的时机  或者调用refresh()的时机的那个时候的scroll的父元素的高度和子元素的高度之差去做一个计算  计算出他可以滚动的位置  所以我们去实例化或者refresh这个scroll的时候  一定要保证  这个dom是已经渲染好的 我们能正确计算到高度的 如果我们有数据变化以及dom变化的场景的时候 …