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

转载于:https://www.cnblogs.com/qq631243523/p/10042576.html