00:00
好嘞,各位,那这一小节呢,咱们把这个功能做一下啊,就是勾选一个事儿,哎或者是取消勾选一件事儿,哎说白了就是让这件事儿呢,能够切换一下状态,哎就是做完了还是没做完,哎可能有些同学说哈,老师不用啊,不用做,现在就有这功能,你看取消了,你看勾选了,各位,你这种操作只是表象,你没有引起数据的变化,对吗?各位,也就是说你在这儿明明把三个东西都勾上了,那你看一下开发者工具APP里面所记载着的数据,第一个确实为真,那第二个呢为假,那第三个呢,这为真,同学们你看你这怎么勾这都不变呢?说老师为啥让他变呢?不想让他变,同学,我问一下,如果这块不变的话,你说这儿一会儿怎么统计对不?人家不得看看吗?这么多todos里面有几个当值为真的,那么已完成就是几个对不?各位哎,也就是说你的操作最终得引起数据的变化,是这意思不?各位好,来咱写写啊,刷新一波,首先呢,你得考虑到啊,我们肯定得操作这个组件叫做my item,对不?各位找到那个check box在哪呢?在这,那你想想吧,接下来应该怎么去写,我们琢磨一下啊各位你说当你去勾选一个to度的时候,你比如说啊,在这里边第二个呢是喝酒这件事儿,你说当我勾选的时候,我是不是首先得拿到喝酒这件事儿的ID,然后到to肚子里面去找到这个人,然后把他的当值取反就可以了,对不?各位因为一件事只有两个。
01:44
状态吗?做完了还是没做完是不?哎,所以说拿到ID是不是就可以了,哎,那目前我们首先要完成的就是无论你勾选哪个,或者是你取消勾选哪个,一定要拿到这件事儿的ID,你说对吗?各位好,回来,那你说说得怎么写呢?我们之前呢在这写过这个,你看各位check it来等于todo点当我为什么要写这个呀,同学写这个的目的是为了初始化显示,这些人谁勾谁不勾,你说对不,刷新是这意思不,你不写这个功能完成不了啊各位,那你看你删掉嘛,保存回来刷新都不勾啊,所以说我们写这个check it是这个目的,初始化显示,那接下来呢,各位它还要产生交互,你说对不?嗯,那怎么写呀,反正肯定得绑定事件了,你说对吧,各位来走,那绑定什么事件呢?这儿呢,各位有两种写法,都给大家写写啊,第一种最简单的一个事件就。
02:44
是绑定点击时间,那同学你想想啊,他目前是勾选状态,那我想让他取消勾选,那怎么办?那是不是得点一下啊,诶一点不要紧,触发了什么?哎,Click事件,所以说用click可不可以呢?也可以啊,走,那给它起一个名字吧,呃,叫什么呢?叫做handle handle有处理的意思啊,Check啊handle check,那你知道啊,这个东西不是说叫了handle check就只能响应勾选,它能响应勾选啊,还有取消勾选它都能响应,哎,Handle check来把它拿过来吧,那在这儿我是不是得配置一个MYS啊,Handle check那里边干嘛呢?输出这件事的ID是不就可以了呀?那我肯定得收到一个ID,然后在这才能输出,那我怎么收到呢?那是不是得这传呀?那问题是怎么传呢?简单小括号不就传了吗?咱之前讲那个事件的回调传参是不是这么写的?还有就是各位你这儿能拿到突度点,当你这儿能拿到突度点title,那难道你这就不能拿到突度点I?
03:44
低的吗?是不是可以啊,哎,因为我收东西的时候各位,我收的是整个突度对象啊,你说是不?哎,好了,保存回头咱看看效果啊各位刷新一波切到控制台,抽烟呢被勾选了,我想取消勾选我就得点它一点就知道了是001,哎,那喝酒呢没被选中,那我想选就得点,那就002,哎,所以说同学你看你只要切换的时候他就知道是不?哎,那除了有C呢,各位还有另外一个写法也挺好的,不绑定点击事件,那绑定什么呢?叫做change改变,同学你再琢磨琢磨,你说一上来啊,这抽烟呢是被勾选的状态,那你说我一点它是不是就被取消勾选了,那由勾选变成了取消勾选,是不是一种变化呢?那既然是一种变化,那肯定会处罚a change事件呢,对吧?各位,哎,来看看啊,我取消001。
04:44
我勾选002,我再取消003,是不是都拿到了,哎,所以说用哪个都可以啊,那在这呢,我就用这个了,朱老师,那接下来我会写了啊,那就是拿了这个ID之后啊,然后我通知那个APP是吧,把对应ID的那个todo项的那个档值啊给它取反,哎就这意思,所以说接下来各位没那么难,那在这儿你说怎么办?别输出啊,别做这种无聊的事,写好注释叫做通知APP组件,将对应的todo对象的当值咋的呢?取反是不是就可以了,那问题是怎么通知啊?哎,各位现在你想想啊,数据在哪儿呢?就是那一堆todos,你告诉我在哪儿呢?是不是在APP那儿呢?哎,所以说同学们,我们有一句话叫做数据在哪里,那么操作数据的方法就在哪里,哎,我知道有些同学现在开始总结了,是吧,哎呀说。
05:44
老师,你看你这个突do例子讲了这好几个小节的,也没说给我来个总结呀,同学你别着急,现在呢,咱们先努力的实现功能啊,然后一会儿呢,整个这些东西都讲完了,我再给大家来一次总结,行吧,现在你先跟着我这个节奏走啊同学,数据在哪儿APP当中,那么对数据的操作是不是都应该在这里边啊,你琢磨琢磨,Todos交给了APP,那么所有对todos的增删改查的方法是不都应该配置在APP里啊?OK,各位写好注释,这是我们刚才写的,诶,叫做添加一个todo,那接下来还得再写一个,哎,叫做什么呢?叫做勾选or or什么呢?取消勾选一个todo来吧,那给它起一个名字呗,勾选或者是取消勾选,我就叫这个吧,Check todo对吧?选择或者是取消选择,哎,就叫这名了,那同学我是不得收到一。
06:44
个ID,那随后怎么办?随后就看你GS基本功了呗,对不,在芸芸众生中哎,找到你要操作的那个to度,把它的当值取反是不是就可以了?哎,那怎么找呢?很简单啊,this.todos拿到这一堆东西,同学,我是不是得来一次便利,我不便利我哪知道你在哪啊,对吧?For each走,你那里边这参数我就不说了,那第一个参数一定是拿到的todo项呗,哎,那这todo项里边得怎么写呢?是不是得写一个判断呀?如果你这个凸度的ID和我传进来的这个ID是一样的,OK,你就是我要找的那个人,那怎么办呀,突度点儿他身上的当值给它取反,再复回去是不就可以了呀?好啊,方法写完了是这么回事儿,但是这个check todo是不是得给这个组件才对呀?谁呀,My item,那么现在呢,就稍显尴尬,因为APP啊,是这红色的,绿色的是我们的那个MY。
07:44
组件my list里边这粉色的才是我们那个my item组件是吧?各位,而check todo这个方法在哪呢?APP这儿呢?APP想给谁,想给it,那你觉不觉得各位APP属于爷爷,It属于孙子,爷爷想给孙子点儿东西,那就只能先给他爸,哎,然后他爸呢,再给他,只能是逐层传递,你说是不是这意思?各位,所以说大家体会体会,你觉不觉得组件间通信这个技术实在是太重要了,就是我不管你A组件和B组件你俩之间是什么关系啊,就总之A想给B点东西一共有多少种给的方式,必须要总结好是不?各位,哎,组件间通信如果你玩不明白,大型项目你是根本写不了的,在这儿其实你就很尴尬,说老师那现在咱怎么办呀?现在啊,同学咱们就逐层传递吧,说老师那也太麻烦了呀,放心同学。
08:44
啊,日子呢,会有好的那一天,你等讲完这个to案例之后,我会给你讲什么事件总线呀,什么消息订阅与发布啊,那个时候就会把很多我们讲完的这些功能拿那个东西再写一遍的,OK,各位啊,饭得一口一口吃,路得一步一步走,OK,同学别嫌麻烦,逐层传递来走,你怎么办?
09:05
Take todo先给谁先给谁,先给这个my list啊,咱就说的形象一点,My list也挺烦的是吧,还说你就直接给他就行了呗,非得给我这儿,那不给这没办法呀,是不好了,把这个复制一份,找谁去my list接不接收,接收怎么写,是不是这么写,那收完之后呢?说老师那就用呗,啊,我就用一下,诶同学他不用,他是很被动的在接收东西,谁用啊,他儿子用买item,所以说各位在这儿怎么写啊,冒号来这些东西是不是写在这儿啊,那你开发的时候啊,也会出现这个情况,就是一个组件或者一个标签里边写的东西过于长了,那你最好这样做,回车缩进,然后所有的这些东西都回车这儿呢,回车这儿呢,回车这儿呢,最后哎,给他来一个往前一走对齐啊这种写法你得习惯标签的缩进吗?OK,同学给没给item给了,那item呢,那就得收啊,那回到这儿,同学写一个引号是不是收,收完了之后就在VC身上了,那你知道这应该怎么写了,各位this点谁呢?是不是check todo,然后把谁传进去ID,这不就可以了吗?来,咱试试啊,各位刷新一波啊,打开开发者工具走到这儿。
10:28
首先拿第一个做演示吧,目前是不是勾选的状态来,我取消勾选啊,走,你这是不是变成false是吧?哎,那再看看这两个啊,往下走,这是false吧,勾选上waiter啊,那我再取消,那就false OK,同学你看看你的操作影响了数据的变化对不?各位好,那讲到这儿呢,同学你听我说啊,我完全可以停下来,我就告诉大家这个功能我实现了,但是我们的目的啊,各位不是说疯狂的把这些功能给它怼出来,而是说通过这个案例能够引出更多的东西和思考来,各位接下来呢,我做这么一件事,我呀把我刚才动的这三个文件,就是my item my list,还有APP啊,我给它存一份,因为接下来呢,我要破坏代码了,来怎么破坏呢?一会再说啊,这两个复制一份放到这个桌面上,哎,这个还有这个啊,别的你不用看啊,那是我这个录屏存下来的东西啊,然后再找。
11:28
找谁呢?找这个这个APP复制,哎,给它放在这儿OK了吧,这三个摆在这儿,一会儿要用啊,接下来同学我要破坏代码了,怎么破坏呢?瞧着啊APP里边我刚才是不是辛辛苦苦写了一个勾选而取消勾选啊,哎,不要了,删掉对不写了,哎说老师,我看你要干嘛呢?哎,这块儿呢,也不传了是吧,我也不给这个my list传了,那么my list这儿呢,哎,好家伙,我这儿啊也不接收了,我收都不收,那我怎么给我的儿子传呢?所以说也不传了,那既然我都没有给我的儿子传,那你说我儿子这块儿是不是也不用再声明了呀,那你说我儿子这儿,哎哟,各位,哎,瞧着你说19行你还能写了吗?肯定不能写了,嘿,说老师,我看你怎么玩啊,我看你接下来要干嘛,你这日子是不想过了呀,全都删了是吧,刚实现完就删了,哎,来各位看着MYS我都不要了,哎呀说老师我越来越迷惑了。
12:28
来更迷惑的事呢,在下边我把第四行啊给你复制一份好,然后呢,把原来的写法注掉,接下来呢,我换一种写法啊,我把这个东西。和这个东西给它扭在一起,哎,什么叫扭在一起呢?各位啊,我不用这么写,然后再加上这么写了,同学我问你,我这个粉色框里想实现什么功能,初始化展示列表的时候决定到底谁勾谁不勾,那我再问各位,我绿色框想实现什么功能呢?就是后续的交互对吗?以后我勾了以后我取消勾选对不对?一个是初始化的事儿,一个是以后更新的事儿,那么这两个东西可以毁成一个,哎,你瞧着啊,各位用什么呢?用这个VGA model,这个大家还记得不?同学我们之前在讲那个收集表单数据的时候,就跟大家说过这事儿,如果你的input框是check box类型的,并且你的VGA model非常的给力,你绑定了一个布尔值,当然不能是它提示这个什么something,应该是这个,对吧?TODo.down啊,如果你是check box,并且你的vega model很给力,绑。
13:42
请定了一个布尔值,那么这个布就能决定这个check box到底勾还是不勾是不?各位之前咱是不是这么说过,哎,保存看一下效果啊,看一下效果来刷新各位控制台必须得开好了啊,看它报不报错误刷新,同学我问你列表的初始化展示有没有问题,没有问题好再看这儿,看看交互行不行呢?来打开啊走目前是勾选的状态,那接下来你看好了啊,我取消勾选走你怎么样,是不是实现了,那可能这个时候啊,就有同学说了,哎,老师这是怎么回事呢?同学你慢慢捋,终归我问你它是不是一个不尔值,用V-model能实现两个事儿,一是初始化列表就能维护好你勾不勾,那你别忘了,同学,V-model可是一个双向的数据绑定啊,那等你勾或者你取消勾的时候,是不是都会引起这个家伙的变化呀,那这个东西我问你归根结底它在哪儿啊。
14:42
啊,它是一个对象吧,各位,这个突do对象是不是来自于这个地方啊,也就是说你去勾选或者取消勾选的时候,你利用了V-model的双向数据绑定,从而引起了APP里边对应todo里边的这个档值的改变,是这意思不,各位。
15:03
为啥说能影响当值的改变呢?很简单呢,各位,因为你在这儿绑定的是这个当值啊,你说对吧?各位,哎,啊想想说老师那就这么写呗,这么写多好啊,同学不建议你这样写,为啥呀,这么写稍微有点违反原则呀,各位你品味一下啊,V-model,我绑定的这个绿色框是什么呀?老师是一个todo的档值啊,那我再问你todo哪来的呀?Todo哪来的呀?是我自己家的todo吗?不是,那哪来的呀?诶,是不是外部传进来的?说白了,这个todo是不是pros传进来的?同学你记不记得我们说过一个事儿,叫做pros是只读的pros不可以修改,那么咱们就琢磨一下,刚才到底改没改?同学,那你说改没改,你就看这来,我勾不勾,勾不勾,你就看右下角,同学他改没改,他实实在在的改了,也就是说你传进来的这个pro谁呢?Todo里边的内容被我改了,但是同学们控制台报错吗?嘿,不报错,说老师这是为什么呢?哎,同学这儿呢,咱就得聊一聊了,是这么回事啊,就是我们一直说pro啊,是不允许修改的,那问题是到底什么叫改?如果对于基本类型来说,各位你比如说啊,我写了一个let a等于一,那你说同学什么叫把A改了呢?
16:32
什么叫把A改了?就如果有一天你写了这么一个东西,A等于二啊,前面写一个这个A啊,A等于二同学你说改没改A改了是不?哎,那对于这个对象类型来说呢,咱们再聊聊,你比如说let一个OBJ,它里边有一个A是一,有一个B呢是二,各位你说如果有一天啊,我写了这么一段代码OBj.a等于666同学你说我改没改这个OBG对象呢?从编码的角度来说啊,其实你改了是不,因为你把OBJ里边的值给改了,那你说是不是也属于更改OBJ啊?哎,那我问各位,你说如果我要这样写呢,我写的再暴力一点啊,OBJ等于,哎,我这么写X是100,哎,Y呢是200,我问各位,你说我这叫不叫修改OBJ呢?这必须叫啊,是不,各位这不是说改里边某一个属性值了,是把整个对象都改了,对不对。
17:33
各位,所以说这两种方式都属于你修改了,但是又能监测得到的是这种修改,不能监测到的是这种修改啊,OK,你体会体会,同学,你看我修改的是一个todo里边的档值,那你说todo改没改呢?没改,因为就这个内存分析而言,各位啊,你说todo这个对象所保存的那个地址值是不是不变的?
18:00
哎,但是里边的具体某一个属性值是不是发生变化了呀?哎,所以说有一种感觉就是view呢,在监测你到底改没改这个pros的时候啊,是一个很浅层次的监视,他没有去给你分析里边的东西你改没改,你比如说啊,各位view要是把事情做的很绝,说哎呀,这个todo啊,是传进来的pros啊,然后比如说我告诉你一句话,程序员todo你不允许改啊,然后程序员说那我这么的改行不行啊,比如说那也不行,你改里边的属性也不行,但是view没有这样做啊,View呢,它监视的就是很浅层次同学,就有点类似于什么,我们之前讲那个深度监视,OK,我说类似于深度监视,你能控制对不对,你加一个deep cho就能控制了,但是这个你控制不了,各位,人家判断的就是一个浅层次的东西,来,咱重温一下这个场景,回到list里面,我呢,给他传一个AA的值呢,是一个布尔值为真。
19:00
啊,我这个可不是包在对象里的,各位可是直接写的布尔值,对不好,我传给谁呢?Item,那item呢,在这儿呢,就接收一下A,然后在这儿啊,我再给你写一个check box,然后在这呢,读取的不再是这个todo的档值了,而是这个A,那你看一下效果啊各位回到这儿刷新初始化展示的时候,肯定是一点问题都没有的,但凡你取消一个,你可用的是V-model啊,是双向绑定啊,你的动作会影响数据啊,一旦你取消,各位必保报错是不?哎说老师那这回呢知道了,我这属于直接改,我这属于藏在对象里边改又发现不了,是的,说老师那我就喜欢他发现不了对吧,我就喜欢他这个样子,那我这样的话不是把功能就实现了吗?各位不建议大家这样写,因为毕竟U说了不让我们去修改,那我就问你,你这修没修改props修改了,你修。
20:00
不改了,Props传进来的对象里的一个属性值,虽然能实现功能,但是不建议大家这样写,但是在公司开发的时候呢,很多程序员呢,会利用这个东西去实现功能啊,反正这东西呢,不太建议大家用,因为你用着用着容易就发现什么呢,突然有一天这东西不藏在对象里了,就要报错,所以说同学听我说不要甩锅,甩给VGA model,他没招谁没惹谁,同学VGA model就是双向数据绑定,就是你的操作回头会影响的数据,但是求你一件事,不要把这数据写成pros这边传进来的数据,你说对不?各位VGA model很好,是你没有用好它,是不不建议大家这样写,OK,那这样为了避免我再重新写一遍代码,就把刚才那个my item list APP呀,诶来吧,这两个是一起的啊,Item和list给它放在这。Components里好,松手肯定是替换对吧,再替换,然后APP呢,给它拿过来,给它放在这儿src里松手肯定是替换对不?然后在这儿呢,各位啊,把刚才那行给你留着啊,留着就是整个这些啊全都给你删掉,完了我在这儿呢写一个vega model,然后是TODo.down刚才为啥说我要把那些东西都删一遍呢,我防止这事儿说不清,防止你觉得这个V-model好像也得需要这些东西的支持,其实是不需要的是不,各位这呢写好一个注释走,叫做如下代码,如下代码也能实现功能,但是不太推荐啊,因为有点违反原则,因为修改了pro,只不过view呢没有监测到是不?各位来咱最终呢再验证一下这个功能啊,打开这儿找到APP,嗯,打开第一个目前是勾选的来取消对吧,那这会应该也没问题。
21:56
题是false来勾选就可以了,好了,这一小节呢,咱们停。
我来说两句