Web前端-Vue--vue钩子函数,自带的方法,computed计算属性,过滤器,watch监听器，动画

vue的生命周期钩子函数

所谓钩子函数:
    *               在vue的不同阶段 会暴露出一个个 回调函数
    *                 可以让使用vue的人 进行不同时期做不同事情

//    vm.$destroy();//销毁当前vue对象   会触发beforeDestroy destroyed钩子函数

 var vm=new Vue({
//            el:'#app',
        data:{
            msg:'Hello Vue!',
        },
//            钩子函数
        beforeCreate(){
            alert("初始化之前!")
        },
        created(){
            alert("初始化完成")
        },
        beforeMount(){
            alert("挂载之前!")
        },
        mounted(){
            alert("挂载成功!")
        },
        beforeUpdate(){
            alert("data里面的变量即将要更改!");
        },
        updated(){
            alert("data里面的变量值更改成功!")
        },
        beforeDestroy(){
            alert("vue对象即将销毁!");
        },
        destroyed(){
            alert("vue对象销毁成功!")
        }


    })
    vm.$mount("#app"); //通过方法 动态挂载

vue对象本身自带的方法  自定义属性和方法

那么vue本身自带的属性跟方法:
//        vm.$el  vm.$data  vm.$mount()  vm.$destroy() vm.$options

我们看到的data和el其实本质上来说 并不是vue对象
              本身的属性  而是Vue对象里面传入的option对象的属性
              所以正常访问el应该是 vue对象.option.el

              但是mv.option也没有

              vue对象给我们提供了访问这个对象的属性:
                vm.$options 就是方法括号里面这个配置对象

  console.log(vm.$options);
    console.log(vm.$options.el);
//    vm.$el=vm.$options.el;//vue源码中 有这句代码
    console.log(vm.$el);//返回js的dom对象 挂载的那个目标
    console.log(vm.$data);*/

自定义属性和方法  实际上定义在$options

 var vm=new Vue({
            el:'#app',
            data:{
                msg:'Hello Vue!',

            },
//            自定义方法
            show(){
                alert("vue自定义方法")
            },
            location:"文化大厦"
        });
        
        vm.$options.show();
        console.log(vm.$options.location);

computed计算属性

                    所谓计算属性 就是一个变量的值是根据另一个变量的值计算出来的
                    也就是当前这个变量的值由一堆代码计算出来

                因为data里面定义的变量 值 只能是简单的表达式
                  而不能是复杂代码

                  还有 data里面无法使用this
                  所以我们要用计算属性的方法 定义变量
                  从而让这个变量拥有 计算结果的功能:

             在Vue对象的大括号里面 定义computed属性

                computed:{
                    要渲染到页面的变量1:function(){
                            计算的代码

                        return  这个变量计算后的值
                    }
                }

              看起来computed里面像是定义了一个函数
              实际上不是!!!!!  这个函数是为了写代码 并计算出当前这个变量的值
              return就是返回这个变量计算后的值

        ps: computed里面定义的变量 在页面上也能正常渲染
         跟data里面定义的变量没有区别         唯一多的功能就是 computed里面的变量可以写代码
          一旦computed里面 引入了 data的变量(只要调用了就算)
          那么就会进行自动关联  data的这个变量值发生变化时
          该computed方法也会被触发

       ps: 计算属性 既然是根据  其他变量的变化而变化的 那么自己本身 并不能直接修改值

        
我是a变量:{{a}}
        
我是b变量:{{b}}
        
我是c变量:{{c}}
        
我是f变量:{{f}}

getter 和setter

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

过滤器

ps: 过滤器可以使用的地方:  mustache语法(双花括号位置)  v-model

 专门针对某一个变量的值的一个过滤作用
            定义好过滤器  在哪一个变量旁边引入 就检查哪一个变量
            一旦变量的值不符合过滤器 则过滤器里面会进行自定义代码处理

        格式:
            在Vue的大括号里面 定义filters属性
            filters:{
                过滤器的名字:function(过滤器监听的那个变量的新值){
                    写检查的代码
                    return 该变量的新值

               }

            }

            使用过滤器:
                {{data里面的变量  |  过滤器名字}}

 ps: 过滤器所监听的变量 一旦发生改变时  当前data里面的其他变量
          也会重新刷新值 如果其他变量也用到了过滤器 那么也会被触发

        

            
            获取
        

        
我是a变量:{{a | check}}
        
我是b变量:{{b | check}}

        过滤器和计算属性的区别:
            计算属性:
                   至少两个变量  其中一个变量的值是根据另一个变量的值变化而变化

             过滤器:
                    当前一个变量 引入过滤器后 针对这个变量额值一个监听
                    一旦不符合规则 则做对应处理

                    过滤器可以同时用在多个变量上

                    可以使多个变量 进行同一个规则的检查

watch监听器

监听指定变量的变化  一旦发生值的改变  监听器的回调就会被触发

格式:
                在vue的大括号里面 定义watch

                watch:{
                    被监听的变量名称:function(新值,旧值){
//                        变量值发生改变时 触发的回调

                    }

                }
                watch如果监听的是基本数据类型 那么 默认值改变时 监听器就会被触发

 var vm=new Vue({
            el:'#app',
            data:{
                msg:'Hello Vue!',
                per:{
                    name:"小砌墙",
                    age:16
                }
            },
            watch:{
                msg(newVal,oldVal){
                    console.log("msg的值发生了改变:",newVal,oldVal);

                },
            
            }
        });

                watch如果监听的是引用数据类型(对象)
                    那么默认是浅层监听

            watch的深层监听格式:
                   watch:{
                    被监听的对象变量:{
                        handler:function(新值,旧值){
                            数据发生改变时 触发的回调

                        },
                        deep:true //深层监听  默认false

                        }

                   }

 var vm=new Vue({
            el:'#app',
            data:{
                msg:'Hello Vue!',
                per:{
                    name:"小砌墙",
                    age:16
                }
            },
            watch:{

                /*per(newVal,oldVal){
//                    默认浅层监听
                    console.log("per的值发生了改变:",newVal,oldVal);
                }*/

                per:{
                    handler(newVal,oldVal){
                        console.log("per的值发生了改变:",newVal,oldVal);
                    },
                    deep:true
                }
            }
        });

 过滤器的全局引入方式   

       Vue.filter("自定义过滤器的名字",回调函数(参数是新值))

 //filter方法是Vue的静态方方法(构造函数名调用的)
        Vue.filter("check",function (newVal) {
            return newVal+"xx";   
        })

全局注册监听器

Vue对象调用自带的$watch方法(默认浅层监听)

    vm.$watch("a",function (newVal,oldVal) {
        console.log("a变量发生了变化",newVal,oldVal);

    })

深层监听

 vm.$watch("per",{
        handler:function (newVal,oldVal) {
            console.log("per变量发生了变化",newVal,oldVal);
        },
        deep:true
    })

Vue2.0动画实现有两种方式:

1.结合css3的动画来实现
                   移动端项目时  具体结合实际例子去讲

            2.结合animate.css库实现动画(简单)
                主要是针对元素的进入和离开实现动画

                前提: 首先保证自己有一个元素是进入和离开切换的元素

                其次: 把显示隐藏的元素外面套一个 transition标签

                然后: 在transition标签的开始标签上面 定义两个属性

                    enter-active-class="animated animate.css里面的一个动画类名"    (进入的class)

                    leave-active-class="animated animate.css里面的一个动画类名"    (离开的class)

                ps: 要记得 前边引入 animate.css

    
    
    
    




    切换显示