00:00
好嘞,各位静态组件呢,咱们就实现完了,目前呢,是这么一个效果啊,走一堆要做的事儿啊,都叫叉叉叉,而且这四个呢,也是我写死的四个,对不?接下来进入第二步,就是展示动态的数据啊,那我把这些文件夹啊,先给它关一下这个还有这个来吧,展示动态数据,什么叫动态数据啊,就是这些东西你得找一个容器呀,给它存起来以后,好对这些东西呢进行增删改查,也就是说我展示列表的时候,之所以有打代码,睡觉吃饭,那是因为我真正有一个地方存着这些数据,然后我把这些数据遍历出来的,你说对不?那接下来就考虑考虑,当你去存这一堆要做的事儿的时候,你保存数据的时候用什么数据类型啊,你给他起什么名称,其实名称比较简单,各位现在我就能起,你比如说叫做todo可以吧,一堆要做的事儿啊,或者名称就叫做todo list。
01:00
是不是也行啊,或者说最笨一点,你写这么一个东西,SINCE1堆事情是不是也行?哎,名称好记,主要是类型,各位啊,一堆要做的事儿,你说用什么数据类型存好不可能是布尔值吧,布尔值那非真即假,说老师要不字符串,哎同学一堆数据你就非得拿字符串存吗?也不是说不行各位对吧?你比如说来举个例子,我想存三个字母,你拿字符串能不能存?可以呀,同学写呗,写一个A,中间用个and符分隔,对吧?我这不写and符,写井号写个B是吧,完你再写一个井号,再写一个C,你说能不能存也行,但是犯不上啊,一般来说,同学如果你真想存这么三个东西,呃,你写这么一个啊A放在数组里呗,然后再写一个什么呢?这个呃,B,完了再写一个什么呢?C,这不挺好的吗?是不,各位,所以说在GS里边要存一堆数据,那无非就是两种容器啊各位,第一个容器是数组。
02:00
第二个呢对象,那你说这块用什么呢?一堆要做的事儿,用数组还是用对象呢?各位我说一下啊,这块呢最好啊,你用什么呢?用数组去存,然后数组里边每一个要做的事儿,它才是一个对象,不知道这块大家能不能有所体会,你分析一下各位你说每一个要做的事儿,仅仅是保存他们名字这么简单吗?如果真的是这样,同学,那那你写吧,就是每一个要做的事儿,你只保存他们的名字,那我问你如何去分别他们到底完成还是没完成呢?说老师,那我就看勾不勾嘛,同学,勾不勾是操作,勾不是页面的一个表象,最终得对应到数据的存储上,你说对不?各位你不能说你在这写一假的吧,同学你不能这么玩吧,说老师我就写一个假的,这个box完就勾呗,那同学,那你这勾的太随意了,想勾就勾,那数据它不变。还有就是同学我问你这删除你咋删,你根据名删呀,那可不对,那万一有两个要做的事儿是同名的呢,那我看你怎么办呢?所以说各位啊,应该是这么一个结构,你听我说啊,整体来说,一堆要做的事儿,其实啊是一个大大的数组,哎,数组里边呢,是一个一个一个要做的事儿,每一个要做的事儿,他都应该是一个对象,里边最起码得有这三个东西,首先要做的这件事儿的ID,你比如说写个001。
03:27
是不,那随后呢,要做的事儿是不是还得有自己的名字呀,你可以写一个name或者是title什么的,然后叉叉叉写上,那还有什么呢?还得有一个选项去标识着这个事儿到底是做完了还是没做完,你比如说我用OK是吧,在这写一个布尔值,做完了还是没做完,那在这儿咋的,第一个要做的事儿是不是写完了,然后下边都是这种结构,这回应该能有所体会了吧,各位,哎,你都学到框架了,应该能有所体会这种感觉了,一堆数据用数组,每一个数据里边的属性太多了,用对象,就这意思啊,OK这个问题考虑清楚了,看这个同学数据保存在哪个组件,我在这儿吧,想换一种讲法,我不像之前的那个讲法了,哎,说在这儿给大家各种引导啊,引导大家,引导来引导去,大家也没听懂,完了最终我说了,哎,反正不能放在这儿,那就很牵强,同学来,咱们怎么舒服怎么写,你觉得谁要展示这一堆东西,谁展示哪个组件展示很明显。
04:27
List组件是不是展示这一堆要做的事儿?那同学非常简单而又粗暴的写法,那我就把数据给谁,谁用我就给谁,给谁给list OK,完活,打开代码开始写,找到谁list啊,样式折叠起来不再看了啊,那玩意看起来闹心哎,在这同学怎么写,是不是配置数据写什么呢?Data写呗啊,一堆要做的事咋写todo或者叫做todo AR或者叫做todo list是不都行?哎,我就叫做todo啊,整体来说是一个数组,数组里边得写一堆要做的事,第一个写ID,比如说叫做001,然后给它起一个名字,比如说叫name,或者别叫name了,叫title吧,怕大家一会呢就晕了啊。第一个要做的事,比如说叫做吃饭啊,随后再写,你得定义一个属性,去标识着它到底是完成了还是没完成,这里边的同学最标准的词吧,应该是用这个啊,之前在线下讲的时。
05:27
咱用这个complete叫完成的,但是发现吧,咱同学写的时候总是容易把这单词写错,后来呢,有小伙伴给我提了一个建议,说老师来用这个叫当,嗯,是不是也有完成了的意思,哎,这好是吧,就用这个了啊当来写上,那吃饭肯定呢吃完了是吧?哎,都喜欢吃饭嘛啊走,都是吃货哈来走这儿呢是002,这呢让他是001吧,啊001好,这呢是零零什么呢?003,我知道可能有些同学问老师啊,你这ID为啥用字符串啊同学稍微负责任点,这ID都得用字符串,因为什么呢?你用number number是有尽头的对不?哎,你写一个数字呢,数字是有尽头的,在JS里边,所以说一般呢,咱们用这个字符串,一般来说都是一个哈希值,各位是这种东西啊,在这儿呢,咱就简单写了,来吧各位001啊,吃饭,那这来一个,嗯,叫什么呢,睡觉,那这儿呢,再换一个,哎,说老师打豆豆,哎,咱换一个吧,同学来这样抽烟。
06:27
哎,这什么呢,喝酒,哎,在这儿呢,哎,不烫头了,开车走,那这儿呢,调一下叫做false是吧,你别让他都一样嘛,对吧,有完成的有没完成的是吧?哎,他俩不能都是错是吧?哎,不太好是吧?来保存同学数据,准备好没?准备好了,接下来呢?是啊,老师,接下来呢,根据数据你去决定你用多少次这个item,你说对不?各位,所以说别自己在这写,写四遍,那咋的写一个就行啊,那到底遍历多少次呢?同学这个指令还记得吗?叫做V-for,对吧?这不是遍历吗?那里边怎么写着什么什么in,什么什么对不对啊,来写吧,这块写上in in什么呢?In todo,那这里边同学咋写来着?首先第一个是item,第二个是index,对不?各位啊,那我们在这儿啊,同学不用这个index了,因为我们是有ID的对不对?遍历的时候你肯定得给key是不是?哎,Key咱就不用这个index了,因为一会儿同学你别忘了,我涉及到对数据进行逆序操作,我在这添加的东西,那可是出现在列表的前方的对不对?那可是一个反向添加哟,哎,回来,那所以说这儿呢,同学我就用一个那一个,这是不是就可以省略呀,啊别叫item了,换个。
07:45
明同学啊啊,你便利出来的是什么呀?你这个大的容器叫todos,是一堆要做的事儿,那每一个呢,就是一个todo呗,是不?哎,这比较标准,或者你简写写T也行啊,但是我这么写,各位,我叫todo o BJ,哎,我就非得叫这名,为了能让大家明白是一个todo对象,OK,好把这复制,然后这儿呢,别忘了冒号谁呢T,那这怎么写呀,是不是todo OB这点ID吧各位,OK,这不就变利了吗?啊回头呢,你看一眼呗,同学,几个三个,哎,那我这有几条数据呢,三条说老师那不对不对,那你这不还是叉叉叉吗?那我问一下为啥还是叉叉叉呢?为什么呀,说老师可是呢,我这写了抽烟喝酒开车同学,你要考虑一个问题哦,你这个组件呢,确实用了三次,但是我想问的是,你这个组件里面来往上滑样式给它折叠起来,你这个组件。
08:45
这里面同学这不写死的叉叉叉吗?同学你要是这么写呀,神仙也救不了你对不?这边精心准备的数据呵,都没用,你就用了个啥,各位我跟你讲,你要这么写,你就用了一下数组的长度,里边的东西你连读都没读是不?各位,哎,那就涉及到一个事儿啊,各位,我不仅要根据数据的数量去遍利我用多少次这个my item,而且我还要干嘛把每一条的具体信息对象要传给这个item,你说对不?所以说在这同学不卖关子了,我得给my item组件传数据怎么传?之前学过用pro,所以说这怎么写,各位啊。
09:29
这个K啊,你随便定,你叫q we,行,但是值你不能随便写是吧?各位怎么写呀,是不是得给这个todo o BJ给它传进去啊,那请问我这么写行吗?这么写绝对不行,各位啊,说老师那我就想这么写,那你试试吧,你传没传q we传了各位来在这儿开始,那是不是得声明接收啊,我写一个props,我用简写形式啊,写q we啊,说老师这不挺好的吗?这q we这不就传进来了吗?那同学啊,你琢磨琢磨吧,你在这儿写的是直接一个引号todo OB BJ啊,你这连冒号都没加,你觉得这东西对吗?啊,你不信,在这我给你来一这个,各位我给你写一个生命周期钩子啊,叫mounted mount的里边那个this是不是VC啊,你顺着这出发,你看看那个q we啊,你看看它是什么啊?各位来到控制台刷新,你看三个全叫todo OB BJ,很明显不对,回来各位这是咋的冒号,能别叫q we不换个好听。
10:30
点了说老师那叫啥跟他一样的名字,可不可以todo OB BJ行吧,或者不叫todo啊,不叫todo OB BJ叫todo,或者说同学啊,这么写一个事儿是不?哎,在这儿啊,同学我就写这个了啊,叫todo OB BJ,但是在这换一个吧,我叫todo,防止大家晕,这是便利的时候,每一个要做事的对象,这是把对象传进去,你只有写了冒号这玩意儿才是表达式,表达式才读这对不对?各位,哎,这是图do好了,给他复制一份回到这儿,那咋写呢?声明接收todo,那这回我看一下todo,那这回你瞧着吧,各位回到这儿一刷新来吧,三个数据是不是都进来了,说老师怎么是这个模样了吗?那你忘了吗?各位,这个里边你别忘了,那无论你藏的有多深,各位view是不是都能找到那个属性,是不是都给你做那个数据劫持,是不是都有这个get和S对不?哎,你别管它什么样,咱能用就可以了呗,有当有ID有title,所以说各位,那你说接下来怎么。
11:30
写呀,Mount的给他干掉,你告诉我怎么写,哎,先写好注释吧,这叫声明,声明接收什么呢?这个todo对象,嗯,那你说这怎么写,简单了呀,各位走,写上差值语法,然后这呢,给它折叠起来啊,走,然后叫做todo,点上首先要展示的是啥?展示的是不是那个要做事的名字,那我们叫啥来着,是不是叫title?
12:00
啊,OK,还有就是哪儿呢?各位,他这块儿是不是还涉及到勾不勾的问题啊,咱先不考虑这个勾不的问题,咱来到这儿看刷新,各位,你看抽烟喝酒开车是不来了呀,各位啊,那接下来说说这儿吧,有的得勾,有的不勾啊,那同学你不用想那么多,我就问你啊,在一个HTML里面,你写了一个input,我想让这个input默认是勾选状态,那我得怎么写,是不是加一个check k的就可以了啊,也就是加一个这个CA对不啊,不信咱试一下,各位来你在这儿新建一个demo.html随便写点结构,我在这儿呢,就给它写一个input,然后在这儿我写一个check的,不用再写别的了,打开各位,哎,那当然了,你不能是这个呀,这个肯定不行的,来右键打开,同学,你看它勾不勾就得了,是不是勾选上了,那你要不加这个呢,那他就不勾选呗,是不是各位,哎,OK,那把这个呢给它删掉,那回到我们这里边,大家知道怎么写了。
13:00
你是不是得写一个拆K的呀?啊,那这个拆KD到底是加还是不加呢?各位你要这么写呢,可就毁了各位你这么写的后果吧,把你自己瞧,回到这儿刷新全都勾上是不?还说老师,那我怎么能动态的决定它到底有还是没有呢?哎,这就有一个技巧了,你看着啊,各位你比如说你直接写就是属于check k得,我不管你这事儿做没做,完全都给你勾上,这不对是吧?怎么能动态的决定一个属性有没有?各位我可不是在给你讲这个动态的样式控制,我讲的是如何在view里面让一个标签动态的拥有某一个属性。之前我们讲的那个样式不是这意思,样式是指class里边的事儿,这是指标签里边属性的事儿,同学这块呢,挺简单的啊,你看着我写一个冒号,拆开得完了,等于我直接写表达式,我写true是啥意思?TE这么写的意思就是view解析到这说哎呀,这兄弟呢,想给input指定一个check的选项啊,那后边如果是true那咋的,那就拥有这个,那如果后边的表达式是false,那就没有这个,来我们看一下啊各位保存回到这儿呢,刷新一波,你看全都勾上了,那就是都有这个check开的,那如果我写的是false,你看一下效果,诶回来是不是就没有,那到底是有还是没有呢?各位,那我得问一个人呢,问谁呢?TODo.down就可以了,回头刷新,你看该勾的勾不该勾的那就不勾,对不,各位OK,那你看我们这不就是完成了这个展示动态数据吗?这些东西也都调整好了是吧,但是还没有加交互。
14:42
Who,对吧,一会儿再说,而且同学我提前给你铺垫一个事情,其实啊,就是你把数据给谁呢?来打开这个list,你把数据啊都给list,其实是不太合理的,一会儿呢,你就写不下去了,但是现在看起来挺香的,对吧,那就这么写着好,那这一小节呢,我们停。
我来说两句