vue组件化学习第三天
学习制作自定义组件
实例music.vue
1:首先在components文件中新建文件夹music
2:在文件music中创建music.vue,index.js,两者路径在同一级
3:index.js代码如下
1 import Mymusic from './Music.vue' 2 // 这里是重点 3 const Music = { 4 install: function(Vue){ 5 Vue.component('Music',Mymusic) 6 } 7 } 8 9 // 导出组件 10 export default Music
4:music.vue内容如下
1 <template> 2 <div class="music-box" :class="musicShow?'music-box-active':''"> 3 <div class="music-title">{{song.name}}</div> 4 <div class="music-paly"> 5 <audio id="audio"> 6 <source :src="song.src" type="audio/ogg"> 7 <source :src="song.src" type="audio/mpeg"> 8 <source :src="song.src" type="audio/mp3"> 9 您的浏览器不支持 audio 元素。 10 </audio> 11 </div> 12 <div class="play-btn-pre" @click="preBtn"> 13 <i class="el-icon-arrow-up"></i> 14 </div> 15 <div class="play-btn" @click="play" :class="musicPlay?'music-play-active':''"> 16 <i class="el-icon-service"></i> 17 </div> 18 <div class="play-btn-next" @click="nextBtn"> 19 <i class="el-icon-arrow-down"></i> 20 </div> 21 <div class="music-btn" @click="showMusic" v-if="!musicShow"> 22 <i class="el-icon-d-arrow-left"></i> 23 </div> 24 </div> 25 26 </template> 27 28 <script type="ecmascript-6"> 29 export default { 30 name: 'Music', 31 data () { 32 return { 33 musicShow:false, 34 musicPlay:false, 35 // 当前播放列表的下标 36 index:0, 37 musicList:[ 38 { 39 name:"爱情转移", 40 src:"http://dl.stream.qqmusic.qq.com/C400003kCfyN2zp9AW.m4a?vkey=822935FCBC674ECFEE37F0331063A1A1CE1553BC008F1186291F8D5BD0C9F026159CE505C2B86842B1A9FF7B29F5F6A006751DACA129E296&guid=78583330&uin=0&fromtag=66" 41 }, 42 { 43 name:"Pacific Rim Uprising", 44 src:"http://dl.stream.qqmusic.qq.com/C400003Pegq61qghYH.m4a?vkey=D3BDF769F8308AEF6A96AFC4F38BBC996C0F6EFF24A74BCDA5C9B2DBA8C8A6841BED2270216154AD0FB760131DD329CA91B2754EA818E302&guid=78583330&uin=0&fromtag=66" 45 } 46 ], 47 song:{ 48 name:"爱情转移", 49 src:"http://dl.stream.qqmusic.qq.com/C400003kCfyN2zp9AW.m4a?vkey=822935FCBC674ECFEE37F0331063A1A1CE1553BC008F1186291F8D5BD0C9F026159CE505C2B86842B1A9FF7B29F5F6A006751DACA129E296&guid=78583330&uin=0&fromtag=66" 50 } 51 } 52 }, 53 watch:{ 54 musicPlay:function(){ 55 console.log(this.musicPlay) 56 } 57 }, 58 methods: { 59 showMusic:function(){ 60 // 弹开播放器 61 var _this=this; 62 this.musicShow=true; 63 setTimeout(function(){ 64 _this.musicShow=false 65 },10000) 66 }, 67 play:function(){ 68 if (this.musicPlay) { 69 document.getElementById('audio').pause(); 70 }else{ 71 document.getElementById('audio').play(); 72 } 73 this.musicPlay=!this.musicPlay; 74 75 }, 76 nextBtn:function(){ 77 // 如果已经到最后一首了 78 if (this.index+1==this.musicList.length) { 79 this.index=0; 80 }else{ 81 this.index++; 82 } 83 // this.musicPlay=!this.musicPlay; 84 // 关闭上一首音乐播放 85 // document.getElementById('audio').pause(); 86 // 替换音乐单子 87 this.song=this.musicList[this.index]; 88 // 打开音乐播放器 89 // document.getElementById('audio').play(); 90 }, 91 preBtn:function(){ 92 // 如果已经到了第一首 93 94 } 95 } 96 } 97 </script> 98 99 <style rel="stylesheet"> 100 .music-box{width:40px;background:rgba(0,0,0,.6);z-index:99;color:white;border-radius:10px;transition:transform .2s linear;transform:translate(0,0);position:relative;top:35%;left:99%;} 101 .music-box .play-btn-pre i,.music-box .play-btn-next i,.play-btn i{font-size:30px} 102 .music-box .play-btn-pre,.music-box .play-btn-next,.play-btn{margin:10px 5px;} 103 .music-btn{width:40px;height:40px;font-size:30px;position:absolute;bottom:0;left:-30px;animation:move 1s linear infinite;} 104 .music-box-active{transform:translate(-36px,0)} 105 .music-play-active{animation:move1 1s linear infinite;} 106 @keyframes move{ 107 0% {left:-30px;} 108 25% {left:-35px;} 109 50% {left:-30px;} 110 75% {left:-25px;} 111 100% {left:-30px;} 112 } 113 @keyframes move1{ 114 0% {transform:rotateZ(0);} 115 100% {transform: rotateZ(360deg);} 116 } 117 </style>
5:模块引入自定义组件
在main.js引入即可,全局使用
1 import Music from './components/Music
2 Vue.use(Music)
转载于:https://www.cnblogs.com/bluesky1024/p/8630476.html
vue组件化学习第三天相关推荐
- 三、Vue组件化开发学习笔记——组件化的基本步骤、全局组件和局部组件、父组件和子组件、注册组件的语法糖、模板分离写法、组件的数据存放
一.什么是组件化? 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题 ...
- vue学习-v-if v-for优先级、data、key、diff算法、vue组件化、vue设计原则、组件模板只有一个根元素、MVC.MVP,MVVM
1:v-if和v-for哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能? //在vue页面中 同时使用v-for与v-if后,打印渲染函数. console.log(app.$optio ...
- Vue第三天 v-model与Vue组件化
Vue第三天 v-model与Vue组件化 数据的双向绑定 v-model的使用 v-model的基本使用 Vue中使用v-model指令来实现表单元素和数据的双向绑定. <div id=&qu ...
- Vue组件化,你学废了吗
什么叫Vue组件化 组件化,是Vue的一种重要思想.即把一个应用拆分成一个个独立可复用的小组件,最终可组成一个组件树. 就像你搭积木一样,假如你这次想搭一个小屋,你就可以把它们拆成小块,一块一块的搭建 ...
- Vue013_ vue组件化编码
vue 组件化编码 2.1. 使用 vue-cli 创建模板项目 2.1.1. 说明 1) vue-cli 是 vue 官方提供的脚手架工具 2) github: https://github ...
- vue组件化通信之兄弟组件传值
vue组件化通信之父向子传值 vue组件化通信之子向父传值 在vue中兄弟节点传值一般有两种方法:$parent和 $root, 建议使用前者 使用$parent **parent.vue** < ...
- vue组件化通信之子向父传值
vue组件化通信之子向父传值 vue组件化通信之兄弟组件传值 vue中子向父传递消息一般使用$emit,方法比较简单,直接看代码 父组件 <template><div>< ...
- vue组件化通信之父向子传值
vue组件化通信之子向父传值 vue组件化通信之兄弟组件传值 父向子组件传值 常用的方法主要有三种:props.$refs.$children 建议使用前两种 使用props进行传值 parent.v ...
- [vue][面试]谈一谈对vue组件化的理解?
谈一谈对vue组件化的理解? 思路:组件化定义,优点,使用场景和注意事项等方面展开陈述,同时要强调vue中组件化的一些特点. #####源码分析1:组件定义 源码位置:src/core/global- ...
最新文章
- android开发模式,Android开发中无处不在的设计模式
- 2019CCPC网络选拔赛签到题题解
- socket编程中的异常处理
- 04 | 负载均衡:Ribbon 如何保证微服务的高可用
- Spring @Configuration – RabbitMQ连接
- Java Mybatis
- oracle asm 分布式存储,分布式数据中心数据库和存储部署解决方案
- 关于IE6下用Jquery attr('onclick')问题
- 【译】使用Java编写Oracle Tuxedo应用
- Ponemon Institute告诉你,大数据正在勾搭网络安全
- 如何用Mac 自带的 Automator 进行图片格式转换?
- 模式识别经典算法——LDA
- 软考-内存按字节编址,求地址间的存储单元数量(容量)以及芯片个数。
- Tplink路由器配置页面IP地址_tplogin.cn页面IP地址_TpLink易展版LAN口地址获取_如何获得tplogin.cn的IP地址_获取易展版TPLinkWIFI6路由器的配置地址方法
- 奇迹mu开服教程:开服服务端的架设及服务器推荐需要那些东西
- 微型计算机中backspace键是什么键,backspace是哪个键?最实用按键的大揭秘
- 微信小程序 数组 Json 导出到excel
- DFX:面向产品生命周期的设计
- PDF Tools - PDF增强工具
- 关于加快INSERT语句执行速度和 HINT /*+ append*/及nologging的使用
热门文章
- python3 装饰器_Python3 装饰器
- java的drawstring_java-Graphics.drawString()未绘制
- mysql memcached 使用场景_memcache的应用场景?
- 服务器有操作系统吗,云服务器有操作系统吗
- 多级联动下拉菜单插件:jquery.cxselect.js
- 【机器学习】集成学习与模型融合方法举例
- 【Java Web开发指南】有状态会话Bean(SLSB) 和无状态会话Bean(SFSB)的区别
- 机器学习(MACHINE LEARNING) 【周志华版-”西瓜书“-笔记】 DAY15-规则学习
- 解决Tensorflow 使用时cpu编译不支持警告
- Imagenet VGG-19网络加载和特征可视化