vue2.0——生命周期

来源：互联网发布：对比分析两个表格数据编辑：程序博客网时间：2024/05/21 15:43

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/Vue.js"></script>    <script>        window.onload = function(){            var vm = new Vue({                el:'#box',                data:{                    msg:'welcome Vue2.0'                },                beforeCreate(){                    console.log('组件实例刚刚被创建');                },                created(){                    console.log('实例已经创建完成');                },                beforeMount(){                    console.log('模板编辑之前');                },                mounted(){                    console.log('模板编辑完成');                }            });        }    </script></head><body><div id="box">    {{msg}}</div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/Vue.js"></script>    <script>        window.onload = function(){            var vm = new Vue({                el:'#box',                data:{                    msg:'welcome Vue2.0'                },                methods:{                    updata(){                        this.msg='vue2.0的变化'                    },                    destory(){                        this.$destroy();                    }                },                beforeCreate(){                    console.log('组件实例刚刚被创建');                },                created(){                    console.log('实例已经创建完成');                },                beforeMount(){                    console.log('模板编辑之前');                },                mounted(){                    console.log('模板编辑完成');                },                beforeUpdate(){                    console.log('组件更新之前');                },                updated(){                    console.log('组件更新完成');                },                beforeDestroy(){                    console.log('组件销毁之前');                },                destroyed(){                    console.log('组件销毁完成');                }            });        }    </script></head><body><div id="box">    <input type="button" @click="updata" value="更新数据">    <br>    {{msg}}    <br>    <input type="button" @click="destory" value="销毁组件"></div></body></html>

0 0