vue2.0——生命周期


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

你可能感兴趣的:(Vue)