使用vue自定义组件以及动态时间

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    
    <body>
        <script src="js/Vue.js"></script>
<div id="app">
    
    <incbutton></incbutton>
</div>
<div id="app1">
    <component-a></component-a>
    
    <timesa></timesa>
</div>
                
        
        
        
        <script type="text/javascript">
          
            Vue.component('timesa',{
                template:`<h2>你好，当前时间是:{{time1}}</h2>`,
                data(){
                    return {
                        time1: new Date().toLocaleTimeString(),
                        _ti:null
                    }
                },
                methods:{
                    updatetime(){
                        this.time1=new Date().toLocaleTimeString()
                    }
                },
                created(){
                    this._ti=setInterval(this.updatetime,1000);
                },
                breforeDestory(){
　　　　　　　　　　　　//释放
                    this._ti.claer();
                }
            })
            
            Vue.component('component-a',{
                template:`<h1>你好，现在时间是：{{date}}</h1>`,
                data(){
                    return {
                        date:new Date().toLocaleTimeString(),
                        timer:null
                    }
                },
                methods:{
                    updateTime(){
                        this.date=new Date().toLocaleTimeString();
                    }
                },
                created(){
                    this.timer=setInterval(this.updateTime,1000);
                },
                beforeDestory(){
　　　　　　　　　　　　//释放
                    this.timer.claey();
                }
                
            })
            
            new Vue({el:'#app1'})

 　　　　 //定义组件
            var my ={
                template:`<button @click='incr' @mouseover='del()'>你已经点击了{{count}}</button>`,
                data(){
                    return{
                        count :0
                    }
                },
                methods:{
                    incr(){
                        this.count = this.count +1;
                    },
                    del(){
                        this.count=this.count-1;
                    }
                }
            }




            //注册组件名
            Vue.component('incbutton',my);
            
            //使用组件
            var vm=new Vue({
                el:"#app"
            });
        </script>
        
    </body>
</html>

运行效果：

相关阅读:
Mongo 应用查询
 Rocket MQ 问题排查命令
 阿里云部署杂记-节约时间
 linux shell 杂
 垃圾回收算法学习
 Hbase数据读写流程
 TCP 协议相关
 Netty
ELK
MiniGUI
原文地址：https://www.cnblogs.com/weibanggang/p/9982038.html