分别使用jQuery、Vue写时钟小例子

Vue是一个神奇的东西，你只要有一点点html,css,javascript知识就可以使用Vue，而且还很好用。

今天老师上课讲了Vue第一节基础知识，就能用一点点知识用两种方法写出时钟。加上我们之前也用jQuery写过时钟，我就想到将它两的代码进行对比。

 

注：时钟代码均为最原始的时钟，为了突出其差异性而不对样式进行细究。

1.jQuery代码：

    <script src="./jquery-3.5.0/jquery-3.5.0.js">
    </script>
    <script>
        window.onload=function(){
           
            function clock()
            {
                var date=new Date();
                
                document.getElementById("timeShow").innerText=""+date;
            }          
            setInterval(clock,1000);
        }
    </script>
</head>
<body>
    <div id="timeShow"> </div>
</body>
</html>

jQuery代码需要将dom元素提取出来，然后用间歇调用进行动态设置。

 

2.Vue代码一：

    <script src="../js/vue-2.6.12.js"></script>
   
</head>
<body>
    <div id="app">
        {{time}}
    </div>
    <script>
         let vm=new Vue({
             el:"#app",
             data:{
                 msg:'hello',
                 name:'zhangsan',
                 time:new Date()
             },
             methods:{
                 sayName(){
                     console.log(this.name);
                 },
             }
         });
        //  一般不会在外部调用vm
         //修改msg
        setInterval(() => {
         vm.time=new Date();
        }, 1000);
    </script>
</body>
</html>

Vue代码将时间放进一个变量time中，每次只要修改data中time的值就可实现时钟动态变化。这种方法已经比jQuery代码感觉清爽了好多。但是就像代码中注释的那样，一般不会在外部调用vm,所以这种方法有待改进。

接着老师又讲了生命周期函数（钩子函数）。于是有了下面的代码：

<script src="../js/vue-2.6.12.js"></script>
</head>
<body>
    <div id="app">
        {{time}}
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:'hello',
                time:new Date()
            },
            //钩子函数
            beforeCreate(){
                console.log(this.msg,"beforeCreate");
            },
            created(){
            setInterval(() => {
               this.time= new Date();
            }, 1000);
            }
        });
    </script>
</body>
</html>

 

代码中 beforeCreate()、created()函数都是钩子函数，除此之外还有beforeMount（）、mounted（）、beforeUpdated（）、updated（）、beforeDestory（）、destory（）函数。这些函数不用调用，达到某种状态会自动调用。所以不用写到method里等待调用。这种方式使实例对象在创建的时候就能够间歇修改time值，十分好用。

 

posted on 2020-09-16 13:04  超级杨过敏  阅读(245)  评论(0)  编辑  收藏  举报

导航