php

php

php相关问题
html+css

html+css

JavaScript

JavaScript

js,jquery,vue.js等
Linux

Linux

Linux操作系统
Mysql

Mysql

各种资源

各种资源

开发工具,手册等
就业指导

就业指导

UI设计

UI设计

教学视频分享

教学视频分享

【vue】computed,methods,watch的区别

王老师 发表了文章 • 8 个评论 • 1586 次浏览 • 2019-09-18 10:37 • 来自相关话题

1.computed和methods
共同点: computed能实现的methods也能实现
不同点:computed是基于它的依赖进行缓存的。computed只有在它的相关依赖发生变化才会重新计算求值。 而只要它的相关依赖没有发生变化,多次访问会立即返回之前的计算结果,而不必再次执行计算。相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。也就是说当我们不希望有缓存,用方法来替代。
2.watch和computed
共同点:都是以Vue的依赖追踪机制为基础的,都是希望在依赖数据发生改变的时候,被依赖的数据根据预先定义好的函数,发生“自动”的变化。
不同点:
a. watch擅长处理的场景:一个数据影响多个数据;computed擅长处理的场景:一个数据受多个数据影响。虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器,当需要在数据变化时执行异步或开销较大的操作时,通过侦听器最有用。vm.$watch === watch
b. computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM;
watch监听的是你定义的变量,当你定义的变量的值发生变化时,调用对应的方法。
 
<div>{{Name}}</div>

data(){
return {
num:0,
lastname:'',
firstname:'',
}
}

//当num的值发生变化时,就会调用num的方法,方法里面的形参对应的是num的新值和旧值
watch:{
num:function(val,oldval){
console.log(val,oldval);
}
},

//计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。
computed:{
Name:function(){
return this.firstname+this.lastname;
}
} 查看全部
1.computed和methods
共同点: computed能实现的methods也能实现
不同点:computed是基于它的依赖进行缓存的。computed只有在它的相关依赖发生变化才会重新计算求值。 而只要它的相关依赖没有发生变化,多次访问会立即返回之前的计算结果,而不必再次执行计算。相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。也就是说当我们不希望有缓存,用方法来替代。
2.watch和computed
共同点:都是以Vue的依赖追踪机制为基础的,都是希望在依赖数据发生改变的时候,被依赖的数据根据预先定义好的函数,发生“自动”的变化。
不同点:
a. watch擅长处理的场景:一个数据影响多个数据;computed擅长处理的场景:一个数据受多个数据影响。虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器,当需要在数据变化时执行异步或开销较大的操作时,通过侦听器最有用。vm.$watch === watch
b. computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM;
watch监听的是你定义的变量,当你定义的变量的值发生变化时,调用对应的方法。
 
<div>{{Name}}</div>

data(){
return {
num:0,
lastname:'',
firstname:'',
}
}

//当num的值发生变化时,就会调用num的方法,方法里面的形参对应的是num的新值和旧值
watch:{
num:function(val,oldval){
console.log(val,oldval);
}
},

//计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。
computed:{
Name:function(){
return this.firstname+this.lastname;
}
}

打造自己的音乐播放器1 —— 播放页布局

王老师 发表了文章 • 0 个评论 • 1757 次浏览 • 2019-07-12 14:22 • 来自相关话题

在这个系列的文章中,我们将一步一步仿照网易云音乐APP的歌曲播放页来制作一个简单的音乐播放器,此篇文章及后续文章将会涉及到的知识点有:audio(音频播放标签)及其属性和事件方法、利用javascript来进行歌词匹配,音频可视化等。





 
以下是播放页的html结构代码:
<div class="player">
<div class="player-bg"></div>
<div class="player-main">
<div class="player-header">
<h3>我的一个道姑朋友</h3>
<span>双笙</span>
</div>
<div class="player-content">
<div class="cover">
<img src="cover/1.jpg">
</div>
<div class="lyrics"></div>
</div>
<div class="player-footer">
<div class="time-info">
<div class="start-time">00:00</div>
<div class="end-time">04:15</div>
<div class="time-process">
<div class="process-bar">
<div class="current">
<div class="point"></div>
</div>
</div>
</div>
</div>
<div class="control">
<a href="javascript:;" class="prev"><img src="img/prev.png"></a>
<a href="javascript:;" class="play"><img src="img/pause.png"></a>
<a href="javascript:;" class="next"><img src="img/next.png"></a>
</div>
</div>
</div>
</div>以下是播放页的css代码:
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
.player{
height: 100%;
}
.player-bg{
position: relative;
height: 100%;
background: rgba(255,255,255, 0.3) url(cover/1.jpg) no-repeat top center;
background-size: 200%;
filter: blur(40px);
}
.player-main{
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
height: 100%;
width: 100%;
}
.player-header{
width: 100%;
padding: 10px;
letter-spacing: 1px;
}
.player-header h3{
color: white;
font-weight: 100;
}
.player-header span{
color: #AFB1B1;
font-size: 16px;
}
.player-content{
height: 70%;
position: relative;
}
.player-content .cover{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 50px solid black;
border-radius: 50%;
overflow: hidden;
}
.player-content .cover img{
width: 100%;
animation: rotation 10s linear infinite ;
}
@keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

.player-footer{
position: fixed;
left: 0;
bottom: 20px;
width: 100%;
}
.player-footer img{
width: 40px;
height: 40px;
display: inline-block;
}
.time-info{
padding: 0 20px 20px;
overflow: hidden;
color: #B6BDBC;
}
.start-time{
width: 60px;
float: left;
text-align: center;
}
.end-time{
width: 60px;
float: right;
text-align: center;
}
.time-process{
margin: 0 60px;
position: relative;
}
.process-bar{
position: absolute;
top: 10px;
width: 100%;
border-top: 1px solid #B6BDBC;
}
.current{
width: 0;
border-bottom: 1px solid white;
}
.point{
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
cursor: pointer;
position: absolute;
top: -5px;
}
.control{
margin-top: 10px;
text-align: center;
}
.control a{
margin: 0 15px;
}
.control img{
vertical-align: middle;
}
.control .play img{
width: 64px;
height: 64px;
}
在后面的文章中,我们将会对现有的html和css代码进行增加和修改,以次来添加后续功能。
下篇预告:打造自己的音乐播放器2 —— 让歌曲播放和暂停、歌曲进度条增长、切换歌曲
  查看全部
在这个系列的文章中,我们将一步一步仿照网易云音乐APP的歌曲播放页来制作一个简单的音乐播放器,此篇文章及后续文章将会涉及到的知识点有:audio(音频播放标签)及其属性和事件方法、利用javascript来进行歌词匹配,音频可视化等。

1.png

 
以下是播放页的html结构代码:
<div class="player">
<div class="player-bg"></div>
<div class="player-main">
<div class="player-header">
<h3>我的一个道姑朋友</h3>
<span>双笙</span>
</div>
<div class="player-content">
<div class="cover">
<img src="cover/1.jpg">
</div>
<div class="lyrics"></div>
</div>
<div class="player-footer">
<div class="time-info">
<div class="start-time">00:00</div>
<div class="end-time">04:15</div>
<div class="time-process">
<div class="process-bar">
<div class="current">
<div class="point"></div>
</div>
</div>
</div>
</div>
<div class="control">
<a href="javascript:;" class="prev"><img src="img/prev.png"></a>
<a href="javascript:;" class="play"><img src="img/pause.png"></a>
<a href="javascript:;" class="next"><img src="img/next.png"></a>
</div>
</div>
</div>
</div>
以下是播放页的css代码:
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
.player{
height: 100%;
}
.player-bg{
position: relative;
height: 100%;
background: rgba(255,255,255, 0.3) url(cover/1.jpg) no-repeat top center;
background-size: 200%;
filter: blur(40px);
}
.player-main{
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
height: 100%;
width: 100%;
}
.player-header{
width: 100%;
padding: 10px;
letter-spacing: 1px;
}
.player-header h3{
color: white;
font-weight: 100;
}
.player-header span{
color: #AFB1B1;
font-size: 16px;
}
.player-content{
height: 70%;
position: relative;
}
.player-content .cover{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 50px solid black;
border-radius: 50%;
overflow: hidden;
}
.player-content .cover img{
width: 100%;
animation: rotation 10s linear infinite ;
}
@keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

.player-footer{
position: fixed;
left: 0;
bottom: 20px;
width: 100%;
}
.player-footer img{
width: 40px;
height: 40px;
display: inline-block;
}
.time-info{
padding: 0 20px 20px;
overflow: hidden;
color: #B6BDBC;
}
.start-time{
width: 60px;
float: left;
text-align: center;
}
.end-time{
width: 60px;
float: right;
text-align: center;
}
.time-process{
margin: 0 60px;
position: relative;
}
.process-bar{
position: absolute;
top: 10px;
width: 100%;
border-top: 1px solid #B6BDBC;
}
.current{
width: 0;
border-bottom: 1px solid white;
}
.point{
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
cursor: pointer;
position: absolute;
top: -5px;
}
.control{
margin-top: 10px;
text-align: center;
}
.control a{
margin: 0 15px;
}
.control img{
vertical-align: middle;
}
.control .play img{
width: 64px;
height: 64px;
}

在后面的文章中,我们将会对现有的html和css代码进行增加和修改,以次来添加后续功能。
下篇预告:打造自己的音乐播放器2 —— 让歌曲播放和暂停、歌曲进度条增长、切换歌曲