vue.js實戰——vue 實時時間

時間 2020-07-16

原文原文鏈接

created:實例建立完成後調用，此階段完成了數據的觀測等，但還沒有掛載，$el還不可用，須要初始化處理一些數據時會比較有用。html

mounted：el掛載到實例上後調用，通常咱們的第一個業務邏輯會在這裏開始。vue

beforeDestroy：實例銷燬以前調用，主要解綁一些使用addEventListener監聽的事件等。app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>實時時間</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app"> {{date}} </div>
    <script>
        //自個寫的
    /* new Vue({ el:"#app", data:{ date:'' }, mounted:function(){ var self=this; var time=setInterval(function(){ self.date=new Date(); },1000); }, beforeDestory:function(){ clearInterval(time); } }) */
        //標準代碼
        var app=new Vue({ el:'#app', data:{ date:new Date() }, mounted:function(){ //el掛載到實例上調用，通常咱們第一個業務邏輯會在這裏開始
                var _this=this; this.timer=setInterval(function(){ _this.date=new Date(); },1000); }, beofreDestory:function(){ if(this.timer){ clearInterval(this.timer); } } }) </script>
</body>
</html>

對比之下本身寫的代碼真的是，考慮的太少了，都沒有判斷setInterval對象是否存在

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。