• Vue框架之侦听器与生命周期


    一、计算属性computed和侦听器(watch)

    侦听的是单个属性

    watch:{
    
        数据属性的名字:function(value){
    
        },
        数据属性的名字2:function(value){
    
        }
    }

    侦听多个属性:计算属性 computed

    {{str.split('').reverse().join('')}}

    计算属性 :默认只有getter方法
    
    data(){
    
      return {
    
        name:'alex',
    
        age:18
    
    }
    
    }
    
    compuetd:{
    
          key:value
    
          计算属性的方法名:funtion(){
    
            return ${this.name}他的年龄是${this.age}岁
    
        }
    
    }
    
    var musicData = [
    
          {
    
            id:1,
    
            name:'于荣光 - 少林英雄',
    
            author:'于荣光',
    
            songSrc:'./static/于荣光 - 少林英雄.mp3'
    
          },
    
          {
    
            id:2,
    
            name:'Joel Adams - Please Dont Go',
    
            author:'Joel Adams',
    
            songSrc:'./static/Joel Adams - Please Dont Go.mp3'
    
          },
    
          {
    
            id:3,
    
            name:'MKJ - Time',
    
            author:'MKJ',
    
            songSrc:'./static/MKJ - Time.mp3'
    
          },
    
          {
    
            id:4,name:'Russ - Psycho (Pt. 2)',
    
            author:'Russ',
    
            songSrc:'./static/Russ - Psycho (Pt. 2).mp3'
    
          }
    
        ];
    

    二、生命周期(钩子函数)

    beforeCreate(){
    
        // 组件创建之前
    
        console.log(this.msg);
    
    },
    
    created(){
    
        // 组件创建之后
    
        // 使用该组件,就会触发以上的钩子函数,created中可以操作数据,发送ajax,并且可以实现vue==》页面的影响  应用:发送ajax请求
    
        console.log(this.msg);
    
        // this.msg = '嘿嘿黑';
    
    },
    
    beforeMount(){
    
        // 装载数据到DOM之前会调用
    
        console.log(document.getElementById('app'));
    
    },
    
    mounted(){
    
        // 这个地方可以操作DOM
    
        // 装载数据到DOM之后会调用 可以获取到真实存在的DOM元素,vue操作以后的DOM
    
        console.log(document.getElementById('app'));
    
    },
    
    beforeUpdate(){
    
        // 在更新之前,调用此钩子,应用:获取原始的DOM
    
        console.log(document.getElementById('app').innerHTML);
    
    },
    
    updated(){
    
        // 在更新之前,调用此钩子,应用:获取最新的DOM
    
        console.log(document.getElementById('app').innerHTML);
    
    },
    
    beforeDestroy(){
    
        console.log('beforeDestroy');
    
    },
    
    destroyed(){
    
        console.log('destroyed');
    
    },
    
    activated(){
    
        console.log('组件被激活了');
    
    },
    
    deactivated(){
    
        console.log('组件被停用了');
    
    }
    

    $属性

    • $refs获取组件内的元素
    • $parent:获取当前组件的父组件
    • $children:获取当前组件的子组件
    • $root:获取New Vue的实例化对象
    • $el:获取组件对象的DOM元素

    获取更新之后的dom添加事件的

  • 相关阅读:
    startup毕业论文
    LeetCode OJ
    LeetCode OJ
    LeetCode OJ
    LeetCode OJ
    LeetCode OJ
    install
    逻辑卷(lv)管理(LVM)
    mke2fs
    cat & 文件结束符
  • 原文地址:https://www.cnblogs.com/qq631243523/p/10042576.html
Copyright © 2020-2023  润新知