Vue02 -- 生命周期

<!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 v-pre>{{这里的内容不显示出来}}</span> -->
    
    <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script type="text/javascript">

        var app = new Vue({
            el:'#app',
            data:{
                a:2
            },
            created:function () {
                // Vue实例创建完成后调用，完成了数据的观测，但尚未挂在el。在初始化数据的时候使用
                console.log(this.a)
            },
            mounted:function () {
                // el挂载到实例后调用，一般第一个逻辑在这里写
                console.log(this.$el)
            }
            // beforeDestroy实例销毁之前调用。主要解绑一些使用addEventListenter监听的事件等。
        })

        var opp = new Vue({
            el:'#opp',
            data:{
                date:new Date()
            },
            mounted:function () {
                var _this = this
                this.timer = setInterval(function () {
                    _this.date = new Date(); // 修改date数据
                    console.log(_this.date)
                },1000);
            },
            beforeDestroy:function () {
                if (this.timer){
                    // Vue实例销毁前清除定时器
                    clearInterval(this.timer);
                }
            }
        })

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


    </script>
</body>
</html>
猜你喜欢
