刷脸支付 国外镜像 HTTP请求 arrays gdb Modernizr npm安装vue java并发编程视频 jq触发点击事件 matlab停止运行命令 微信pc版无法获取二维码 java通用版qq浏览器下载 chrome发送post请求 java时间戳 nodejs后端开发 java获取字符串 dwf文件怎么转成dwg java高级特性 mysql学习 react python命令 python开发界面 python循环10次 python数字类型 python正则匹配数字 java覆盖 java表达式 java数组添加 java的数据结构 java定义变量 java中获取当前时间 java字符串格式化 linux服务器 linux教学 decimalformat python入门经典 rndis驱动下载 h370主板 计算机网络自顶向下 临时会话
当前位置: 首页 > 学习教程  > 编程语言

Vue生命周期 (图解+代码解析)

2020/8/31 13:12:10 文章标签:

在这里插入图片描述

<body>
<!--
    1.什么是生命周期方法?
    和wbpack生命周期方法一样,都是在从生到死的特定阶段调用的方法
    ps:生命周期钩子 = 生命周期函数 = 生命周期事件
    2.vue生命周期方法分类
    2.1创建期间的生命周期方法
        beforeCreate:
        created:
        beforeMount:
        mounted:
    2.2运行期间的生命周期方法
        beforeUpdate:
        updated:
    2.3销毁期间的生命周期方法
       beforeDestroy:
       destroyed:
-->
<div id="app">
    <button @click="change">切换</button>
    <!--通过v-if来切换,会直接删除和重新创建-->
  <one v-if="isShow"></one>
</div>
<!--Vue实例对象可以看作一个大的组件,自定义组件可以看作一个小组件
    那么大的组件可以使用的属性和方法,在小的组件中也可也使用
    例如:在vue实例中外面可以添加data,methods,那么在自定义的组件中也可以添加data,methods
    所以Vue实例中可以使用生命周期方法,组件中也可也使用生命周期方法-->
<template id="one">
    <div>
        <p>我是组件</p>
    </div>
</template>
<script>
    Vue.component("one",{
        template:"#one",
        data:function(){
            return{
                msg:"小猪熊"
            }
        },
        methods:{
          say(){
              console.log("say");
          }
        },
        /*
        在调用beforeDestroy的时候表示当前组件即将被销毁了
        注意点:只要组件不被销毁,那么beforeDestroy就不会被调用
                beforeDestroy函数是外面最后能够访问到组件数据和方法的函数
        */
        beforeDestroy:function(){
            // console.log("beforeDestroy");
            // console.log(this.msg);
            // console.log(this.say);
        },
        destroyed:function () {
            /*.
           在调用destroyed的时候,表示当前组件已经被销毁了
           注意点:只要组件不被销毁,那么destroyed就不会被调用
                   不要在这个生命周期方法中再去操作组件中的数据和方法
            */
            console.log("destroyed");
        }
    });
    //1.创建一个Vue的实例对象
    let vue = new Vue({
        beforeCreate:function(){
            /*
            在调用beforeCreate的时候,仅仅表示Vue实例刚刚被创建出来
            此时此刻还没有初始化好Vue实例中的数据和方法,所以此时此刻还不能访问Vue实例中保存的数据和方法
             */
            // console.log(this.msg);
            // console.log(this.say);
        },
        created:function(){
            //在调用created的时候,是我们最早能够访问Vue实例中保存的数据和方法的地方
            // console.log(this.msg);
            // console.log(this.say);
        },
        beforeMount:function(){
            //在调用beforeMount的时候,表示Vue已经编译好了最终模板,但是还没有将最终的模板渲染到界面上
            // console.log(document.querySelector("p").innerHTML);
            // console.log(document.querySelector("p").innerText);
        },
        mounted:function(){
            /*
            在调用mounted的时候,表示Vue已经完成了模板的渲染
             */
            // console.log(document.querySelector("p").innerHTML);
            // console.log(document.querySelector("p").innerText);
        },
        beforeUpdate:function(){
            /*
            在调用beforeUpdate的时候,表示Vue实例中保存的数据被修改了
            注意点:只有保存的数据被修改了才会调用beforeUpdate,否则不会
                    在调用beforeUpdate的时候,数据已经更新了,但是界面还没有更新
             */
            // console.log("beforeUpdate");
            // console.log(document.querySelector("p").innerHTML);
            // console.log(document.querySelector("p").innerText);
        },
        updated:function(){
            /*
            在调用updated的时候表示Vue实例中保存的数据被修改了,并且界面也同步了修改的数据了
            也就是说数据和界面都同步更新之后会调用updated
             */
            // console.log("beforeUpdate");
            // console.log(document.querySelector("p").innerHTML);
            // console.log(document.querySelector("p").innerText);
        },
        //2.告诉Vue的实例对象,将来需要控制界面上的哪个区域
        el:'#app',
        //3.告诉Vue的实例对象,被控制区域的数据是什么
        //专门监听数据变化的
        watch:{

        },
        //这里就是MVVM中的Model
        data:{
            msg:"小猪熊",
            isShow:true
        },
        //专门用于存储监听事件回调函数
        methods:{
            say(){
                console.log("say");
            },
            change(){
                this.isShow = !this.isShow
            }
        },
        //专门用于定义计算属性的
        computed:{

        },
         //专门用于定义局部组件
        components:{

        }
    });
</script>
</body>

本文链接: http://www.dtmao.cc/news_show_150055.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?