00:00
好嘞,各位同学。那接下来啊,咱们要做的另外一件事是什么呢?老师呢,先给你们说说。咱们先看一下子已经上线的这个项目。那首先说咱们已经做完了一件事什么事,不管你点击一级目录还是二级目录,还是三级目录,我会把相应的产品的名字以及ID会给设置路由组件传递过去,这是没问题的。而且这件事儿咱们已经做了。但是这里要注意一件事,现在老师所在的是search页面当中。也就是说搜索页面看一下啊,一定要注意是搜索页面。那么在搜索页面当中,你会发现哪一个组件又被用到了,你看吧,哪个组件。是不是咱们的type NAV这个全局组件在search路由当中是不是也出现了?
01:01
而且这个type NAV全局组件,它在设置路由当中,你会发现,诶,它是有显示隐藏,显示隐藏的效果。而且你要细点心,看它是有动画。是不是有过度动画?这儿能不能看出来可以了。那所以说咱们接下来要做的一件事是什么?是要在色路由组件当中。咱们先把人家的这个商品分类的三级列表,咱给他搞定。那所以说啊,来看这儿。那咱们呢,去找到咱们相应的这个色模块。Search模块呢,应该是在views下的这个search当中,那当然咱们这里现在都是空的。这是咱当年测试的一些数据,这里咱就不要了。
02:01
咱就写上一句话。这是什么?这是哎色模块。对不?那老师呢,先写上一句话叫做哈哈哈对不?那当然底下这个prop咱也先不要。OK吧,好嘞,那咱们先看一下咱们的这个,这是没问题的。对,不,那么在search模块当中,它也有一个type NAV。那所以说,而且要注意这个老师做一下笔记。来看这儿第一个。那首先说咱们要搞什么?要开发search模块中的type type。NAV这个商品。分类的这个菜单,而且要注意啊,咱刚刚也看了它是不是有一个过度动画的效果。
03:00
对不,咱一点点来,那首先说这是当前的色模块,他需要用到type NAV老师问你们,咱们还需要在这引入吗?需不需要在这引引炮的什么什么type NAV还用啊?用不用不用的给老师扣一个二。这里一定要注意啊,Type nv已经是一个全局组件了。咱们不需要再引了,可以直接用,那所以说啊,咱们在这儿来个谁type。谁呀,NAV走你。所以说在设置模块当中也用到了type NAV这个商品分类的组件,那你看刷个新来。咱们呢,我看一下子是不是单词写错了,这应该是小写对不?那咱们看一下子走,你是不是就来了。那这里要注意啊,这是当前的测试模块,哎,这不就是咱的商品分类的这个三级目录吗。
04:07
但是你要注意啊,现在的效果对吗?可不对。首先说。他在home首页当中,它应该是默认就展开的,而你在search路由当中默认应该是收起来。而且鼠标一上一下,它是有显示与隐藏的效果的。那老师问问你们。你说显示与隐藏某一个元素,要么用V杠受,要么用V-if对不对?对不?咱先别管home怎么怎么地,你就想想他在search当中,你看这样它在当中。它是不是应该有显示与隐藏的状态?那所以说要么是V纲受,要么是V-if,谁是这个type NAV组件。
05:03
对不,那所以说啊,咱们得找一下这个type NAV这个组件。因为它有的时候时而显示,时而隐藏。那所以说咱们给咱们的色路由组件就给它关了,去找一下谁去找一下咱们的type NAV。是不是这?那这里的代码呢,已经很多了,老师呢,先把没用的地儿呢,我先给您注释上来,看这全注释上,把这样式啊也给他注释上,省得看着多他心烦。咱们就琢磨一件事啊,老说你啊。这个是咱们的商品分类的这个列表,对不?哎,说白你这合着是不是就是它。是不是这个带so的,这个是不是咱们商品分类的列表,老师问你啊。就这个商品分类,它要么显示要么隐藏,我问你,你能想到谁想到的是V杠受。
06:06
或者是VG if是不是都可以?那么默认应该是隐藏的,那所以说你看老师给你来一个啊,叫V杠受,比如说咱先写死为啥为false,那咱们先看一下子,你看走是不是就隐藏了。当你鼠标一一上,再咋的,再给它N儿整下来。那所以说啊,咱们通过V杠受去控制着它显示与隐藏。那所以说咱们需要用一个响应式的属性控制着这个商品分类,到底是显示隐藏。那所以说咱们在这儿再给他来一条数据,就是这。老师给他起个名叫什么叫瘦?那默认情况下老师呢,让他怎么让他出,让他是显示的没问题,那你看啊,咱来那就是V杠受。
07:01
为什么呢?为受,那现在相当于是不是上来是不是就展示,这是没问题,你看吧,上来就是展示的。对不,那以及首页当中上来是不是也是展示。对不对啊,有的同学想到了mate标签可以吗?啊,这个可以啊,当然咱用的不是这种套路,你得学学别的套路,这能懂不?那首先说啊,它在后首页当中,它现在这个值你看啊,老师给你们看一下看这。把开发者工具呢给它打开,咱时时刻刻标记一下,你看啊,现在的type nv这个组件实习身上是不是有个叫兽的属性,是不是真是不是展示没问题。那当从home跳转到色尺的时候,你看一下子。它的这个属性值是不是还是处。对不,那所以说你应该注意一件事,什么事。当。进入到当从首页进入到search的时候,你要注意这又是一个type nv组件的实例了,它又会经历哪个?呃,生命周期函数呢?又会经历monkey的构造函数就是这。
08:13
你看嘛,老师呢,在这呢,我给你打印一下子cons.log对不,我是。Type NAV叫啥构造函数啊,或者叫什么叫构造,叫做挂载完毕对不?哎,挂载完毕你看这个mount是什么,Mount是组件。挂载完毕,咱们先看,你看老师先回到首页,你看啊,在首页当中monkey是不是会执行一次。对不,那当你从home跳转到色纸的时候,一定要注意,那又是另外一个这个type nv组件的实例了,它的mount也会再执行一次,就这能不能走。这能不能懂?那也就是说你从home跳转到色的时候,还会再执行一次monkey。
09:05
当你一进入的时候,我可以怎么办?我可以让咱们的这个兽的属性,让它变成啥,变成呃,False。对不,所以在这里呢,咱就可以怎么办,可以这么办。哎,比如说当。呃,组件挂载成功啊,组件挂载完毕。那咱们可以怎么办?可以这么办,让咱们受的属性变为false。对,不就是说这点show等于谁等于false。对不?但是你这里要注意一件事儿,什么事儿你要这么写,你看现在进入到测试当中是没问题的,它是隐藏了,你看咱可以刷新,咱得看是不放,是不是隐藏了,但是你要注意一件事啊。那如果说这个type nv是在home路由当中来看,这你在路由当中它是不是也经历了monkey的这个这个构造函数,而它的值也是也是false。
10:03
所以说你这么写严谨吗?不严谨。这儿能不能懂,同志们。就是你现在呀,只要组建一挂载完毕,我把它值为false。你这么写,那就一棒子全打死了,你home当中是不是也会进行wanted了,是不是也是false,你进到search当中是不是也是false,是不是全隐藏了,所以说你这块呢,不能这么写,你还得加个条件。什么时候他才能没放?这样懂不?如果你现在这么写就坏了,就一棒子全打死了,不管是home还是色,那都是上来全啥false。那所以说你这块得判断判断什么,判断这个type nv它是在home路由下还是在search路由下。如果是在设路由下,它才隐藏。这儿能跟上不?就这能不能跟上,现在咱们是一棒子打死了。不管你是后。
11:04
对不,不管你是home还是咱们的这个这个,呃,SEARCH1棒子打死都是false。这能不能懂,所以说咱们这块的代码外层你得加一个判断条件,得判断啥,判断当前的路由是不是色置,如果是色手我才让他放。对不,那所以说这块可以怎么办,可以这么办,来看这。找你也就是说如果不是啊,Home路由组件。那啊路由啊,哎,路由组先干什么,那么讲咱们的type。NAV进行隐藏。那很简单,那不是home,那就是search呗,就说如果this.dollar root,这不可以拿到路由信息吗?点谁点PA?如果不等于杠home,那不就是search,那我让他一进来,我就让他怎么隐藏this.show等于谁,等于false。
12:09
所以说你看这回有点感觉了,你看这儿。现在老师回到首页当中,你看它现在的值是啥,因为你看初始值是不是处。看这初始值是不是错,虽然经历了monkey,但是monkey当中这个if它没有走,所以你看它是不是处,你看嘛。对不,那如果你进入到了色路由当中,它初始值是处,但是又经历了mount,是不是又修改了它的值,值为false,那这回是不是就隐藏了?就到这儿,能不能跟上?能跟上的给老师扣一个六。能不能跟上?也就是说咱们的这个判断,它初始值是处对不?也就是说我不管,也就是初值处你看吗。
13:00
看这初始这不就处吗?对吧,虽然monkey也执行了,但是这个if他没有走。对,不,但是如果你进到色史当中初始之处,但是monkey当中这个if走没走,走了那不就隐藏了吗?对不?那接下来剩下的活不就简单了吗?你鼠标一上。一下一上一下,是不是让咱们的这个商品分类菜单是不是进行显示与隐藏。对不,那所以说给全部商品分类,给它加上鼠标移入和鼠标移除事件不就行了吗。对不,那所以说咱们找一下看这。看这咱们找一下吧,首先说这是不是有一个,哎,看这吧,那放在这儿也行。因为咱们这块当年鼠标移除是不是给父亲了。哎,这个还记不记得。就当年咱做这个效果。鼠标移除是不是进行了世界委派,是不是给了他的那个外层的父亲给他两者的父亲是不是给了?
14:02
对不,那所以说啊,你看这儿,你看这儿。老师呢?在这儿我再给他加上艾特。Mouse enter,当你鼠标一进入,我要干什么?我是不是要把咱们的这个type nv是不是给它显示出来,是不是得把那个值变成true?对不,那所以咱写一个吧,叫恩特受。对不,那有这个方法吗?没有没有怎么办,好找你咱来一个。来一个方法,那这个老师先把没用的地儿我先给他折上,找到method。那这块是什么?写一下就是当鼠标哎移入的时候,那么让咱们的商品分类列表进行展示。对,不叫什么,叫做N受。那你要干什么呀?你是不是要把咱们的这个响应式属性控制着,它显示与隐藏是不是得变成真?
15:02
对,不就是这点show等于啥,等于除。那咱们回首先看一下,你别自己呃自以为就OK了,一定要边测试边搞,你看鼠标进入走是不是出来了。看这,但是你回去他回不去了,所以说再给他来个鼠标移除,事件移除是不是再变为false。对不,那鼠标移除实验咱有没有有当年还记不记得这。当年咱们是在home当中做的,当鼠标溢出让开,Index为负一。有点印象吧,就是这个鼠标艺术咱写过了,只不过没有写回调。那所以说咱们这把这块的代码咱给它搞掉,给他写个函数叫啥叫做leave Le leave手。对不,那你给他来个实验处理函数不就行了吗?就这块咱给他来一个,就是当鼠标离开的时候,让商品分类列表进行啥隐藏。
16:03
对不,所以说叫啥叫做,呃叫做叫做叫做例手。咱们先把这行代码先搞上,就是这点current index等于负一,一离开,是不是让咱们一个索引值为负一,这个还有没有点印象?就咱刚刚在这是不是剪去了一条代码叫Z点开等于负一。就是鼠标在那当年在后面当中写的,当鼠标一除为负一,负一就是谁都不亮,这还有点印象吧。对不?那当然你再加上一行代码就行了,啥点show等于false。对不?对吧,那所以说啊,咱们先看一下,你感觉是对的,但你看他你得测试。你看咱回到色路由当中没问题,你看啊,鼠标一入。鼠标移除鼠标移入,鼠标移除没问题。对,不但是你看你回到咱们的首页当中,你看啊,鼠标进入没问题,鼠标移除,鼠标进入鼠标移除,鼠标进入鼠标移除。
17:05
对不对,那也就是说啊,咱的这个鼠标进入和离出离开也得加条件。这能懂不?也就是说鼠标进入和离开应该是在谁当中才有,是不是在设置当中才有?而在咱们的home当中,不应该有鼠标进入和移除事件。就这能懂不能懂的给老师扣一个六。能不能走?所以说咱们这呢,也得加一个判断,什么判断就在这,就是说如果你的this.dollar root.pa不等于杠后。那就是search search我才进行操作。后我就啥都不管了。对不?所以说老师呢,在这呢,给你写这块是在干什么,是不是在判断判断,如果是search路由组件的时候才会执行。
18:03
对不?其实这块可加可不加。你看老老师跟你说,就这块儿进入的时候可加可不加,你看吧,就举个例子,现在老师在后页当中,我鼠标进入,我让他展示是不是正常鼠标移除,我没有执行吗。看这儿。对不对,当然你加上判断那更好理解,你不加也一样,就不加,你看我鼠标进入。老师问你有没有执行,有,但是它是不是展示呢?那我鼠标离出离开的时候有走这个if吗?没有吧。对不,那以及你再看,再回到咱的这个这个设置当中,你看鼠标接入,鼠标移除,鼠标进入鼠标移除,鼠标接入鼠标移除是不是就完事。对不对。对不对啊。这个对,这个得放外面对吧,哎,这个得放外面。这个说的对,因为这个不管是在home还是设当中,它都是你鼠标一移除它没了啊,这个说的对,没毛病。
19:02
没毛病,对不,就这儿能不能懂。老师问一下,就这能不能懂说老师你这个这块为什么不加判断,鼠标进入的时候,因为你想想,就算在首页当中,我鼠标进入它是不是也是展示。这能懂不?鼠标一开它没有走这个意思。对不,那当然你进到咱们的这个测试当中也是一样,鼠标进入我是不是展示,鼠标移开是不是隐藏。这个能跟上不能跟上的给老师扣一个六。就这个能不能跟上,能跟上的给老师扣一个六。对不,那当然有的同学说老师我在这就想加上,那咱就给它加上,其实你不加也行好不好,那所以说咱就给它加上,就说如果你的这点Dollar root点。PA不等于杠后,对不,那咱也给它加上。
20:00
好嘞,就是它。但是啊,要注意一件事,咱完事了吗,没有。没有。因为什么呢?因为你看线上线的这个啊,你看人家这个效果啊,你看这人家这个效果,这也是老师写的,还说人家就是我写的效果,你看走。走走走,是不是有一个过渡动画。哎,看这是不是有个过渡动画。对不,所以说啊,咱这玩意儿没完事儿呢,咱还要做另外一件事,什么事,就是过度动画的效果。对不?那过渡动画老师问一下你们还记不记得?过渡动画,这是老师接咱们班基础应该是基础,最后一天的时候接咱们班吧,我是不是讲了过渡动画。对不?过度动画的前提是什么前提?前提是组件或者是元素,务必要有。
21:01
要有谁?V-if或者是V杠受这样的指令才可以进行过渡动画。这个可别忘了,如果说你这个元素或者是组件,组件也可以进行过多化,你没有V-1V杠手想都别想,它是没有过度动化的效果。对不,而且过度动画咱们应该说过。它有两个大阶段,就是进入和离开阶段。说白了就是开始啊,就是进入和离开阶段,而进入阶段又分为什么?进入的进入阶段的开始阶段,结束阶段和定义动画对不?那所以说你看是谁要有这个过渡动画,是不是这个三级分类的一个商品菜单。而你看回到咱们代码当中,你看啊。来老师把它给它折上来,这都给它折上,这都给它折上,你看这老说你你看看他。
22:00
我问你这个元素有没有V杠受的指令。有没有,有吧,那可不可以来一个过渡动画,完全可以。但是你别忘记了,你需要在这个元素的外面加一个,谁就加一个。对不,所以这里咱们要来个什么过渡动画,哎,过度。哎,过度动画。那所以说要写的要写transition t ion transition。对不,而且你看它包裹的那个元素是不是带有tion,是不是带有V杠受的这样的一个指令,就是它是完全可以有过渡动画,就是咱给他展管。对不,那这里老师呢,给他格式化一下,看得更清晰一些。那这块老师给他折上。就这块的结构能不能看懂可以吧,那你要写就得写一样式么,是不是得V杠什么什么对吧,V-enter v-enter to,还有什么V-enter active。
23:05
对不?那当然啊,你看咱当年也说,如果你这边写name,比如name咱们就叫就叫so,那你就不能V杠什么什么开头了,得是以so的杠什么什么开头。这个name还有没有点印象?就这个name还有没有点印象?如果你不写name,你写类名的时候是不是V-enter v-enter to when v-enter什么什么active,如果你写了so,就不用再写V什么什么了,就直接写这个名字,So-enter so-enter to,还有点印象不?有没有有的给老师扣一个六。有没有应该有点印象吧,那所以说咱们在底下去写一下咱们相应的类名,记住了,咱这个类名就叫salt salt杠什么什么对吧,那所以说咱们找一下子看这。找一下子thought什么什么这呢吗?这不就thought。
24:01
对不在最底下,这是不是有个thought,看这啊,老师把这块都该折的都给你折上,你看这这是不是有一个叫thought。对不,那所以说咱们这块给他来一个过度动画的样式过度。动画的样式记住了,样式是以类名开头的,一定要有点,你千万别忘你是写的是类名。懂不?别忘给我写点点呢?Thought杠,Enter,这是啥?这是不是过度动画开始的阶段?对不,这是啥?这是过度动画开始状态。对不,这不进入的开始状态嘛,对不写上是进入的开始状态。对不,那咱写嘛,比如说咱们看一下它这个元素是SSO,我看下它默认多高。我看一下子sal,你看so谁so不就是他吗?Sot不就是它吗?这不有个类名叫sot吗?我想拿高度做动画,咱看高度默认是多高,是不是二,呃是不是呃,461,看这是不是461。
25:06
这能看见吧,所以说咱们默认让它的就是进入时候的状态高度是导是零。对不,那再来点。Smart sound杠,Enter杠,To,那这个是啥?这个是不是过度动画的结束状态?啊,结束状态啊,结束状态当然也是属于大的,这个叫做进入的时候。对不,那咱们让它的高度是多少,我刚刚是多少,461吧,461劈叉。对不,那以及你还得怎的是不是定义啊动画的,比如说时间呢,还有这个速率啊,对不,你是不是得写叫点sort杠。Enter,杠XQ,对不?Transition transition是咱C3的时候学的,学了transition transform animation对不?那所有的属性两呃呃,0.5秒吧。
26:07
哎,0.5秒匀速lida。Li lida匀速,所以说咱们看一下子有没有过度动画的效果,看一下走来鼠标进入。有没有鼠标移除,有没有啊鼠标移除咱们一起。对不?那当然你可以写的更炫酷一些,比如说除了高度,你看老师再给他来个旋转。对不,开始的旋转的度数是多少,是零度对不?那结束的时候老师给他来个360度transform rotate 360DG,那咱们可以看一下,你看这不就是玩嘛,你看。走。对,不走,当然离开,没写对不?这个过渡动画就现到现在为止,能不能玩玩玩明白啊。就现在这个过渡动画能不能玩明白,能玩明白的给老师扣一个一。
27:01
就现在这个过渡动画应该能玩明白了吧。对不,那所以说咱这个旋转不要这旋转看着比较恶心啊,看着比较恶心,所以咱给它去掉。对不,那所以说你看到这儿不就完事了吗。对不?那当然离开。老师问你能不能写孤独动画?哎,老师问你离开能不能写,过渡的话也可以啊,但老师就不再写了。OK吧,好嘞。
我来说两句