过滤器和生命周期和watch监听属性

过滤器

1.局部过滤器new Vue({filters:{名称(value){}}})，
全局过滤器Vue.filter(“名称”,function(value){})
2.返回一个新的数据
3.使用时|名称, 多个过滤器串联，拿取的值是前一个

过滤器案例

<div id="app">
        <h1>{{time}}</h1>
        <h2>{{times}}</h2>
        <h3>{{time|newDates()}}</h3>
    </div>
<script>
    Vue.config.productionTip = false;
    // Vue.directive()
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                time:Date.now(),
                times:new Date(),
            }
        },
        methods: {
            
        },
        // 过滤器
        filters:{
            newDates(value,str="YYYY年MM月DD日 HH:mm:ss"){
                // console.log(value);
                let a = parseInt(value/1000/60/60/24/366);
                let b = parseInt((value/1000/60/60/24/366-a)*(12));
                let c = (value/1000/60/60/24/366-a)*366-b*30;
                // 小数月*365 = 天
                // console.log(a);
                console.log(a+1970);
                console.log(b);
                console.log(c);
            }
        },
        // 自定义指令
        directives:{

        },
        // 计算属性
        computed:{

        },
        // 监听属性
        watch:{

        },
    })
    // vm.$mount()
    // vm.$watch()
</script>

生命周期

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

// 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("触发了销毁后");
        },

watch监听属性

    **规则：
     1.监听已存在的属性
     2.immediate:true默认调用一次，false不会
     3.简写：只有handler方法才可以简写。写法:监听的属性(新值,旧值){}
     4.监听对象中的值需要深度监听，deep:true**

  watch:{
            obj:{
                immediate:false,
                deep:true,
                handler(newVlaue,oldValue){
                    console.log("--------obj-------");
                    console.log(newVlaue);
                    console.log(oldValue);
                }
            },
            bool:{
                immediate:true,
                handler(newVlaue,oldValue){
                    console.log(newVlaue);
                    console.log(oldValue);
                    if(newVlaue==true){
                        this.userName = "张三";
                        this.obj.id = 100;
                    }else{
                        this.userName = "李四";
                        this.obj.id = 99;
                    }
                }
            },