00:00
接下来呢,咱们就开始做图do list这个案例了啊,这个案例啊,一开始的时候它有这么一个目录,这个目录呢,我把它放到咱们的Vs code里边来啊。直接把它拿过来。啊,复制一份。OK,那么这个目录我们点开之后来看一下,它里边有两个文件,一个是index.css。啊,可以从上面看一下,有一个base,就是放在HTML里边的。还有什么呢?APP还有。还有me,还有埃特,以及还有这个福特。然后呢,index.html当中代码。它最外边有个div,这个标签咱们是不要的,然后呢,这个标签它是一个包裹的容器,标签里边还有一个div,紧接着里边是分成了三个部分,这块呢,有一个hier,还有一个mean,还有一个福特。这个页面呢,我们现在可以打开一下alt加B。打开之后呢,可以看到这个效果。这是一个静态页面,里边有文本框,输入内容可以去选中或者不选,还有全选啊。
01:03
那么我们要把一个静态页面放到我们的呃脚手架里边,变成组件的方式进行开发,叫做组件化的方式吧,那所以说我们要做的第一件事情就是什么呢?就是拆分组件,那拆分组件怎么拆呢?这里边儿这个例子,我采用的是上中下。三个部分的方式来拆分组件,所以说这样来看呢,我可以拆分成三个组件,那一个是hier,一个是主体部分,还有一个是底部F啊好,这是给大家去分析啊,当前这个静态页面我们可以把它拆分成三个组件,因为要进行组件化的方式进行开发啊,还有呢,当前这个HTML文件里边引入了一个CS的文件,刚才这个文件代码大家也都看到了。在这个文件当中啊,有一部分样式,我们会把它拆到哪儿呢?拆到咱们的。这一个index.html当中,在这里面去引入并且使用,那有一部分样式呢,我们要拆分到各个的组件里边来。
02:01
按照刚才我们的分析,当前这个静态页面我们要拆分成三个组件。那实际上呢,大家看一下这一块是展示数据的,里边的每一条数据呢,我们也可以把它变成一个组件,如果要是这样来看的话,那么我们就会把当前展示出来的这个界面一共拆分成四个组件。整个啊,注意最外边是一个负极的组件。里边有一个上,然后还有一个中,还有一个下,中间这个部分内容,每一条数据可以再变成一个组件,所以说这样来看啊,我们可以看到。这是一个组件,这是一个组件,这儿呢又是一个组件,里边还有一个组件,当然所有的组件最终都会在我的脚手架,就是当前咱们这个项目的APP组件里边去用,所以说这是第五个,一共有五个组件,当然APP这个组件呢,咱们就不用再去写了啊,那么注意啊,我在做这个例子的时候,首先我做的事情。怎么干啊?直接先找到我的to DOS下划线配置这个目录,然后呢,找到index.css。
03:05
在这里边呢,有一部分样式是需要在我们当前的index.html当中去引入的啊,大家可以看到这块body嘛,所以说呢,我会在public目录当中新建一个目录叫CSS。并且在里边新建一个文件,比如说叫base.css然后呢,我会把index.css里边HTML当中要用到的一部分样式拿过去。那我就从这。啊,然后放到我的base.css当中,那下一步要做的事情是什么呢?好保存啊,下一步做的事情是什么呢?无非就是把当前这个文件放在index.ht mi当中引入一下,那我就来一个link标签,点杠CSS下边的base.css这就可以了啊。好,那我现在把这些东西全部关闭。先把这个文件CSS文件搞定了,然后呢,注意刚才咱们说在这个静态页面当中,咱们要分成几个部分,对不对?上中下,包括他们还有一个最外边的负极组件,包括里边每条数据也变成一个组件,所以说呢,我接下来要做的事情是在src当中新建一个目录。
04:14
Coms components,在这个里边我会直接新建那么组件。那么上中下包括里边每一条一共是四个组件,上边这个组件我把它命名为,中间的这个呢,我把它命名为list list里边的每一条数据变成item item组件,然后下边这个变成foot组件,所以说我在这直接创建这些组件,第一个是foot。呃,是H1A,注意啊,H1a.view然后再来。下面是list.will。再来一个组件。item.view好,再来一个组件,接下来是foot点,这样呢,这几个组件就都被我创建完了,那下一步做的事情是。
05:05
我们需要把index.html的代码放到每个组件的模板当中,是这个每个组件的HTML模板当中,现在每一个组件里边这些基本代码还没有呢,那我就直接从APP这边去复制过去啊,它放到福特里边这个位置,改个名字foot。好,把这个再复制一份。再放到我的hi当中,拿过来这个位置he DR,好,再放到我的item当中,这个位置是item,好,再放到我的list里边来,这个位置是list。单引号啊,OK,格式化一下保存,这边也是格式化一下。格式化一下保存,这边还是格式化一下保存。这边仍然是这个操作保存,这样呢,我就拆分出来四个组件,并且四个组件里边有一些基本的代码,然后接下来要做的事情就是把index.html里边静态的HTML代码放到我的每一个组件里边,注意看啊,看我是怎么做的。
06:08
首先呢,我会把当前的这一块直接复制出来,放到我的app.view当中。放到这来。然后紧接着格式化一下,格式化完了之后呢,我把这些代码折叠一下,折叠再折叠再折叠,这样我们可以看到这有个头,这有个主体,这有个底部,那头不用说了,底呃,中间这个主体部分里边有Li。每一个Li呢,就是一个数据这块有两个,那这个Li呢,最终我会把它放到我的item组件里边啊,那现在我们来拆组件,看我怎么拆的啊。直接把当前的这部分HTR苗剪切走,放在什么呢?注意放在我的hi组件里边。这个位置。好,拿过来格式化一下,不用管了啊,然后再找到我的APP。再找到我的F,把这一块内容放到我对应的F组件当中来。
07:06
好,拿过来格式化一下,好,不用管了,然后再去找到我的主体部分,拿过来,放到我的list。当中。啊,格式化一下,然后再找到我这里边儿的Li啊,因为这里边现在有两个Li,是不是我只要一个,那一个我不要了,这是没有关系的啊,那这一个Li就是一项,这一项呢,我会把它放到item组件当中来。好,拿过来格式化一下,注意格式化完之后保存。这边格画完完也保存啊,或者说我们直接整体做保存就行了,现在我来说说他们之间的关系。打开一个画图工具啊,整个是我的APP。点六组件,然后呢,在这里边我们有什么呢?H he DR组件,还有list的组件,还有F组件,而我的list组件里边要用到谁呢?It组件。
08:05
所以说他们之间的关系,大家来看一下啊,我换一个颜色。最外边诶。最外边是一个负极的,然后里边这是一个子集的,这儿也是一个子集的,这儿还是一个子集的。啊,这是他们组件之间的关系,那我里边那个item呢,是当前list似的组件里边的一个子集组件,那这样的关系呢,我们就已经确立出来了。好,确定出来之后呢,现在在我的APP组件里边和那些组件都没有任何关系,我要让那些组件和我的APP组件发生关系,引入进来,所以说到了这儿啊,第一步是引入直接的子集组件。来一个point,那第一个是hide from。点杠components下边的什么呢,还点。然后下一个再来一个什么呢?List from点杠,Components,下边的什么呢?List。
09:00
点,还有point,这个是F组件from。点杠component下边的什么呢?点那我引入完之后,下边就应该是注册组件。Component。那我一个一个复制过来。一个。List是第二个,再来一个。是第三个啊。然后好了,那我的组件都已经拿过来之后,那我上边就可以直接去使用了,比如说第一个啊,应该是我的header。斜线CTRLDCTRLD啊,然后第二个是我的list,第三个是我的什么呢。好,这边干掉,这样我当前的APP组件当中就有三个直接的子集组件,那我的list的组件里边得需要谁呢?需要item,所以说我还需要回到list组件当中,在这个位置也是引入。自己组件。然后再来一个什么呢?Item from点杠。
10:03
Item点,并且也需要注册。Components。然后atem,那我上班就可以直接去使用了。斜线啊搞定,诶这个注意是大写。好,格式化一下保存,那我APP这边也是格式化一下保存,此时呢,再打开我们当前的这个界面,大家来看一下我刷新。好,我们可以看到这里边有内容,但是样式有没有呢?没有,因为我们现在还没有引用样式,现在再回到这个index.css当中,从上往下看,这块有一个APP的样式,大家可以看一下,是container,所以说这个样式我们直接把它放到我的APP组件里边就可以了,大家可以看到啊,这是有的。放到这个位置格式化一下,搞定一个之后再去找。下边的hier从这到这都是hier组件里边所需要的样式,我都已经标记出来了啊。好,格式化一下,放这再往后找,下边是我的命,命就是主体,主体放在我的list的组件当中。
11:06
来这格式化一下,保存好,再继续找到我的item。到这里。Item组件。拿过来。格式化一下保存,还有一个。手在底部特。好,复制放在我的复特组件当中。格式化一下保存,现在我们再打开这个界面,大家来看一下,几乎都已经有效果了,当然也就说这块只有一个数据啊,原来的静态页面当中有多个数据呢,那我怎么办呢?那无非就是把当前item这个组件是不是。It特木这个组件在list的组件里边使用的时候,让我这个item多来几个。保存一下,我们再来看一下效果。这是我们的文件,是不是这就搞出来了?当然这个数据应该是动态的,而并不是我们写的固定的这种形式,所以说啊,看到效果之后我就把它删掉了啊,刚刚咱们做的事情是把todo list这个案例的静态页面拆分成我们所需要的组件,而且组件的关系我们已经确定出来了,APP点是最外边的负极组件,Hier list foot是三个子集组件,List组件当中有item item是list组件的子集组件啊,并且引入样式。
12:18
好,这个组件拆分,咱们就先到这里。
我来说两句