vue2

　　　　 Vue.filter('format',function(timer,formatter){
            //filter 没有this
            return moment(timer).format(formatter)
        })
        let vm = new Vue({
            el:'#app',
            data(){
                return {
                    msg:{a:1},
                    checks:[{check:true},{check:true},{check:true}],
                    timer:1734512832100,
                    money:'28',
                    show:false
                }
            },
            filters:{
                //局部过滤器
                fixed(value,num){
                    return  '￥' + Number(value).toFixed(num)
                }
            },
            computed:{
                checkAll:{
                    get(){//取值执行get方法
                        return this.checks.every(item=>item.check)//every有一项是false就返回false
                    },
                    set(newValue){
                        this.checks.forEach(item=>{
                            item.check = newValue;
                        })
                    }
                }
            },
            directives:{
                //指令有生命周期 钩子函数（默认写成函数的话：bind + update）
                //bind 当指令绑定上的时候，会执行一次
                //inserted插入的时候
                //update当引用的数据变化时会执行一个钩子
                //componentUpdate
                //unbind
                // clickOutside(el,bindings,vnode){
                //     // console.log(el,bindings,vnode.context)
                //     document.addEventListener('click',function(e){
                //         if(!el.contains(e.target)){             //el.contains
                //             let method = bindings.expression;   //bindings.expression
                //             //vm.hideFn();
                //             vnode.context[method]()             //vnode.context
                //         }
                //     })
                // },
                clickOutside:{
                    bind(el,bindings,vnode){
                        el.handler = function(e){
                            if(!el.contains(e.target)){
                                let method = bindings.expression;
                                vnode.context[method]()
                            }
                        }
                        document.addEventListener('click',el.handler)
                    },
                    unbind(el){
                        document.removeEventListener('click',el.handler)
                    }
                },
                //focus(el){el.focus()},//这时既没更新也没绑定，也没放到页面中所以不生效
                focus:{
                    // bind(el){
                    //     Vue.nextTick(()=>{
                    //         el.focus()
                    //     })
                    // }
                    inserted(el){ //插入时的生命周期
                        el.focus()
                    }
                }
            },
            methods:{
                fn(){
                    console.log(123)
                },
                showFn(){
                    this.show = true;
                },
                hideFn(){
                    this.show = false;
                }
            },
            //watch三种写法：函数，对象，字符串
            watch:{
                msg:[
                {
                    handler(newValue,oldValue){
                        //如果是对象类型无法获取老值
                        console.log(newValue,oldValue)
                    },
                    deep:true //在内部再去对这个对象取值
                },
                {
                    handler(newValue,oldValue){
                        console.log(newValue,oldValue)
                    },
                    immediate:true //立即执行，用的少，一般会直接写到mounted
                },
                'fn'
                ]
            }
        })