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添加事件的