【06】vue.js — 生命周期

来源：互联网发布：sql 日期变量慢编辑：程序博客网时间：2024/06/04 18:13

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="js/vue.js" ></script>    </head>    <body>        <div id="box">            <input type="button" value="销毁vue对象" @click="test()" /><br />            {{msg}}        </div>    </body>    <script>        var vm=new Vue({            el: '#box',            data: {                msg: 'well'            },            beforeCompile: function() {                console.info('编译之前');            },            created: function() {                console.info('实例已经创建');            },            compiled: function(){                console.info('编译之后');            },            ready: function(){                console.info('插入到文档中');            },            beforeDestroy: function() {                console.info('销毁之前');            },            destroyed: function(){                console.info('销毁之后');            },            methods: {                test: function() {                    this.$destroy();                }            }        });    </script></html>

创建时执行的生命周期方法

vue生命周期

销毁后执行的方法

vue对象销毁

阅读全文

0 0