Vue.js開發入門(五)

過濾器與生命周期

1.過濾器:

Vue.js支援在{{}}插值的尾部添加一個管道符”(|)”對資料進行過濾,常用與格式化文本。如字母全部大寫,貨币千位使用”,”分隔等。

<div id="app">
    {{date | formatDate}}
</div>

<script>
//在月份,日期,小時小于10前面補0
  var padDate = function(){
     return value <  ? '0' +value:value;
            };
  var app = new Vue({
       el: '#app',
         data: {
         date:new Date()
              },
formatDate:function(value){//這裡的value就是需要過濾的資料
    var date = new Date(value);
    var year = date.getFullYear();
    var month = padDate(date.getMonth()+);
    var day = padDate(date.getDate());
    var hours = padDate(date.getHours());
    var minutes = padDate(date.getMinutes());
    var seconds = padDate(date.getSeconds());
        //将過濾号的資料傳回
    return year + '-' + month + '-' + day + '-' + hours + '-' + ':' + minutes + ':' +seconds;
},

methods:function(){
    var_this = this;//聲明一個變量,指向vue執行個體的this,保持作用于一緻
        this.timer = setInterval(function(){
        _this.date = new Date();//修改資料date
},);
                },
bedoreDestroy : function(){
     if (this.timer) {
     clearInterval(this.timer);//清除定時器
}
                }
})
</script>
           

2.生命周期

:created 執行個體建立完成後調用,此階段完成了資料的觀測,但尚未挂載,$el還不可用。
    需要初始化處理一些資料時比較有用。
:mounted el挂載到執行個體上後調用,一般在我們得第一個業務邏輯這裡開始。
:beforeDestroy 執行個體銷毀之前調用,主要解綁一些使用addEventListener監聽事件。