vue的生命周期

作者: 瑟闻风倾 | 来源:发表于2019-05-21 17:31 被阅读0次

    Vue官网
    Vue GitHub
    Vue1下载地址
    Vue1.0 在线文档
    Vue2下载地址
    Vue2.0 在线文档

    vue的生命周期函数.png

    1. vue1.0的生命周期

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Document</title>
        <script type="text/javascript" src="../../first/vue1026.js"></script>
    </head>
    <body>
        <!-- view -->
        <div id="app">
            {{name}}
        </div>
    </body>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                name:"hello liy"
            },
            //生命周期函数:vue1.0主要有6个页面初始化相关的函数。created及以后才能获取data中数据,一般优先选择在created中进行ajax请求操作。
            init:function(){
                console.log("1 init:",this.name);
            },
            created:function(){
                console.log("2 created:",this.name);
            },
            beforeCompile:function(){
                console.log("3 beforeCompile:",this.name);
            },
            compiled:function(){
                console.log("4 compiled:",this.name);
            },
            attached:function(){
                console.log("5 attached:",this.name);
            },
            ready:function(){
                console.log("6 ready:",this.name);
            }
        });
    </script>
    </html>
    

    2. vue2.0的生命周期

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Document</title>
        <script type="text/javascript" src="../../first/vue221.js"></script>
    </head>
    <body>
        <!-- view -->
        <div id="app">
            {{name}}
        </div>
    </body>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                name:"hello liy"
            },
            //生命周期函数:vue2.0主要有4个页面初始化相关的函数。created及以后才能获取data中数据,一般优先选择在created中进行ajax请求操作。
            beforeCreate:function(){
                console.log("1 beforeCreate:",this.name);
            },
            created:function(){
                console.log("2 created:",this.name);
            },
            beforeMount:function(){
                console.log("3 beforeMount:",this.name);
            },
            mounted:function(){
                console.log("4 mounted:",this.name);
            }
        });
    </script>
    </html>
    

    相关文章

      网友评论

        本文标题:vue的生命周期

        本文链接:https://www.haomeiwen.com/subject/uupjzqtx.html