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站) 前言:我们在做一些项目的时候需要做到实时变化, 比如我们有时候有需求会要求我们做一个类似于聊天室的页面 比如有些时候我们对某些东西进行点赞和刷票,需要 ...
随机推荐
- 动态代理之: com.sun.proxy.$Proxy0 cannot be cast to 问题
转: 动态代理之: com.sun.proxy.$Proxy0 cannot be cast to 问题 2018年05月13日 00:40:32 codingCoge 阅读数:1211 版权声明 ...
- 对C# .Net4.5异步机制测试(二)——加深印象
public static void Main() { Console.WriteLine(Thread.CurrentThread.ManagedThreadId); In(); Console.W ...
- layer.open窗口自适应问题
宽高度 area : ['100%', '100%']同时取消layer.full(index)就能自适应
- JS重点整理之JS原型链彻底搞清楚
对象 要清楚原型链,首先要弄清楚对象: 普通对象 最普通的对象:有__proto__属性(指向其原型链),没有prototype属性. 原型对象(person.prototype 原型对象还有cons ...
- appium 切换native/ webview,findby,还有页面元素定位一直小于0的问题的解决
之前一直有个bug没有解决. 今天,终于解决了. 疑问过程: app是混合应用,项目做了H5优化之后,以前的用例执行总会失败,体现在原来的一个元素点击无反馈 排查原因:1.项目做了H5优化,2.测试的 ...
- vue(基础一)_基本指令的使用
一.前言 1.基本骨架 2.插值表达式{{ }} 3.vue起的作用,在开发中充当的角色MVC ...
- 2018 CCPC-FINAL 后记
赛前认为这将会是我生涯最接近铁牌的一场比赛,遗憾的是没有抓住机会,又打了个铜出来. 6题可做题,去掉签到4道数学题可把我无聊坏了,幸好主办方出了个算法题给我自娱自乐了几个小时. Day1热身赛,贪心, ...
- Java面试题全集(上)转载
Java面试题全集(上) 2013年年底的时候,我看到了网上流传的一个叫做<Java面试题大全>的东西,认真的阅读了以后发现里面的很多题目是重复且没有价值的题目,还有不少的参考答案也是 ...
- eclipse设置是否自动跳转切换到debug视图模式
之前一直用公司二次封装的eclipse,这几天用原生态的eclipse,刚开始使用eclipse进行调试时,会自动跳转到debug视图.后来不小心关闭了,就不会自动切换到debug视图. 这个小问题之 ...
- 关于Mysql的高级查询的操作
前言:作为一名后端的程序员操作数据库的能力是我们基本的技能,而连表查询是我们的这个技能的关键点所在.注意这里顾明思义是对数据的查询的操作 (一).联合查询(关键字union/union all) 什么 ...