vue 中的各种事件

Vue实例生命周期及方法示例

最新推荐文章于 2025-01-11 12:22:44 发布

转载最新推荐文章于 2025-01-11 12:22:44 发布 · 1w 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lizi-cat/p/vue.html

文章标签：

#javascript #ViewUI

博客给出了Vue实例的代码示例，包含data、mounted、methods等方法，还介绍了Vue实例不同阶段的状态，如beforecreated时el和data未初始化，created完成data初始化等。

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 ：完成挂载

转载于:https://www.cnblogs.com/lizi-cat/p/vue.html