Vuejs---《Vue.js + Node.js-构建音乐播放器新玩法-video》
官方文档:http://vuejs.org/v2/guide/syntax.html
中文文档: https://cn.vuejs.org/v2/guide/syntax.html
兼容性
Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。Vue.js 支持所有兼容 ECMAScript 5 的浏览器。
以为没有处理兼容问题,代码量比较少,效率也高, 比较适合在微信使用。
jquery 大力提倡 dom操作,而 angula vue 这些都是抵制dom操作的,不建议有任何dom操作。
======里面讲到 路由设定,定义模板,常用方法
现在 web程序 都可以用js 写前后端了,node。js 就是运行在服务端的,不用写java代码 运行效率更高。
提到一个 JSOP viewer
// 定义组件
var Home = Vue.extend({
// template: '<img src="assets/img/home.png" alt="" width="100%">'
template: loadTemplate('home')
})
、、jsonp 跨域请求问题
var List = Vue.extend({
template: loadTemplate('list'),
data: function () {
// jsonp 取到api 提供的数据
this.$http.jsonp('http://localhost:2080/api/music')
.then(res => {
// console.log(res.data)
this.list = res.data
})
return {
list: []
}
},
methods: {
pad: pad,
convert: convertDuration
}
})
、
// 定义路由规则
// 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend
// 创建的组件构造函数,也可以是一个组件选项对象。
// 稍后我们会讲解嵌套路由
router.map({
'/home': {
name: 'home',
component: Home
},
'/songs': {
name: 'list',
component: List
},
'/songs/:id': {
name: 'item',
component: Item
}
}) // 任意其他地址跳转到home
router.redirect({ '*': '/home' })
router
var audio = new Audio() 播放
audio.src = this.item.music
audio.play()







Vuejs---《Vue.js + Node.js-构建音乐播放器新玩法-video》的更多相关文章
- 使用 原生js 制作插件 (javaScript音乐播放器)
1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 自定义css样式结合js控制audio做音乐播放器
最近工作需求需要播放预览一些音乐资源,所以自己写了个控制audio的音乐播放器. 实现的原理主要是通过js调整audio的对象属性及对象方法来进行控制: 1.通过play().pause()来控制音乐 ...
- 如何用vue打造一个移动端音乐播放器
写在前面 没错,这就是慕课网上的那个vue音乐播放器,后台是某音乐播放器的线上接口扒取,虽然这类项目写的人很多,但不得不说这还是个少有的适合vue提升的好项目,做这个项目除了想写一个比较大并且功能复杂 ...
- 基于vue的移动端web音乐播放器
声明 以下只是学习完慕课网huangyi老师实战视频课程的笔记内容,仅供个人参考学习使用.如果对Vue2.0实战高级-开发移动端音乐WebApp感兴趣的话,请移步这里:https://coding.i ...
- 原生JS实现音乐播放器!
前 言 最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的 ...
- JS实现音乐播放器
JS实现音乐播放器 前 言 最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...
- vue音乐播放器
利用vue写一个简单的音乐播放器,包括功能有歌曲搜索.歌曲播放.歌曲封面.歌曲评论.播放动画.mv播放六个功能. <template> <div class="wrap&q ...
- 10个免费开源的JS音乐播放器插件
点这里 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些 网页播放器 插件比较少见,所以这里为大家整理一个集合,也许会有用到的时候. 下面整理的播放器有些是支持自适应的, ...
- socket应用(vue、node.js、M站)
socket应用(vue.node.js.M站) 前言:我们在做一些项目的时候需要做到实时变化, 比如我们有时候有需求会要求我们做一个类似于聊天室的页面 比如有些时候我们对某些东西进行点赞和刷票,需要 ...
随机推荐
- 第三十五节,目标检测之YOLO算法详解
Redmon, J., Divvala, S., Girshick, R., Farhadi, A.: You only look once: Unified, real-time object de ...
- 认识EasyUI——DataGrid的onClickRow事件
关键代码: $("#dg2").datagrid({ onClickRow: function (index, row) { //easyui封装好的时间(被单机行的索引,被单击行 ...
- JS事件(三)部分常用事件
1.滚动条事件scroll EventUtil.addHandler(window,"scroll",function(event){ if(document.compatMode ...
- Unity 物体移动的理解
Unity通过内置的Input类获取外部输入,具体查看: Editor---Project Setting---Input,常见的输入比如:Vertical.Horizontal.Fire1.Jump ...
- 11款插件让你的Chrome成为全世界最好用的浏览器|Chrome插件推荐
文章来源:知乎 收录于:风云社区(SCOEE)[提供mac软件下载] 更多专题,可关注小编[磨人的小妖精],查看我的文章,也可上[风云社区 SCOEE],查找和下载相关软件资源. (一)综合类: 新买 ...
- 《玩转Django2.0》读书笔记-编写URL规则
<玩转Django2.0>读书笔记-编写URL规则 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. URL(Uniform Resource Locator,统一资源定位 ...
- WebAPI性能优化之压缩解压
有时候为了提升WebAPI的性能,减少响应时间,我们会使用压缩和解压,而现在大多数客户端浏览器都提供了内置的解压支持.在WebAPI请求的资源越大时,使用压缩对性能提升的效果越明显,而当请求的资源很小 ...
- Swagger入门
新手入门Swagger看了很多博客,竟然没有一个是步骤齐全的或直接能运行的.于是CSDN下载了SSM+Swagger整合的demo,一顿瞎整,终于可以运行了. 不容易,因此分享这篇博客,祝新手朋友们早 ...
- ACM-ICPC 2018 焦作赛区网络预赛 J Participate in E-sports(大数开方)
https://nanti.jisuanke.com/t/31719 题意 让你分别判断n或(n-1)*n/2是否是完全平方数 分析 二分高精度开根裸题呀.经典题:bzoj1213 用java套个板子 ...
- lucene相关
lucene相关: 应用领域: 互联网全文检索引擎(比如百度, 谷歌, 必应) 站内全文检索引擎(淘宝, 京东搜索功能) 优化数据库查询(因为数据库中使用like关键字是全表扫描也就是顺序扫描算法 ...