00:00
好嘞,各位,那在这一小节呢,咱们把todo list这个案例呢给大家总结一下,笔记呢,已经给大家写好了,在这儿呢,Read me这个markdown文档里面最后一个总结todo list案例之前吧也跟大家说过,就是不太建议各位啊,直接就打开这个markdown去查看,因为你这样看的话,很多的样式没有啊,这个目录的层级啊,结构关系啊,你都看不出来啊,建议大家安装一些这个点MD文件,就是这个markdown文档的查看软件,如果你实在不想安装,各位也行啊,咱之前说过Vs code的里边是不是有这么一个预览的一个按钮啊,你点一下诶,就有一个特别好看的样式,对吧?文档还是那个文档,只不过呢,给你匹配了一些样式,让你看起来能更舒服一点,你比如说这个关掉,目录也关掉,你在这儿看是不是挺好的,如果说你想做的更到位一点啊,各位就是不借助他的这个预览,那借助哪个呢?就是你自己在电脑上安装一些markdown的查看软件啊,之前也跟大家聊过,我安装的是这个叫做。
01:00
反正各位呢,也可以安装一下,我觉得还不错啊,它的优点呢,就是可以随意的切换主题,哎,你比如说晚上我看的时候来调上这个对吧,我喜欢那个get风格的,那就调这个,哎,反正我平时呢用的是这个,哎觉得还可以,还有就是呢,你可以在这个Vs code的里边呀,安装各种各样跟markdown文档相关的插件,你比如说呢,我搜索一下mark当有很多很多啊,你可以去自己看看,挨个试一试啊,然后我安装的呢,是这个,各位我觉得还不错啊,推荐一下就是这个东西open in external APP,就是用外置的APP打开这个文件,它有什么作用呢?作用在这儿各位就是当你去打开这个markdown文档的时候啊,我刚才是怎么打开的,我刚才是这样,各位来这个呢,都给它关掉,我刚才点右键选择在资源管理器中显示,然后呢在双击再打开,诶这就特别慢,诶用了这个插件之后呢,你可以右键有这么一个选。
02:00
向外置APP中打开走,Ta呢就直接打开了,诶这样看起来比较好,好了各位来吧,开始总结啊,我这样啊让左边呢是咱们写的todo list这个案例,右边呢是笔记,咱整体过一遍,我把这个大纲呢给它调没好开始划到最后啊划到最后总结todo list案例首先呢,我们从这个案例当中啊学会了一个东西,就是组件化的编码流程,这个案例呢,是我们做的第一个组件化的案例,对不对?那么第一步就是拆分静态组件,你一定要注意拆分组件的时候,各位原则一定是按照功能点去拆是不?而且你给这个组件命名的时候,尽可能别叫什么HR啊,Hier啊,特啊这些跟HTML元素冲突的对不?各位哎,这会比较简单,静态组件呢就拆分完了,而且我在实现这个静态组件的时候,不考虑任何交互,对不各位就是结构和样式,随后你再考虑。
03:00
这个实现动态组件,而且在这儿呢,同学一定要考虑好数据的存放位置,你看我给你总结的啊,各位说数据是一个组件在用,还是一些组件在用,这什么意思呢?同学你就比如说我们最开始分析这个案例的时候啊,我们是这么觉得的,说呀,这个蓝色的是list,那么list组件呢,就要展示一堆要做的事儿,那所以说呀,我就得把那个todos数组,哎,就那一堆要做的事儿啊,那就得给他,但是其实你少分析的一个地方,各位就是这。Hier组件你说用不用那一堆todos,也就是说这里边确实有一个todos是吧,这个数组嗯,在这呢,里边有点内容,你是直接把todos给了蓝色的list,那同学我问你hier组件,你就告诉我用没用这个todos,其实他用了各位list用的比较直接啊,你看起来也比较直观,哎呀,一堆东西它变利了,它展示了,他用了,那同学我跟你讲,Hi组件其实也在用这个todos,你觉得呢?
04:06
开着组件,只不过用的比较隐晦,它不是直接拿过来我便利展示,而是什么呢?往里边放东西对吧?各位,那你琢磨琢磨我们嘴中的用,哎,说我用了这个数据,那有可能是两种动作,各位,第一个就是最标准的读取出来,我用展示,还有一种同学就是改或者说写,对吧,不就是对数据的读和写吗?那读和写统称为啥呀,用数据呗,对不?各位,所以说当年如果你要能分析出来,哎说老师这个todos啊,好像蓝色的list在用,红色的hier好像以后往里边添东西好像也在用,那这个时候你就会考虑到把这个todos放到蓝色和红色他们共同的父亲那儿,对不对?各位,哎,你看总结就是一个组件在用,那放在组件自身就可以了,谁用就给谁吗?那要是一些组件在用呢?啊,可以放在他们共同的副组件上,那么hier和list的副组件是谁呀?就是那个APP。
05:07
所以说各位你也能体会出来,为什么人家采用了这种设计结构,就是首先来一个组建里边最厉害的那个人APP,随后下属再给你写一堆组件,然后再往上才是那个谁呀,VM,也就是说人家是这么设计的啊,用APP呢,兜个底儿,就是实在这东西你写不下去了,交给APP是不是也行,APP是所有人的祖先,他可以给所有人轻松的通过那个组件标签一层一层的传数据,对不对?各位啊,而且呢,同学你这个动作就是一些组件都在用todos,然后呢,你把图DOS放在他们共同的父亲那块儿,这种行为啊,其实叫做状态提升,哎,官网里边人家叫状态提升,说老师什么叫状态呢?从代码上来说啊,各位你APP里边所写的这个todos,哎,就这个东西其实就可以理解为状态数据,哎,什么叫状态数据呢?
06:07
就是这里边的东西一改,整个页面都随之变化,那你说这不就是状态吗?是吧?如果学过那个react的小伙伴呢,对这个东西应该比较理解,对吧,叫做state,哎,这不就是状态的意思吗?而且react里面也管这种行为叫什么呢?叫状态提升,OK,然后再进入第三步,就是实现交互,交互这块各位那就看你view的语法过不过关了对不对,绑个事件呀等等这些啊,获取一个用户的输入啊,Viga model啊什么的,好,然后再看第二个总结,就是我们做完了todo list这个案例啊,发现学会了这么一个东西,就是pros适用于哪些组件之间进行通信,所谓的通信各位就是传递数据,哎,之前咱说过啊,我有个数组我想给你,哎,那就过去对吧,我有个对象想给你,那就传过去,哎,那pro适合哪种组件之间通信呢?同学两种,第一种就是父给子传,第二种就是子给。
07:07
父传父给子非常简单,各位来红色的APP是父,然后这儿呢,咱拿这个举例子吧,就是list里边的这个item,粉色的这个喝酒这个item,那同学我问你啊,父如果想给子船,那你说得怎么写呢?非常简单,因为父里边是可以写子的组建标签的,可以通过标签属性是不是就传给了这个蓝色的list,如果蓝色的list还想再给自己的儿子,那就再通过组建那个标签属性,然后呢,通过pros声明接收,是不是一层一层一层往下传呢?这是父给子,那么子想给父怎么办呀?哎,咱说过子如果想给父传东西,要求父亲当年呀,偷偷的是吧?哎,提前的先把一个函数交给子组件,子组件在合适的时候调用函数,通过传参的形式,诶把数据就给了父组件,所以说同学在这儿,你看我们学到了这么两个东西,哎,子给父,要求父先给子。
08:07
一个函数,这里边还有一个问题,各位,就是红色的APP想给粉色的item传东西,那就有点麻烦,就得逐层传递,你看就是这两个箭头,你觉得呢啊,爷爷先给父亲,父亲再给儿子,是不是一个一个一个这么传下去,如果各位粉色组件里面再给你来一个绿色的组件也想要东西,那你就只能收到这儿,然后再往里边传,那同学你觉不觉得其实东西呢,在红色的那里面,想给绿色的传过去,那你觉不觉得蓝色的和粉色的其实都受到了打扰,他们原本不应该接受这些东西,自己也不想用,但是没办法呀,不得已这样做的是不?各位,哎,以后呢,我们会解决好,再看第三个就是使用vega model时,切记vega model绑定的值不能是prop传过来的值,同学,你要知道那vega model,一旦你给一个输入类的元素绑定了vega model,那就意味着你的你的这个勾选或者。
09:07
输入都会影响所绑定的数据,那这个数据如果是props各位,那你就违规了,你就修改了pros对不对?诶因为props是不可修改的,还有第四个就是prop传过来的,若是对象类型的值,哎,一个对象里边有A是一,B是二这种东西,同学你修改对象里的属性,你修改那A和B的时候,View呢,确实不会报错,但是也不推荐大家这样做,为什么?因为你想想,毕竟咱就说你这红色的对象里面,我知道你里边有很多的属性,但是毕竟这个东西是外部传进来的东西吧,哎,你尽可能不要直接去改啊,虽然你改了它没有发现是不,但是也不推荐你这样去做,OK,那么截止到这儿各位,这只是我们写的第一个版本的todo list案例,这里边有很多怎么讲麻烦的事儿,你就比如说这个红色的APP,想给刚才咱说的这个item传数据,你觉不觉得这事其实就挺麻烦的,哎,逐层传递吗?每一层都受到打扰了嘛。所以说这一。
10:07
版的todo list呢,不是很完善啊,你等着随着我们的课程进行,再讲一些新的技术,再讲一些组件间通信的方法,我们就会把这个todo list做出很多版本,OK,那这一小节我们先听一下。
我来说两句