00:00
好的,各位从这小节开始呢,我们来学一下view当中呢,跟这个列表渲染相关的知识啊,这部分知识很重要,而且它还比较多,所以说呢,我拆成了好几个小节呢去讲,在这小节呢,我们先热热身,先做一个最基本的这么一个列表,把这个搞明白了呢,再跟大家说说什么key的原理啊,列表过滤啊,排序啊都怎么做,好吧,哎,回到课件当中,咱看看这个基本列表它长什么样啊,点开一点十,哎,就是这个图里的第一个图,各位就这个,这个你先不用看啊,回头咱也会做的啊,展示三个人的信息啊,首先展示的是人的名字,然后是人的年龄是吧?好来,回到代码中呢,咱简单写写总结性的东西,先折叠起来啊,来写一个固定的结构u Li里边呢,写Li什么什么名字,什么什么年龄,需要几个呢,三个,我这只是占个位啊,只是先占个位,然后呢,你得创建这个U实力,随后你知道要怎么做,同学你想展示三个人的信息,你得先有这三个人的信息,你说对吧?哎,所以说在这儿呢,你得用一个东西。
01:00
存储一下这三个人,那我就直接叫这名了,各位persons啊,或者你叫person list,或者你叫做person a是不是都行,但是最好不要叫person,因为体现不出来这个数据的层次是一堆人对吗?PERSON4,那请问它是什么数据类型呢?数组对象字符串,同学你想想啊,来,张三在李四前面,王五在李四后面,你说是不是有顺序的呀?JS里面一旦要有顺序,各位你是不是得用一个数组去存?问题是里面写什么呢?说老师那就写呗,第一个人叫张三,我就直接这么写了,这不太合适,因为每一个人除了有名字,各位是不是还有年龄呢?以后可能还有什么家庭住址啊,什么手机号啊很多东西,所以说同学,每一个人都是一个啥对象,在这儿呢,我就不再墨迹了,各位我觉得呢,你能听咱这个view u这个教程啊,你相对来说基础应该也差不多,你说是吧?各位这就不墨迹了啊,然后是这样的,每一个人呢,必须得有一个唯一的标识,这才是一个标准的数据,就啥意思?各位你叫张三,我叫张三,那你说你中了500万,那500万也归我吗?不是,咱俩名字一样,但是区分咱俩是不是一个人,不是单单靠名字,得靠身份证号什么的,对吧?所以说同学啊,每一个人都得有一个属性叫做ID啊,我这先写着001对吧,我知道这个东西啊,没有展示到页面上,但是每一个人应该有,你觉得呢?好在写内幕啊,第一个人叫什么呢?张三是法外狂徒是吧?哎,这是18岁,好了,我们再写点啊,再来俩就够了啊,这个删掉,这是19岁是吧?ID是002,这叫什么?叫李四。
02:31
啊,改一下这个呢叫王五好,他的年龄呢是20岁,ID呢也得改一下,是三好了,写完了数据呢准备好了,问题是我怎么根据这个绿色的数据,然后便利生成三个Li呢?View呢是这样说呀,你先写好一个啊,你明确好这个位置放的是什么,你比如说我写好了叫做姓名啊,然后这个位置放的是年龄,对吧?你先给他占个位,要不一会儿你就不知道哪个地方写什么了,然后注意了各位,你想生成多个谁,是不是多个Li?
03:05
你想生成多个谁就在谁身上,用一个全新的指令,叫做V-for,同时我觉得也好理解,For本身GS里面是不是有一个for循环的,那这个V-for呢?那就是view帮你做循环呗,啊,然后走它具体的语法呢,是这样的,同学我先写着,然后你猜一下可以吗?难的东西我从来不会让你猜,直接就进行讲解,对吧?这会你是能猜得到的啊同学看着,首先你必须得承认我红色框里的是不是模板,模板里面是不是直接可以用data里边配置的这些属性啊,好,你看着我这么写的什么意思呢?Person in person丝啊,当然我这少了一个S同学,啥意思?这个persons指的是我data中的什么呢?这一堆人,那这个person呢?你可以把它理解为一个行参,哎,那在这儿呢,我不用person,防止你这个person和person私让你搞混了,同学我这么写,我写P可以吧,哎,就代表一个人,所以说同学你觉没觉得他有点像那个for印那个便利。
04:02
GS里是不是有个for印的一个便利印,后边写的是什么呢?是一堆数据是吧?哎,是一个数据池,然后前边这个刑残代表什么呢?代表这个红色的数据池里面的每一个数据,你说对吧?好,哎,你这么一写,各位这个person丝这个数组的长度是几,它就能给你生成几个Li,对吧?我们先写在这儿,你看看是不是这个效果啊,咱先看一下,我知道我没写完,同学你看是不是三个就出来了,哎,好了,回来说老师那里边怎么写呢?来这样我给你换个行,让你看的清晰一点,同学,你这肯定不能写姓名了,对吧?那得怎么写呢?听我说各位这个P呀,是你写的一个行参,这个行参呢,可以直接在Li这个标签体里边用,你体会体会。P是我在写Li标签的时候,哎,用的一个行参收到的这么一个人啊,然后在绿色框里边可以去用,说老师那我就用一下呗,我就直接写这个P,我写在这儿,你这么写肯定是不对,各位你自己瞧。
05:00
那就是正常的文本P,你要真想用那P大家没忘吧,你是不是得用差值语法啊写个P,然后有些同学可能,哎老师不对呀,我这用P了,那你说下边也没有P啊,是这样的各位啊,你在一个标签里边用了差值语法读取P啊,那这个P可能来自于哪?咱就说说第一个情况可能来自于正常的属性,第二个情况可能来自于我根本没有配置的啊这个计算属性还有可能就是哎来自于这个的行参,明白了吧?哎,好了,那我们写一下P,你看一下同学啊,ID name age是不是展示出来了,但是我不用这么多对吧,那咱们写呢,P点拿到谁name,然后中间咱咋说的,是不是来一杠,然后再写P点谁H,我问一下这列表是不是就出来了,你瞧吗?可以了吧,哎,当然我们少了一个上边那标题对吧,写一个H2啊,叫做人员列表好了,这不就跟我们课件里的顺序是一样的了嘛,是吧?啊说老师这就写完了呗,是如果要是说只讲到这儿吧,同学咱得说这东西做完了是吧?啊讲完了呀是吧?便利吗?啊,这里边还有很多细节上的问题啊,首先咱说第一个细节上的问题啊,各位,就是你这个便利里面少了一个特别特别重要的标签属性,它的名字叫做key。
06:17
说老师我没懂这key是什么意思呢?咱们去官网啊寻找一下答案,各位打开,然后找到view这个官网,然后找到哪呢?各位找到API,你划到最后,这里边有一个特殊的标签属性attribute,是不是有标签属性的意思,点击这个啊,是这样啊,各位关于key相关的知识呢,我们得进行非常深入的讲解和分析,在这一小节呢,我们不去详谈这个K,在下一小节我会以PPT形成一个动态图的形式去跟大家分析这个key的原理,在这呢,我们先关注一下这个K得怎么配置,瞧这。T前面是不是写了一冒号啊,干嘛呢,叫动态绑定数据,对不同学他把item拿到了,Item啥是不是就是我们代码里的那个P,他的item的意思是有ID,那我问一下各位,我们这每一个人身上是不是也有ID属性啊,所以说他的意思呢,是这样的,来一个冒号key,然后等于这里边儿的东西怎么写呢?p.ID那你这个的意思就是,哎,让每一个Li都有了一个唯一的标识,注意就相当于人的身份证,就这么说吧,各位,在view和react当中,这俩框架都是只要你用了便利这种方式去生成多个同样结构的数据,你必须给每一个结构都得起个名字,或者说打的标识,这个key就是每一个节点的标识。
07:45
那你比如说河南有一张三啊,河北有一张三,但是他俩的身份证号是不一样的,对吧?各位说老师呢,我要不写你能咋的呢?来我们看一下各位,你打开其实在view u当中啊,如果你不写,各位你看一切安好报错吗?咱都别说错误,同学一个警告是不是都没有啊啊说老师那这不也挺好的吗?你尽量不要这样做啊,如果这段代码是出现在react里,我告诉你直接他就报错了啊,虽然在这呢,表面没什么问题,但是最好你把这个key呢,通过你亲手给他写在这儿啊,等于说老师我现在就迷糊,你这玩意儿不写他也不报错,凭什么要写呢?这是我们下一小节探讨的好不在这你就别纠结了,用什么呢?p.ID啊,一定要得加上前面那冒号,只有加上冒号了,这一堆东西是不是才当表达式去处理啊?最忌讳的我告诉你是这么写,不动态绑定kia呀,等于一好同学你这么写的后果就是生成的三个Li,他们的标识都是啥?一,那你这就完了,这回他可不惯着你了,同学,你看他说啥?
08:45
一个重复的key被定义了谁呢?一,你再往后读this make case,这可能会导致一个错误的更新,在这儿咱们也不过多分析,哎,你就知道同学这K呀咋的不能说大家都一样OK回来,所以说你这么写,这不写死了吗?那三个人K不都是一吗?但你这么写他就不写。四,哎,p.ID每一个人都有自己的ID对吧?哎,其实K呀,除了有这种写法,同学还有一个写法,你瞧着我这是不是用了一个行参在接呀,其实我跟你说各位这块呢,能接到两个。
09:18
啊,两个呢,你最好就这么写啊,我先用A和B代替行吧,然后在这儿呢,这些东西我也先删掉,然后呢,我让大家看看这A是啥,这B是啥行不啊说老师那没准还有C呢,辛苦你试试吧,来整个C啊,在这首先把A读出来啊,杠杠杠再读出谁呢?这个B好了,再来杠杠杠再读谁呢?这个C好了,你自己瞧效果去啊走啊说老师有问题,这个P它没有定义,那确实是,这是不是还用着P呢?那这样我暂时先不写啊,暂时先不写好回来走。你看的是什么,各位。这是A吧,A是啥?A就是item,就是你便利的每一项,B是啥?B是索引值对不对,数组里的第零个,第一个,第二个说老师后边咋没东西了呢?没东西就对了,因为它收不到这个C收不到,你这么写呢,其实它就是undeend unde find是不给你呈现在页面上的,OK,所以说后边这C啊,省省吧,这呢也删掉,同学别叫A写的语义化一点叫做P,那这个B呢,应该叫做什么呢?Index啊,那在这呢,我给它删掉,然后我这儿呢,还是按照之前那么写,P点内,然后杠不加空格的直接杠啊,然后是P点什么呢?A值,然后你不得写那个K吗?同学你只要保证什么呢?在这个绿色的u Li里面,每一个Li的key是不一样的就可以了。同学直接说第一种写法p.DOK,不。
10:43
啊,每一个人的ID你看都是不一样的嘛,还有一种写法就是怎么的呢?用这个index,同学,Index你说是不是便历时候的索引值,只要你的这个浏览器它不出现问题,那你说是不是012,就以此类推,这个自然数增长就对了呀,所以说你用index行不行也行是吧?哎,好嘞,回来啊说老师那这咱们不就说完了吗?他便利了一个列表,你看这些东西也说了,还有就是一个写法上的问题,各位如果说你这收到多个东西,其实吧,这小括号啊,你也可以不写,哎就这样好了,回来你刷新他也不报什么错误,但是各位养成一个良好的习惯,来你看一下啊,这个index呀,他也是可以拿到的,对吧,各位拿不到他就报错了,但是你最好养成一个良好的习惯,什么习惯呢,就是这边啊,如果收到的是多个,你最好加个小括号,知道不?哎,你要是不加这小括号,可能在一些老的这个脚手架里呢,他就报错了是吧?哎,养成一个好的习惯,说老师那明白了,哎,就是v far能便利加在谁身上诶就能便利谁,对吧,然后这。
11:43
这个数组呢,长度是多少就便离多少次,哎,对,就是这意思啊,但是这里边还有一个细节上的问题,各位,就是这个in呢,你可以换一个词叫off,跟GS多像啊各位GS里是不是有forin循环,是不是有for of循环,那这也可以用什么呢?Off,其实这是一个API的历史遗留问题,对吧?反正就目前的2.6.12来说for in啊,或者不说for in是吧?哎,这个we for里面用of型,用in呢也行是吧?哎,你看一下是不是也可以啊,好,那难道它只能遍利person这种数组类型的数据吗?其实也不是啊,各位,它还能便利对象类型,来我给你写一个,比如说呢,我准备一个汽车的信息吧,CR,然后这个汽车呢,是有这个名字的,比如说我随便写一个吧,叫做奥迪AA几A8是吧,好了再来一个,比如说汽车呢,还有价格对吧,这A8呢,咱随便来一个吧,比如说70万啊好,然后呢,再来一个就是这个color,这个车的颜色,比如说是黑色,那能不能这。
12:43
这东西也遍历出来呢,其实是可以的,在这儿呢,给大家写一个注释啊,这叫做便利什么呢?这个数组好,在这儿再来一个叫做便利什么呢?叫做对象,我还是把这个ul什么的都复制过来,不是人员列表了,这里边呢叫做汽车信息是吧,然后呢,也是v for,这会别写person s写什么呢?把这折叠起来啊,写car啊,老师呢,这回会收到什么呢?还是用A和B呢去代替一下,好吧,各位,这个K呢,也先暂时不写啊,然后把这儿呢给它删掉,然后先拿这个A,再拿哪个呢?这个B,好了,咱看一下啊,各位回到页面走,你发现所谓的A就是谁value。
13:27
所谓的B就是谁T,所以说各位千万不要搞混了啊,先收到的一定是每一项,也就是我们的value啊,你用VL也行,对吧?Value,然后这个后边的呢,它是K对吧?各位,那你说同学,那我这个K就可以用什么呢?是不是用这个K啊,你千万别搞混了,或者这样吧,我这叫K是吧,我这叫Y6,完这呢,我写K这回行了吧?哎,那然后同学你把这个K是不是一般是K,然后冒号Y6啊,所以说我把Y6写在后边,是不是可以在这儿呢?删掉,让他留一个,你瞧效果是吧,内幕奥迪A8PRICE70万啊color黑色OK了吧,好哎,这是能便利对象,还能便利什么呢?各位,其实啊,它也能遍历字符串,只不过吧用的真不多啊,大家写一下,比如说hello啊hello是吧,那然后开始遍历吧,我把这一堆呢,给它复制一份,再来一个啊叫做遍历字符串,好,那这会儿呢,写上叫做测试遍历字符串啊,还是v for同学这个命。
14:28
令是不变的啊,这个指令一直都叫v for,然后这回呢,就得换了,不是car了,这回是str,来看看A是啥,然后再看看这个B是啥,对吧,K呢,还是先不写给它删掉这块呢,写上A,这块呢写上B,来咱观察一下啊,回到这儿走同学啥。哎,其实所谓的A呢,就是字符串里的每一个字符啊,所谓的B呢,其实就是一个自然数的一个统计,对吧,01234,你也可以说是索引值,也没毛病,哎,所以说这儿来同学叫做叉啥意思呢?字符这块呢,其实还是index,那我这个K呢,走是不是可以用写成这个index呀?哎,我先声明啊各位,我知道我把index作为key是有点问题的,但是在这儿同学我也不涉及到更新列表啊,所以说在这的同学你就只要保证它是唯一的就可以了,关于key的一些详细的问题,我们在下一小节进行仔细的探讨,OK,哎,所以说把这个index呢写在这儿,然后把这叉呢给它写在这儿啊,你这怎么写,其实随你的便,你说对吗?各位红色框的地方你收到就得了呗,是吧,好了,这是测试遍历字符串,瞧一下啊,在这儿说老师还能便利什么呢?啊,还有最后一种就是特别特别的少见啊,叫做便利指定次数,说这啥意思呀啊,写一下你就懂了啊,把这复制。
15:41
好,咋写呢?瞧着各位啊,这还叫A,这还叫B,这是A,这是B啊,这儿呢,先不写,看着我这儿啊,不写对象,不写数组,我也不写字符串,我写啥呢?我写五啊,或者我写六什么写十对吧,我先写个五,要不太多了,同学,这啥意思,遍历五次。
16:00
那我也没有根据一个什么数组啊,对象啊,字符串去遍历,那你就写了个五遍历五次,那这AB是什么玩意儿呢?啊,咱看一下你就明白了,各位划到最后你去看便利指定次数同学,所谓的A就是从一开始计数12345,就正常的咱们这个生活中的这个计数,然后这个呢,就是从自然数零开始计数01234,你也可以管蓝色的这个叫做索引值,你可以管这边呢叫做number值,数值对吧?哎,所以说在这儿呢,A换一下叫做number,完了这个叫啥呢?管它叫做index吧,完了同样的是不是也得需要这个key啊好,哎,先这写着,先这写着,哎完了把这index呢,我给它放在前边啊,这个呢给它放在这啊同学说一下啊,遍历字符串这个东西,它真的是用的少呀,还有谁也是用的少呢,就是遍历指定次数,一般来说同学谁用的最多呢,我跟你讲就是便利数组啊,这块写一下啊,写上叫做便利数组,完这块呢,也写一下啊,走着叫做便利对象,OK啊朱老师这有点。
17:00
乱呢,所以说给你敲个回车嘛,这再走一个,哎,这再走一个好了吧,哎,这些你可以给它折叠起来,好了,同学,我们来一波总结,这一小节就结束啊,在这儿呢,打开可以使用v for指令啊,用于展示列表数据是吧?语法就是v for,然后什么什么in什么什么,然后这个key呢,你现在反正就先记着啊,最好写上是吧,而且每一个人的T呢,还得是唯一的啊,然后可以便利什么呢?数组对象字符串,还有什么呢?指定次数好不?诶这一小节我们听。
我来说两句