【vue.js生命周期】

生命周期

• 又名生命周期回调函数、生命周期函数、生命周期钩子

• 是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数

• 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的

• 生命周期函数中的 this 指向是vm或组件实例对象

生命周期
1.生命周期函数，钩子函数
2.生命周期函数命名不能修改
3.this指向Vue实例(vm)
----------------------
过滤器
1.局部过滤器new Vue({filters:{名称(value){}}})，
全局过滤器Vue.filter(“名称”,function(value){})
2.返回一个新的数据
3.使用时|名称, 多个过滤器串联，拿取的值是前一个

 Vue.filter("myTime",function(value){
        // console.log(value);
        // return value.slice(0,11);
        // return value.substring(0,11);
        return value.substr(0,11);
    })
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                time:Date.now(),
                userName:"张三",
                bool:true,
                // opacity:"opacity:1",
                opacity:1,
                timeValue:"",
            }
        },
        methods: {
            sum(){
                return 100;
            },
            func(){
                this.userName = "9999"
            },
            stop(){
                this.$destroy();
            }
        },
        // beforeCreate初始化之前,不能获取data中的数据
        beforeCreate() {
            // console.log(this.userName);
            // console.log(this.sum());
        },
        // created初始化之后,获取data中的数据
        created() {
            // console.log(this.userName);
            // console.log(this.sum());
        },
        // beforeMount解析前|挂载前
        beforeMount() {
            // this.bool = false;
            // document.getElementsByClassName("box")[0].style.color = "red";
        },
        // mounted解析后|挂载后
        mounted() {
            // this.userName = "王五";
            // document.getElementsByClassName("box")[0].style.color = "red";
            this.timeValue = setInterval(()=>{
                this.opacity-=0.01;
                if(this.opacity<=0){
                    this.opacity=1;
                }
            },10)
        },
        // beforeUpdate更新前
        beforeUpdate() {
            // setTimeout(()=>{
            //     this.userName = "李四";
            // },1000)
        },
        // updated更新后
        updated() {
            // this.userName = "王五";
        },
        // beforeDestroy销毁前
        beforeDestroy() {
            clearInterval(this.timeValue);
            console.log("触发了销毁前");
        },
        // destroyed销毁后
        destroyed() {
            console.log("触发了销毁后");
        },

// 局部过滤器

        filters:{
            times(value,str="YYYY年MM月DD日 HH:mm:ss"){
                console.log(value);
                return dayjs(value).format(str);
                return new Date(value);
                let a = new Date(value);
                return a.toISOString();
                let day = parseInt(value/1000/60/60/24);
                let days = day;
                let year = 1970;
                while (day>=366) {
                    if(year%4==0){
                        day-=366;
                    }else{
                        day-=365;
                    }
                    year+=1;
                }
                let month = 1;
                while(day>=28){
                    if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
                        if(day<31){
                            break;
                        }
                        day-=31;
                    }else if(month==4||month==6||month==9||month==11){
                        if(day<30){
                            break;
                        }
                        day-=30;
                    }else if(month==2&&year%4==0){
                        if(day<29){
                            break;
                        }
                        day-=29;
                    }else{
                        if(day<28){
                            break;
                        }
                        day-=28;
                    }
                    month+=1;
                }
                console.log(year+"年"+month+"月"+(day+1)+"日");
            }
        }
    })
    console.log(vm);