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>

  • 相关阅读:
    华为软件开发云评测
    个人技术博客(α)
    结对第二次作业
    结对第一次作业----部门通
    数独设计
    2017软件工程实践第一次作业
    Alpha冲刺博客集
    个人作业——软件工程实践总结作业
    用户使用调查报告
    总结随笔(Beta)
  • 原文地址:https://www.cnblogs.com/hr-7/p/14801691.html
Copyright © 2011-2022 走看看