00:00
各位同学大家好,下面呢,我们继续来学习voe中的新闻知识,之前呢,我们讲解了差值表达式,Voe中的指令,下面咱来学习voe中的生命周期。那什么叫生命周期?大家看这词应该很好理解,一个人的生命周期就是从这个人从出生到死亡的过程,而咱们的对象的生命周期从它的创建到销毁过程,所以下面再来说这个voe中的生命周期。那我们来看一下课件中这张图,大家看啊,首先我们这里是不是new了一个voe,就是new个对象,然后扭完之后,最后这里边destroy是不是要销毁,在这过程中表示voe的生命周期,而生物周期中它会执行不同的方法,或者说会调用不同的方法,那我们来简单看一下。首先第一个方法before created,还有一个叫,然后下面调用这个叫before mount,包括mounted,这里边有update,最后是这个这次创意销毁,这是里边主要的几个方法,而我们在开发中用的比较多的主要是两个方法,给各位详细说明一下,一会儿再来演示。
01:16
我写到图里边,给大家写一下vuee生命周期中的方法,这里边有很多,主要有两大方法,那我们写一下啊,第一个方法,这个方法。叫create方法,另外还有一个方法,这个跑道叫做mounted。这是voe中生命周期的两种方法,那两方法什么作用?咱们解释一下,Create的表示在我们的页面渲染之前会执行,然后mount的表示在你的面渲染之后执行,那什么意思呢?咱说明,首先说这个页面渲染,什么叫渲染?说的通俗点就是我的页面中有内容已经显示出来了,这个叫渲染,而create在你内容出之前会先调用create,当内容出现之后会去调用,这个叫mounted的方法,这是里边的主要两方法,那下面的给各位同学咱来演示一下这个效果,那我在里边做个演示。
02:24
首先我创建一个HTM文件,咱们起个名字,第八个生命周期,点HTML,把VE的相关代码咱们生成出来,然后生成之后我们写一下,首先在date中,为了明确,我先创建一个变量,初始值我就叫message。然后这个值我叫at硅谷,然后写完之后大家注意啊,下面咱就写这两个方法,第一个叫。Create注意方法不要写错,另外还一个方法叫这个mounted,我都写到这里。
03:02
这是两个生目周期的方法,Create的,咱刚才解释过,它会在你的页面渲染之前执行,Mount的表示在页面渲染之后执行,这里边大家看啊,Master有这个值,那我在这个div里边通过差值表达式把这值给它取下。这是咱们写的基本结构,然后写完之后咱就看一下这个方法的执行的过程或者执行顺序,为了明确我这么来做啊,首先我在里边呢,加上一个关键字叫第八个,第八个什么意思呢?它就类似于咱们在Java端打那个断点,当我们这行的时候,第八这里边代码到底行会暂停,然后咱需要手动让它才能往下执行,所以加上一个断点,第八个这里边也加上,另外再加上一个输出。点logo。第一个输出我就写这个。
04:02
这是第一个输出,然后第二个我写了一个叫wanted,写到这个方法中。把这个拿回来,然后下面咱们运行看一下这个效果,加了第八个就是加上了断点,这各位记住啊,前端中加断点,用第八个这个关键字进行实现,现在咱们执行看效果。到里边,但是执行的时候呢,你需要把那个F12点开,要不然断点它可能不生效,那咱点开,然后这里边重新刷新。大家看效果啊,各位仔细看目前断点是不是生效了,这个就是在这行已经停止了,然后停止之后下面呢,咱们可以往下执行,就是继续往下来执行,那我们看它的效果啊,现在在这行,然后你看啊,目前页面里边是不是只有插值表达式,它没有内容,所以这时候怎么做,它会首先执行,这个叫create,表示页面渲染之前会执行,目前到这里边它就出来了。
05:05
然后出来之后咱们往下执行,然后往下执行,我点这个。大家看你看啊,现在咱到这个界面中看啊,就目前你看啊,页面中有那种了硅谷,而我create也执行了,这里边也输出了,但是你看下面到哪里。是mon的,Mon表示在页面渲染之后执行,目前到这里边,然后咱再执行,最后再看控制台里边create,先执行,Mounted后执行,所以这是生命周期中的两方法,一个create,一个mounted,而两方法一般做什么的,我强调啊。比如说咱们页面中有那种内容,咱们一般是不是调接口得到,所以我们create里边一般是调接口得到数据,然后在页面中显示,Mounted表示显示之后再做一些其他的处理,这是两个生命周期中的方法,Create还有mounted,各位把这两个牢牢记住,咱后面会一直用到,特别是created会一直用到,它表示在页面渲染之前会先执行。
我来说两句