zoukankan      html  css  js  c++  java
  • vue生命周期详细

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>
            生命周期
        </title>
    </head>
    
    <body>
        <div id="app">
            <input type="button" value="修改" @click="msg='sss'"/>
            <p id="p1">{{msg}}</p>
        </div>
    
    </body>
    <!--1、导入vue包-->
    <script src="./js/vue.min.js"></script>
    <!--2、创建vue实例(new对象)-->
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                msg:'msg'
            },
            //生命周期第一个函数,代表vue实例被创建,并没有初始化数据
            beforeCreate() {
                console.log(this.msg)
                this.show()
            },
            //生命周期的第二个函数,代表数据被初始化,此处为最早获取到的数据和方法的地方
            created() {
                console.log(this.msg)
                this.show()
            },
            // 生命周期的第三个函数,在模板挂载前
            beforeMount() {
                // 代表template模板已经存在内存中,并且模板中已经编辑完数据,但是此时已完成挂载到页面
                console.log(document.getElementById('p1').innerHTML)
            },
             mount() {
                // 代表template模板已经存在内存中,并且模板中已经编辑完数据,但是此时模板还没挂载到页面
                console.log(document.getElementById('p1').innerHTML)
            },
            beforeUpdate() {
                //数据发生更新,但是没有显示到页面
                console.log("页面上的msg元素内容:"+document.getElementById('p1').innerHTML)//页面上的msg元素内容:msg
                console.log("data中msg的内容"+this.msg)//data中msg的内容:sss
                console.log("----------------------------");
            },
            update() {
                // 数据发生更新,且显示到页面
                console.log("页面上的msg元素内容:"+document.getElementById('p1').innerHTML)//页面上的msg元素内容:sss
                console.log("data中msg的内容"+this.msg)//data中msg的内容:sss
            },
            methods: {
                show(){
                    console.log('show');
                }
            }
        })
    </script>
    
    </html>

  • 相关阅读:
    异构网络中的并行传输问题
    如何编程实现快速获取一个整型数中的bit流中1的个数
    对单例模式的一个简单思考
    OsgEearh 中的 FeatureEditor的实现原理
    关于在osgearth 中 出现 arial.ttf : file not handled 的问题
    Qt 中 this->size() this->rect() event->size() 三者差异
    Qt 中QPainter 使用中出现的问题
    对c语言中static函数的理解
    对声明和定义的理解
    个人对头文件的理解
  • 原文地址:https://www.cnblogs.com/hr-7/p/14801691.html
Copyright © 2011-2022 走看看