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站) 前言:我们在做一些项目的时候需要做到实时变化, 比如我们有时候有需求会要求我们做一个类似于聊天室的页面 比如有些时候我们对某些东西进行点赞和刷票,需要 ...
随机推荐
- linux系统调用之进程控制
1 进程控制: fork 创建一 ...
- JS事件(三)部分常用事件
1.滚动条事件scroll EventUtil.addHandler(window,"scroll",function(event){ if(document.compatMode ...
- Vue(基础四)_总结五种父子组件之间的通信方式
一.前言 这篇文章主要总结了几种通信方式: 1.方式一:使用props: [ ]和$emit() (适用于单层通信) 2.方式二:$attrs和$listeners(适用于多层) 3.方式三:中央处 ...
- CodeForces12D 树状数组降维
http://codeforces.com/problemset/problem/12/D 题意 给N (N<=500000)个点,每个点有x,y,z ( 0<= x,y,z <=1 ...
- 关于SSM的小感悟
这周用SSM框架写了个小项目,真是各种百度啊,最后总算是实现了个登陆功能.刚才一直在修改,想实现登陆进去可以对id进行搜索,出现搜索的整体数据,无奈,一直没能实现.所以就只能留到下周了,到时候会把这个 ...
- JavaSE_坚持读源码_ArrayList对象_Java1.7
底层的数组对象 /** * The array buffer into which the elements of the ArrayList are stored. * The capacity o ...
- 使用yum源的方式单机部署MySQL8.0.13
使用yum源的方式单机部署MySQL8.0.13 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 基本上开源的软件都支持三种安装方式,即rmp方式安装,源码安装和二进制方式安装.在 ...
- MySQL内存占用计算
##MySQL 最大可使用内存( M ): SELECT ( @@key_buffer_size + @@innodb_buffer_pool_size + @@query_cache_size + ...
- Hadoop问题:There are 0 datanode(s) running and no node(s) are excluded in this operation.
问题描述: org.apache.hadoop.ipc.RemoteException(java.io.IOException): File /tmp/hadoop-yarn/staging/hado ...
- zookeeper下的基本操作
安装好zk之后 启动服务端:在bin目录下 zkServer.sh restart 启动客户端 zkCli.sh 检查是否启动 直接输入jps命令,显示下面则表示启动成功 [root@iZbp12gg ...