00:00
好嘞,各位同学。那咱们呢,刚刚讲了一下子sweater这个插件的一个基本使用。咱们的屡屡啊屡屡他都要干什么,咱捋捋啊,第一步干啥?来看这第一步,你看咱就捋捋啊。第一步。你是不是要引包对吧,当然你要引入相应的。GS,还有CSS,这不就是咱刚刚做的第一件事,你没有他做不了事。对不?第二步你页面当中结构得有,第二步结构得有。对吧,第二步页面中的结构。结构你务必要有,而且类名你别给我瞎改,人家叫什么你就叫什么。那第三步干什么?是不是初始化,咱外per的实例,给它添加成动态的效果。对不,所以说第三步,哎,第三步,但是一定要注意第三步的前提是什么?是页面当中,页面当中务必要有结构,你才能做的一件事就是啥,就是这个new swaper的实例。
01:15
对不,那说白了就是给咱的轮播图添加动态效果。对吧,这几步能记住吗?好嘞,那咱给他捞走,咔嚓跟着C。好嘞,那回到咱的项目当中。走,老师问的第一件事儿,引包,咱能引吗?咱全都给它折上。就是现在咱想引包,你能引吧,你引不了,为啥你没有外。对不,那所以说回到咱的笔记当中看,这这是第五个。就是咱们的list con container组件的开发的重点。那首先说第一个你要安装swaper,哎,就是安装。
02:06
SWIP插件。但是这里一定要注意它最新版本。是几是六,但是你要注意安装六版本可能会有问题。老是言策。所以说呢,咱们用的不是六版本,安装的是啥,安装的是swaper的五版本。OK吗?所安装的指令是cn PM install、杠杠C谁swaper at5,一定要注意是五不是六。一定要切记。那所以说咱们安装一下走,你好嘞,CD。走CLS cn PM in到刚刚save at啊,错了,S wiper at5就这能不能记住,一定要记住是五版本的。
03:01
OK,不,所以说咱们回首回到package点杰森当中,咱们看一下有没有wap,有是不是五版本。OK,那咱们就回到咱们的list container组件当中,咱去写写这个轮播图。来老师都把这先给你折上,这都给你折上,这都给你折上来,咱刚刚也说使用swaper的这三个布,你看吧,第一步干什么引包。引入相应的GS和CSS。老师问你。老师问你啊,咱引包了吗?没引的吧?那所以说咱们得引包,你得在当前组件当中是不是得引包,引这个wi。对不,还得引CSS,那咱来吧。Import,谁swap啊swaper for从谁这引,是从swaper这引。对不,哎,他没提示啊,没提示就很怪老师再给它摁进来。虽然写的对,但是我还想让他有点提示啊,走。
04:03
这没问题吧,是不是相当于引包?对吧,那以及你还得引啥引样式,但是样式这你先别着急来,你先看一下咱们的这个项来看这。这个样式呢,老师呢,得让你们有点就是远瞻性,你看这儿啊,老说你你看这儿。这块是一个轮播图。你看底下这是不是也有轮播图,就这将来是不是也是轮播图。那我问你,它两者都是用sviper搞的,我问你样式是不是一样。就这能不能告诉老师是不是一样的。你看嘛。咱看下上线的这个,你看这儿啊。这是轮播图。对不,这也是轮播图,老师就问你,你看它的样式是不是一样,色儿都一样,你看吧。哎,样式是不是一样的,是一样,给老师扣个一,你看样式是不是一样。对不,那所以说啊,你这个样式隐。
05:03
你就别在这引了,在哪儿引,你在入口文件引。因为在入口文件相当于你别的组件在用的时候,是不是样式也全都隐了。对不,那当然你在这每个组件单独引它也行,就在这儿就专门引那个swaper的CC的也行,但你要用远瞻性,你看底下这是不是也在用S外per的钥匙。所以说你就在m.GS当中,你把人家的样式给引进来就行了。对不,所以咱这搞一下引入谁,是不是引入,哎,引入咱们的swaper的样式,那将来我管你是在哪个组件当中呢。你的外per样式将来打包的时候是已经打包进去了,你任何一个组件都可以用。对,不说咱引吗?引泡老师问你引样式用写什么?A from b吗?诶,老师问你样式用这么写吗?不用吧,你就只是引进来就行。Inport,因为你想样式,它也没对外暴露。
06:02
这能懂不?注意这能不能懂,因为我不知道你们以前有没有讲过这个引入样式,引入样式你不用引port a from b,直接引就行,因为它样式也没有对外暴露。对不?所以咱们也要来引引谁,是不是s wiper?它没有提示,按提示s wiper文件夹下的。CSS下的。没提示的叫做swap.css。OK吗?所以说你看引包不就完事了。OK吗?所以说你看引包已经有了,该有的GS该有CSS都有了,好,那第二步该你是不是得有结构,但老师问你,咱们这的结构是只有一个图吗?你看这咱的这个结构当中,轮廓图当中是不是只有一个图?那老师问你,咱的轮模图应该是一个图吗?不是吧。诶,不是吧。你是不是得便利,你从仓库当中捞的这个数据,把这四个图片。
07:05
把这四个图片,你是不是都得遍历出来?对不对,那这样结构是不是才是完整的。就这能不能懂list contain当中这个轮播图的图片不是一张,它是四张,所以你得动态的遍历出来,便利出来,是便利出这四张图片。那所以说你这你不能这么玩,这么整就完事,就结构不完整。所以说你看咱数据是不是已经有了,你看这。咱数据是不是已经有了,叫banner list,所以说咱们得便利,哎呀,妈错了KC。你得便利的,因为这块的力不是一张图,是四个,你得便利,所以这玩意咋整很简单,V杠放。对不?那咱们这块叫什么?咱们叫做car car o us,第二,Index老师告诉你,Car这个单词本身的意思就是轮播图。
08:02
以后再见到car这个单词,记住是轮播图。诶,我再说一遍,这个单词是轮播图。OK吗?当然,你叫啥都行。便利in,记住,别忘记有空格不能连,连是一个关键字in in它。对不?当然你得有K冒号KK为什么为car CR us car的ID?我记得是有ID的。对不,那所以说咱们先看,你看现在是应该是有几个图,有四个图。对不?当然咱们现在看不见,你现在点他也没用,因为还没有写动态的那个newwaer没有动态。那咱们可以审查元素,你看视下来是不是也不用看,一定是四对不,那以及图片的名字你是不是也得替换,这咱换成谁冒号。冒号谁冒号,咱们的应该是car啊c o usel下的这个这个对象的点点谁,咱们看一下点谁啊叫啥呀,忘了。看一下子car点,你看是不是有ID点叫做image URL。
09:05
对,不是不是就是它。对不好,那你看是不是就来了,当然现在老师它只是静态,有动态的效果,为什么没有动态,因为你没有newswe的实力。对不对。诶,这能不能懂,同志们。这个能不懂,现在它只是一个静态啊,只是一个静态。懂不,为什么不能点,是因为你没有newwaper那个实例呢,因为newwaper实力才是给他加上动态的效果,你才能点。对不?那接下来老师的问题是,是什么?就是咱当年写的这行代码啊,其实就是这行代码你放在哪。哎,就是你外这个实例,就就是这行代码,你这行代码在咱们VE组件当中在哪写。就这行代码,老师直接给他粘过来了,你不去观望,你看这在哪儿写。这就很尴尬。比如说你引包有了样式,有了结构。
10:01
有了,你说这玩意儿你有外实力在哪搞?回音在哪儿搞放在哪?哎,知道老师在干什么吧?比如说现在你结构样式引包都有了,你你有那个waper的实力,你在哪有。那为什么呀?为什么在mounted当中?因为咱们说过你现在这种想法是对的,你想你在想在mon当中为什么,因为咱们说过monkey是什么,是组件加载完毕,是不是结构有了,咱当年是不是说过。诶,对不对,而咱们应该知道newlaper实例之前,你结构必须得有,就是放在mount当中对不对。喂,对不对。你就先把这先给我想走,咱正常想啊,就像你们这种想法是对正常想是不是应该放在mon当中,Mon当中是不是挂载完毕,渲染完毕了。
11:03
对,有的同学说结构有了对不对?你正常想是不是放在mon当中,好老师就放在mon当中,但你看一下他为什么。你看老师是不放monkey当中了,看着啊。我给它格式化一下子走,那咱们看看行不行刷新。来看一下行不行。不行,为啥?你就按照咱们的那个步骤来啊,你得先明白啊,先明白是不是引包引样式,有结构,你有外的实例,这三步都没问题,但是你会发现效果没有,那你猜猜它为什么呢。那现在老师点他没用啊,现在老师点他没用,一点用都没有,根本没有动态效果,那也就是说某一个环节出问题了。对不?所以咱们就先别把它放在这儿,咱得琢磨琢磨为什么。很简单,还是那句话。你想想,咱刚刚老师说过,就是在new s wiper实例之前。
12:09
哎,之前你看着之前。哎,之前老师说过,页面中的结构必须得有。那你现在发现一件事,什么事就是现在。老师把new s wiper的实例放在放在monkey的这里,你会发现不行。那你猜猜为什么呢?还是那句话,为什么呢?为什么呢?那一句话,结构还不完整。对不?说老师怎么可能啊。Mon老师以前告诉咱们,Mon的代表组件挂载完毕,代表结构已经有了,这句话是对的,但前提你要琢磨,咱有一些数据是动态的,谁就这。
13:02
老师,再说一遍。看这老师一点给你们解释。你看这儿。老师把它给它折上来。说老师宇哥带我们的时候说过呀。Monkey的代表的是,呃,挂载完毕。对不对,哎,你想想你想想啊,你先先先别想这想那你就先先琢磨这件事说诶豪哥以前宇波教我们的时候说monkey的代表啥,代表的是挂载完毕。挂载完毕是什么?是结构已经有了?这句话是没毛病的。OK吗?但是你要注意一件事。咱们现在这里面有一条语句,它不正常,谁V杠放。你在变,你像这块的结构是动态生成的,为啥前提服务器的数据返回之后,我才能微刚放,才能便利。这个能不能懂。
14:00
就是宇哥以前跟你们说那句话是对的,但是前提没涉及到啥,没涉及到A设没涉及到异步。这能懂不?你像以前宇哥说啥说哎,Mon代表组件挂载完毕,那页面当中结构一定全都有了,这句话是没毛病的,但是你一定要注意,咱们的这个结构当中有一个地儿它不正常,就是就是这个V-for。他在便利服务器返回的数据,服务器的数据有了你才有结构。对不,咱们可以验证。你看老师问你banner list捞这个数据是在哪捞的?我问你是不是在这捞。但是你要琢磨这个数据是哪来的,是不是从V叉来的。那发请求是从哪发,是不是从这发的?你看老师给你打印一下子,你看我给你打印一下console第2LOG1这是啥?这是咱的,呃呃组建的mon mount。对不老师在这给你打印。你看。
15:00
执行完100行代码之后,老师问你啊,执行完第100行代码之后,是不是派发action。诶,看这这块给我跟上啊,我把这我给你讲的明明白白透透吹彻的看这。Monkey代表是不是组件挂载完毕,那老师在第100行这我打了一句话叫组建的monkey没问题,你接下来是不是派发了一个action。看这儿。你是不是在仓库当中派发了一个action,没问题,咱们找到home当中的这个view找这个,你看这。那你一派发action在这儿。你是不是要获取轮播图的数据?老师,在这我给你打印一句话,cons.log干啥?是在向服务器发起阿贾克斯请求,获取轮播图的数据。对。那捞到数据之后是不是修改AMU是不是在这呢?老师在这再给你打印一句话,cons.log,这是啥?这是在修改仓库中的。
16:09
Final list的数据。对不对。对不,老师都给你打印出来,你看啊,咱再回到这个组件当中,你看这。呃,咱那个组件是哪,是view下的这个绿色container,这对不。那也就是说你这块的第101行代码,你别误以为说this.dollar start.dispach它是个同步语句,它不是它是一句。对不,什么叫一,他是不是在发请求呢?对不,那咱们刚刚是在这要初始化啥conso.lo咱们要在这儿初始化swaper实例,就是初始化swaper的实例,你看一下子有没有问题来,老师就把这个顺序给你打印出,你看有没有问题。什么问题,你自己看。来老师先把没用先先给它去掉啊看这。来,你看他先干什么,看着。
17:01
组建的mounted没问题,是不是先执行它?接下来你看他第二步就直接干啥,看这啊,是不是再向服务器发起阿贾克斯获取轮播图的数据,这也没问题,但是你看这直接初始化外per。但是这有明显的一个问题,什么问题?服务器的数据回来了,但是我连仓库的数据他连改都没改呢,那你说咱组件身上还没这个数据呢,他就开始初始化swaper,你想组建实力身上都没数据,哪来的结构,你没结构怎么可能初始化swa实力。就这能不能绕过来。就这里,能不能绕过来?给老师个回音,你看这,老师再说一遍啊,你看这。老师再给你刷个新,就举个例子。你在初始化外per之前,我问你仓库当中的数据是不是还没完整呢?
18:00
你仓库当中的数据都没完整的,你的组件怎么可能捞到数据?你的组件的结构怎么可能是完整的?不可能,因此你在这newwaper它一定是不对的。哎呀。对不对。你看老师都给你打印出来,你自己再瞄一眼,我再给你刷新几遍,你再瞄一眼,你自己去看。就这儿能不能懂,因此咱们在这儿newper它是不对的。为啥?因为组件还没有数据。对不?你组件连数据都没有,你怎么可能结构完整,你结构不完整,你怎么可能new,就算你拗了它也没没用。就这能不能懂,你要明白dispach,一个action,它做了很多活,它是不是要触发参库当中的action函数,要提交mut。对不对,在修改仓库当中数据完了,咱们主页是不是捞数据完了再微高放动态展示数据,那就相当于服务器的数据都没有呢。
19:08
不是不是复据,就是连仓库当中数据都没有呢,你组件怎么可能有,你组件没有,你怎么可能V-for给我便利出结构呢?你没结构你怎么可能在这儿给你有step实力呢?一层套一层,就这能不能懂?能懂的给老师扣一个六。所以说咱当年你在这儿newwe的实力是不对的,为啥?因为服务器的事务局还没回来呢?不是,不是服务器数据,就是组建实际身上还没数据。你结构一定是没有的,没有它一定是不行的。哎哟,我的妈呀,这上课是真好。这个嗓。智能同步,那你说咋整?死齐了。咋整?老师把这块测试的我给你干掉了,你晚上给我练习的时候给我加上,如果不懂把这块给我打印出来。
20:01
眼睛骗不了任何人。对。所以说现在的问题咋整?死齐了说老师还能放别的地儿吗?来,我看谁有想法。说白了就是因为遇见了一部语句,导致了咱们结构不完整,因为你这块微杠号便利的是服务器的数据,所以说不行。啊。你看这有的同学说的是up date。Update呢,你这句话说的也对也不对啊,其实老师告诉你,你放update咱可以测试一下,你看可以测试一下。说update的是啥来着,老师问你。看这啊,首先说update是什么?是不是当数据更新的时候是不是会出发,朱老师我知道了,放哪update,咱们先看update行不行,你看嘛,大胆的去想update来看这老师扔在这里走刷新。来咱看一下,你看行不行。
21:01
来看一下行不行行。对不?哎,你看老师给你刷一个after行不行行。看这。看这儿。诶,老师问你update应该知道吧,是不当数据发生变化的时候,比如说由一个空数组变成一个那个那个,呃,有数据的时候是不是更新是不就有了,但老师告诉你不能放,这为啥。如果说啊,如果说你这个组件实力,将来还有其他显示的数据。就举个例子,你该想的多一些,但是放update现在目前而言是不是可以解决,如果说你放在update当中,老师问你啊,假如将来它还有想式的属性,你将来某一个属性值发生变化的,我,你updated的方法是不是还会再。你再牛,是不是又在扭,没必要。这样懂不?哎,这个能不能走。就是你要考虑强,就是现在你放在FD当中行不行,行,但是将来假如再有别的数据,你只要数据一更新,你是不是又在new了。这能懂不?
22:00
这能不懂,所以咱们不放在updated,但是说发update,说同学老师说我都看见了,行啊,咱先不用update。走,再琢磨琢磨。你看老师怎么整,咱先来一个笨方法,我告诉你咱是有最后最完美的解决方案,我告诉你最笨的方法是啥,来,老师把打印,我再给你打印出来,你看这样。cons.log log啥呢,叫做mont,早知道不删了,对不?你看老师在这这个打印,我再给你打开啊,我再给你写上。找到咱的仓库,找到后在这老师把这句话再给你写啊,你看老师给你来一个笨的方法,就这都能想通的conso.lo。哎,获取服务器的数据。对吧,完了这块呢,老师呢,也给你打印上,早知不删了啊,这块老师给你打这个修改仓库当中数据。就是修改仓库当中的数据。来看这。老师呢,先写一下子,先写一下,就这块为什么不行,就直接放,为什么不行,就是这种写法为什么不行,他刚刚说了一句话,因为。
23:08
第四。派当中。哎,当中涉及到了啥异步语句,导致咱们V-for便利的时候结构还没有完全,因此不行。那你说老师我告诉你,你说怎么行,你看这样别说话,你看这样,老师放一个定时器,不是放个延迟器。这是笨的解决方案,延迟器呢,老师呢,给他来个两秒的时间。你看也放在monkey当中,你看老师在这,我再给你打一条can log。这块写个啥呢?就写一个叫做a new s wiper的实例,你看老师这么写行不行,你看啊,咱先来个笨方法,你看刷新。
24:00
来。你看这种写法行不行,你看啊。哎,你看啊,盯住了啊盯住了,你看老师这么写的啊,看这。呃,这个时间我要长一点,两两两秒吧,时间更长一些,两秒你看这样。更直观。看这走。Mounted。获取服务器的数据,修改仓库当中数据,那咱组件是不应该的数据,最后是不是在new外就这么搞行不行?看这。这代表代代表是不是mount执行了。向服务器发请求了,仓库当中数据修改了,以及咱们组件实例应该身上应该有数据完,这回咱们在news外实例,你说行不行,同志们。哎,老师你说行不行。给老师回,就现在放在这里行不行?嗯,行不行,是不是又放了个异读语句啊?各位可以给老师扣个一,就是咱们可以这么搞,通过一个定时器去解决。对,当然这也不是咱最终的解决方案,这种解决方案也不好。
25:02
对,不,但是你想就这么搞行不行。你就还是那句话,工作的时候咱管你怎么地,工作的时候你记住先把功能先给我完事。虽然他说有bug,你看吗,有什么bug,两秒之后才有那小点点。你看你认真给我看,认真给我给老师看看是不是两秒之后才有小点点。但是别管别的,我现在这么操作,我是不是能把它搞定。对不对,你先别管三七二十一,我现在是不是能把这个功能搞。所以说最笨的方法,给我放个定时器。定时器这里一定会保证啥,保证服务器的数据回来了,仓库的数据有了,组建实力,身上有数据了。而且大概率咱们的结构都有了。这种懂不大概率,因为两秒的时间不短了,大概率的它已经有了。OK吗?就这能不能懂?但是说这种解决方案不好,为啥你看老师还是那句话,那句话你看。这个小点点两秒之后才有,你看啊,两秒之后才有。
26:04
我可以包,但是你看能不能正常用可以。对不对,当然这种不是咱们最终的解决方案。啊也可以,因为你只要是个一步一句就行,但是不一定啊,还是那句话,不一定你写个零,你看啊,真不一定,你看吧。你看吧,你看吧。现在老师你刚刚说的定时器不给时间也行,老师给个零他都不行,看没看见,说白了结构是不是还是没有。诶,对不对,对吧,所以时间给他长一些,咱就给他来个两两秒两秒的时间足够,或者老师一秒行不行,一秒测试吗?你看一秒行不行。你看一秒行不行,走你看一秒行不行,行不行行。对不?对吧,因为发请求它是耗时间的,你威刚放便利他也需要时间。但是一秒的时间足够了,就这能不,但是现在这个效果很不好。为啥太难看了,两秒之后才有这个小球球?
27:01
这能不能懂,但是这种解决方案行不行,行为啥你工作的时候,咱别管这种方案是不是最完美的,但是说你至少这个功能你能保证它继续下去。这能懂不?哎,这个能不能懂。能懂给老师扣个六。但是咱最终的解决方案不是用它,但是这种方案行不行,行,你工作当中咱管他别的,你先把功能先给我跑起来。对不对吧,但你看有个bug,什么bug,你看顶上这个萝卜图好了,你看底下的也跟着好啊,底下也没有是吧?啊底下没有像底下没有那就是最好,对不,但是呢,老师得说呀,还有一个小小细活,咱要琢磨你看。老是点小球,它不切换你看吗。正常说你看你点左右按钮,你点左右按钮,左右按钮是切换图,我点小球它不切换。看不看见?看没看见,看没看见,看见了吧,我老实告诉你,就一行代码找他的这个这个这个文档。
28:00
Sniper。你看在piper的这个文档当中啊,找它的API文档,它有一个叫做分页器,因为这个小球叫分页器,看着这个小球叫分页器叫page。OK吗?咱加一个配置啊,你看咱找一下子叫做page nation找一下这呢。它有一个东西叫做啥叫这叫click able,能不能点它默认是false。OK吗?默认false,你把它改为true就行了。OK吧,叫做click able,咱这儿来给它复制一下,叫click able们复制一下,咱找一下五的啊。来,我找一下五的文档。点三初五看文档走找一下page page nation来,叫做clickable,看这吗?你看吧,是不是点小球也能切换。对吧,这些细活你都要做了,OK吧,叫做click able为true,但是你要注意它放在哪,你看人家教你了,放在哪,放在是page nation配置对象里面。
29:02
对不,所以这玩意你往这一加就行了,就搞定了,往哪加,往page里面一加,对不,这是干什么的,违法归处就是点击小球,就是点击小球的时候也切换图片。就是这回咱们看一下,你看老师刷新看这啊,你看我点按钮是不是切换图,我点小球是不是也切换你看。对不,所以这些细活一定要做,其实啊,你们要找爸,你看老师线上的这个就就就就上线的这个就点小时就点不了看吗。看吧,上线的这个点小数就点不了。OK吧,所以咱给他加上就一个配置对象没啥。OK,不,但是咱们现在老师说这种解决方案不是咱最终的解决方案,就到这儿,能不能懂,能懂给老师扣一个一。到这儿能不能懂,能懂给老师扣个一。
我来说两句