vue 中的各种事件

new Vue({

el:'#id',

data(){      //数据对象

return {
        demo: {
          name: ''
        },
     user:'',
};

},

mounted: function () {     //页面加载完成后执行的方法

},

methods: {    //盒子中所有方法

},

created() {    //实例被创建时候执行

},

computed: {

newName() {
        return this.demo.name;
      }
},

watch: {    //监听数据前后变化
  firstName: function (val, oldVal) { //如果watch监测的是一个对象的话,直接使用watch是不行的,此时我们可以借助于computed计算属性来完成
  
  }            //或者在键路径加上引号
‘demo.name’:
function (val, oldVal) {
}

  user: function (val, oldVal) {   //数据前后变化
  }

},
 

})

      beforeCreate: function () {
            console.group('beforeCreate 创建前状态===============》');
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》'); 
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
        },

        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
        }

beforecreated:el 和 data 并未初始化
created:完成了 data 数据的初始化,el没有
beforeMount:完成了 el 和 data 初始化
mounted :完成挂载

 

posted @ 2019-07-10 11:50  臭梨花  阅读(11539)  评论(0编辑  收藏  举报