首页 > 其他 > 详细

Vue生命周期

时间:2017-11-15 10:37:51      阅读:23      评论:0      收藏:0      [点我收藏+]

标签:vue生命周期

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>Vue生命周期</title>
        </head>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script>
            window.onload = function(){
                //配置是否允许检查代码,方便调试,生产环境中设置为false
                Vue.config.devtools = true;  //检查代码
                Vue.config.productioinTip = false;  //有强迫症的,可以关掉生产中的提示信息
                let vm = new Vue({
                    el: "#div1",
                    data:{
                        msg:‘hello world‘
                    },
                    methods:{
                        update(){
                            this.msg = ‘更新数据hello world‘;
                        },
                        destroy(){
                            vm.$destroy();  //销毁本实例
                        }
                    },
                    beforeCreate(){
                        alert(‘组件实例刚创建,还没进行数据观测和事件配置‘);
                    },
                    created(){
                        //经常用
                        alert(‘实例已经创建完成,并且已经进行数据观测和事件配置‘);
                    },
                    beforeMount(){
                        alert(‘模板编译之前,还没挂载‘);
                    },
                    mounted(){
                        //常用
                        alert(‘模板编译之后,已经挂载,此时才会渲染页面,才能看到页面上数据的显示‘);
                    },
                    beforeUpdate(){
                        alert(‘组件更新之前‘);
                    },
                    updated(){
                        alert(‘组件更新之后‘);
                    },
                    beforeDestroy(){
                        alert(‘组件销毁之前‘);
                    },
                    destroyed(){
                        alert(‘组件销毁之后‘);
                    }
                });
            }
        </script>
        <body>
            <div id="div1">
                {{msg}}
                <button @click="update">更新数据</button>
                <button @click="destroy">销毁组件</button>
            </div>
        </body>
    </html>


本文出自 “Note” 博客,转载请与作者联系!

Vue生命周期

标签:vue生命周期

原文:http://3miao.blog.51cto.com/9661385/1981853

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号