Vue02 - Life Cycle - Code World

<!DOCTYPE html>
<html>
<head>
    <title>Vue --- 生命周期</title>

</head>

<body>
    <div id="app">
        <input type="text" name="" v-model="a" placeholder="你的名字">
        <h1>你好！{{a}}</h1>
    </div>

    <div id="opp">
        {{date}}
    </div>

    <div id="hpp">
        <span v-html='link'></span>
    </div>
    
    <-! <Span pre-V> {{content is not displayed here}} </ span> ->
    
    <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script type="text/javascript">

        was app =  new Vue ({
            on: ' #app ' ,
            data:{
                a:2
            },
            the Created: function () {
                 // call after Vue instance is created, completed the observed data, but has not yet hung on the el. Used when the initialization data 
                console.log ( the this .a)
            },
            Mounted: function () {
                 // the mount el call instance, where typically the first logical write 
                the console.log ( the this $ el.)
            }
            // called before beforeDestroy instance destroyed. The main use of some unbundling addEventListenter listening events. 
        })

        was up =  new Vue ({
            el: ' #opp ' ,
            data:{
                date:new Date()
            },
            mounted:function () {
                var _this = this
                this.timer = setInterval(function () {
                    _this.date =  new new a Date (); // modify date data 
                    console.log (_this.date)
                },1000);
            },
            beforeDestroy: function () {
                 IF ( the this .timer) {
                     // before clearing timer destruction Vue example 
                    the clearInterval ( the this .timer);
                }
            }
        })

        was HPP =  new Vue ({
            on: ' #hpp ' ,
            data:{
                link:'<a href="https://unpkg.com"> 输出html </a>'
            }
        })


    </script>
</body>
</html>
Vue02 - Life Cycle

Guess you like
