您现在的位置是：网站首页> 编程资料编程资料

用Vue.js开发网页时钟_vue.js_

2023-05-24 541人已围观

简介用Vue.js开发网页时钟_vue.js_

本文实例为大家分享了Vue.js开发网页时钟的具体代码，供大家参考，具体内容如下

本次实例的重点是父子通信，这也是学习Vue.js的重点部分和难点部分，能掌握好父子通信是对后期的Vue学习是一个很大的帮助，而且如果不跨过这个难点部分，是无法进行后期的学习的。
父子通信很好用，但是很难理解而且写着写着还很容易出现错误

父子通信的重点知识

1、子组件通过props属性监听从父组件中传过来的值（值）
2、子组件通过$emit('方法名‘)来向父组件发出请求（方法）
3、学习vue必须要知道属性只要绑定好后就是动态的模式（我个人理解），就只需要接收和请求就行了，不需要做其他的监听操作

话不多说，上代码

一、页面部分

1、创建模板
2、通过父子通信来对子组件的部分属性进行监听

          Time     //采用外部连接的格式      {{o_style.value}}
          
 //模板部分 //这里是vue.js包的导入 //采用外部连接的格式 //采用外部连接的格式

二、CSS部分

*{     margin:0px;     padding:0px; } body{     display: flex;     justify-content: center;     align-items: center;     align-content: center;     background:skyblue;     overflow: hidden; } #content{     position:relative;     width:100%;     height:100vh;     display:flex ;     justify-content: center;     align-content: center;     align-items: center; } .root{     width:500px;     height:500px;     border-radius: 50%;     border:2px solid grey;     position:relative;     top:50px;     background: url("../img/day.jpg") -170px;     background-size:cover;     overflow: hidden;     box-shadow: 0px 0px 15px gray; } .root>span,.root>div{     position:absolute;     font-size:20px;/*内部的每一个文字的大小*/ } span:first-child{     left:240px;/*十二这个数字的x偏移量=（500/2）-（20/2)*/     top:10px;     z-index:10; } span:nth-child(2){     left:480px;/*3的x偏移量=（500-10)*/     top:240px;/*(500/2)-(20/2)*/     z-index:10; } span:nth-child(3){     left:250px;/*6*/     top:470px;     z-index:10; } span:nth-child(4){     left:10px;/*9*/     top:240px;     z-index:10; } span:nth-child(5){/*时钟中间的骨架*/     left:225px;/*(500/2)-(50/2)*/     top:225px;/*(500/2)-(50/2)*/     display: inline-block;     width:50px;     height:50px;     line-height:50px;     text-align: center;     font-weight:bolder;     border-radius: 50%;     background:cadetblue;     box-shadow: 0px 0px 18px #5f9ea0,inset 0px 0px 10px #4faee0;     z-index:12; } #hour{     width:20px;     height:120px;     border-radius:12px;     background:white;     top:136px;     left:242px;     opacity:88%;     box-shadow: 0 0 18px whitesmoke;     z-index:11; } #minute{     width:15px;     height:160px;     border-radius:12px;     background:dodgerblue;     top:90px;     left:243px;     opacity: 0.85;     box-shadow: 0 0 18px deepskyblue;     z-index:11; } #second{     width:10px;     height:200px;     border-radius:12px;     background:gray;     top:50px;     left:250px;     opacity:0.8;     box-shadow: 0 0 18px snow;     z-index:11; } #show_time{     width:100px;     height:50px;     background:black;     opacity:0.6;     left:200px;     top:300px;     color:white;     text-align: center;     line-height:50px;     z-index:10; } #over{     position:absolute;     width:100%;     height:100vh;     color:white;     background:black;     opacity: 0.8;     transition:1s;     z-index:10; }

三、JS部分（重点部分）

父子通信

/**子组件  * 子组件的时针、分针、秒针都是通过父组件传过来的值来设置它的偏移量  */ let clock={     template:'#time_template',     data(){         return{             interval:'',//定时器对象         }     },     props:{//监听从父组件中传过来的对象         cur_time: '',         com_s:{},         hour_s:{},         minute_s:{},         second_s:{},     },     methods:{             display(){                 this.interval=setInterval((e)=>{                     this.setHours();                     this.setMinutes();                     this.setSeconds();                 },1000);             },             setHours(){                 this.$emit('get_hour');             },             setMinutes(){                 this.$emit('get_minute');             },             setSeconds(){                 this.$emit('get_second');             },     },     created(){//让方法在一开始就自动调用，一般适用于有定时器的方法         this.display();     } }; /**  * 父组件  */ let fatherComponent=new Vue({     el:'#content',     data:{         date:new Date(),         current_time:{//表示当前时间的对象             hour:'',             minute:'',             second:'',         },         //需要传给子组件的对象         hour_style: {},         minute_style:{},         second_style:{},         //页面样式的初始化属性         o_style:{            left:'97%',             isNight:false,//监听是白天还是黑夜，默认是白天             value:'N-M',         },     },     //通过子组件向父组件发起请求的方法     methods:{         getHours(){             this.date=new Date();             this.current_time.hour=this.date.getHours()>=10?this.date.getHours():'0'+this.date.getHours();             let hour=this.date.getHours()%12+(this.date.getMinutes()+(this.date.getSeconds()/60)/60);             this.hour_style={                 transformOrigin:'bottom center',                 transform:'rotate('+this.date.getHours()*30+'deg)',             }         },         getMinutes(){             this.date=new Date();             this.current_time.minute=this.date.getMinutes()>=10?this.date.getMinutes():'0'+this.date.getMinutes();             let m=this.date.getMinutes();             this.minute_style={                 transformOrigin:'bottom center',                 transform:'rotate('+(m*6)+'deg)',//分为六十等分，每份为一分钟             }         },         getSeconds(){             this.date=new Date();             this.current_time.second=this.date.getSeconds()>=10?this.date.getSeconds():'0'+this.date.getSeconds();             this.second_style={                 transformOrigin:'bottom center',                 transform:'rotate('+this.date.getSeconds()*6+'deg)',//将圆分为六十份，每份为一秒钟。             }         },         //对页面对象的属性进行修改         show(){             if(this.o_style.isNight){                 this.o_style.left='97%';                 this.o_style.isNight=false;                 this.o_style.value='N-M'             }else{                 this.o_style.left='0%';                 this.o_style.isNight=true;                 this.o_style.value='D-M'             }         }     },     //在父组件内声明子组件，这是必须的     components:{         clock     } });