1、eslintrc.js中添加符合编辑器的规则，参照这里

2、在build/webpack.base.conf.js中找到resolve设置别名，方便在引用路径的时候使用

3、安装依赖：babel-runtime（转移es6语法），fastclick（消除移动端300ms点击延迟），babel-polyfill（可以用es6的api）

4、npm install jsonp再封装成promise形式，其中用到了URI编码函数decodeURIComponent

import originJsonp from 'jsonp'export default function jsonp(url, data, option) {url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)return new Promise((resolve, reject) => {originJsonp(url, option, (err, data) => {if (!err) {resolve(data)} else {reject(err)}})})
}export function param(data) {let url = ''for (var k in data) {let value = data[k] !== undefined ? data[k] : ''url += '&' + k + '=' + encodeURIComponent(value)}return url ? url.substring(1) : ''
}

encodeURIComponent和encodeURI的区别

var uri="http://www.jxbh.cn/illegal value.htm#start";alert(encodeURI (uri)):
//”http: //www.jxbh.cn/illegal%20value .htm#s tart”alert( encodaURIComponent (uri));
//”http% 3A%2F%2Fwww.jxbh.cn%2 Fillegal%2 0value. htm%23 start”

一个Promise的例子

var getDate = function (a, b) {return new Promise(function (resolve, reject) {var sum = a + bif (true) {resolve(sum)} else {reject(sum)}})
}getDate(1, 1).then(function (data) {console.log(data);return getDate(3, 3)}).then(function (data) {console.log(data);return getDate(5, 5)}).then(function (data) {console.log(data);})

5、将公用的配置写进配置文件，再以模块的形式导出来用

6、使用了Object.assign()合并操作，使用new Set和Array.form实现去重

Object.assign也可以实现复制

let obj = {name: '二月', age: {c: 12}}
let o2 = Object.assign({}, obj, {sex:'男'})
console.log(o2)
//{ name: '二月', age: { c: 12 }, sex: '男' }

var arr = [1,2,2,3,4] // 需要去重的数组var set = new Set(arr) // {1,2,3,4}
var newArr = Array.from(set) // 再把set转变成arrayconsole.log(newArr) // [1,2,3,4]

7、保证dom成功渲染，一般加个延时

        mounted(){this.$nextTick(function () {//})setTimeout(function () {//},20)}

设置为20ms为经验值，一般浏览器的刷新频率是17ms

8、ref的使用


//html
<div ref="box" class="div1 div2">//jsmounted(){console.log(this.$refs.box.className);},
//div1 div2

9、Slider组件开发

基于better-scroll开发一个slider组件

动态添加dom

export function hasClass(el, className) {let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')return reg.test(el.className)
}export function addClass(el, className) {if (hasClass(el, className)) {return}let newClass = el.className.split(' ')newClass.push(className)el.className = newClass.join(' ')
}export function getData(el, name, val) {const prefix = 'data-'if (val) {return el.setAttribute(prefix + name, val)}return el.getAttribute(prefix + name)
}let elementStyle = document.createElement('div').stylelet vendor = (() => {let transformNames = {webkit: 'webkitTransform',Moz: 'MozTransform',O: 'OTransform',ms: 'msTransform',standard: 'transform'}for (let key in transformNames) {if (elementStyle[transformNames[key]] !== undefined) {return key}}return false
})()export function prefixStyle(style) {if (vendor === false) {return false}if (vendor === 'standard') {return style}return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}

10、开发scroll组件

也是基于better-scroll开发的，用于滚动列表，后面用cube-ui库替换

11、使用vue-lazyload来进行图片懒加载

12、fastclick和better-scroll的click冲突，使用fastclick和class="needsclick"属性解决

13、封装获取数据函数的技巧（get,set）

如果只传两个参数就是get数值，如果传三个参数，就是set数值。

export function getData(el, name, val) {const prefix = 'data-'if (val) {return el.setAttribute(prefix + name, val)}return el.getAttribute(prefix + name)
}

14、position:relation使用

设置height:100%时是相对父元素的高度来计算的，并不脱离标准文档流

position:absolution脱离标准文档流

15、巧妙运用Math.min(a,b)

a是一个固定值假如设置为10，b是从0开始变大的变化值，意思是上限就是10，超过10就取10，没超过10就取b的值

16、在进度条中的一个技巧：不能小于0，不能大于进度条长度

        const offsetWidth = Math.min(this.$refs.progressBar.clientWidth - progressBtnWidth, Math.max(0, this.touch.left + deltaX))

17、歌词插件lyric-parser

18、sessionStorage和localStorage库good-storage

回顾笔记

1、recommend.vue知识点

img标签可以使用@load来监听图片是否加在完。

布局采用的是百分比布局+flex，头部引用header组件，内容部分则采用position:fixed，top:60px，width如果不写则默认100%。

2、scroll组件中，利用better-scroll封装成基础组件，其中probeType设置为3会在滑动过程中监听scroll变化，是否设置为3看业务需求

3、@click.native当给自定义组件添加点击事件时，必须加上.native

4、vue中@touchstart.stop.prevent 中target属性，返回DOM树最顶层元素。也就是点击的哪个返回哪个

【笔记】vue实现音乐播放器相关推荐

vue引入音乐播放器插件
欢迎大家进群,一起探讨学习微信公众号,每天给大家提供技术干货博主技术笔记博主网站地址1 博主网站地址2 博主开源微服架构前后端分离技术博客项目源码地址,欢迎各位star vue引入音乐播放器插件 ...
JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库本源码技术栈 ...
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档 java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S ...
java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署 ...
Vue 自定义音乐播放器组件为H5添加背景音乐
自定义音乐播放器组件为H5添加背景音乐: 1.创建music.vue组件 <template><div><div @click="changeOn" ...
vue相关音乐播放器
1.初始化vue,vue-cli,webpack: $ vue init webpack vue-music ? Project name (vue-music) ? Project descript ...
Java和vue实现音乐播放器_vue实现的网易云音乐在线播放和下载功能案例
本文实例讲述了vue实现的网易云音乐在线播放和下载功能.分享给大家供大家参考,具体如下: 效果如图: 完整代码: Document html, body { height: 100%; padding ...
vue实现音乐播放器
通过vue与原生js实现音乐播放器下面是需要的网址 1.歌曲搜索接口请求地址:https://autumnfish.cn/search 请求方法:get 请求参数:keyw ...
基于VUE的音乐播放器
文章目录前言一.功能分解 1.布局 2.JS功能实现二.例程下载 1.引入库 2.读入数据总结前言 html音乐播放器练习小例子 1.调用网易云的api查询歌曲信息,api不是官方的,而是g ...
Java和vue实现音乐播放器_躁！DJ 风格 Java 桌面音乐播放器
本文适合有 Java 基础知识的人群,跟着本文可学习和运行 Java 版桌面 DJ 音乐播放器. 本文作者:HelloGitHub-秦人 HelloGitHub 推出的<讲解开源项目>系列 ...

【笔记】vue实现音乐播放器

回顾笔记

【笔记】vue实现音乐播放器相关推荐

最新文章

热门文章