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值，十分好用。