Vue.js开发入门(五)

过滤器与生命周期

1.过滤器:

Vue.js支持在{{}}插值的尾部添加一个管道符”(|)”对数据进行过滤,常用与格式化文本。如字母全部大写,货币千位使用”,”分隔等。

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

<script>
//在月份,日期,小时小于10前面补0
  var padDate = function(){
     return value < 10 ? '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()+1);
    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
},1000);
                },
bedoreDestroy : function(){
     if (this.timer) {
     clearInterval(this.timer);//清除定时器
}
                }
})
</script>

2.生命周期

2.1:created 实例创建完成后调用,此阶段完成了数据的观测,但尚未挂载,$el还不可用。
    需要初始化处理一些数据时比较有用。
2.2:mounted el挂载到实例上后调用,一般在我们得第一个业务逻辑这里开始。
2.3:beforeDestroy 实例销毁之前调用,主要解绑一些使用addEventListener监听事件。