25_尚硅谷_Vue_案例_静态组件

好，那下面今天呢，我们要继续做下一个练习啊，嗯，把这个。今天稍微难度大一点，跟昨天有很多相似的地方，难度大些。来，我们先看一下那个效果。啊，这个大家类似的事情咱们做过，只是类似于漏了写的。类似的事就是一个，呃，Todo list，有添加，有列表显示，有删除，有统计。能看到吧，啊OK。这个应该在里没写过这样效果吧，没有啊没有挺好来，那下面呢，我们先把静态页面呢给他拿过来啊，把静态页面拿过来配置，先暂时放在我们当前这个项目里面。

啊，放好是吧，那放好以后我们可以把当前这个项目呢，给给它打开。对吧，把这页面打开，但它是个静态页面啊，我们来看一下。就这一个能看到吧，好，当然当然现在肯定没交互对不对，肯定交付，后面呢，我们交付一点一点写啊一点写。好。那首先我们要做的第一件事情干嘛呀？流程嘛，对吧，拆分组件来。那拆分组件呢啊，我们这里面啊，其实这现在的拆分很简单啊，先看一下整体结构是上下结构还是左右结构。对吧。这上面是不是有个输入框，像中间有个什么是列表，下面是不是有个底部。能看到吧，啊，一共就这么三层，算中下的结果应该说对吧，那也就是说一个什么事呢，我们现在就应该可以，譬如说我们最外围的叫APP呗。

那里面这个叫什么呢？这上面的这个，比如说叫叫todo hand。可以吗？头吗？啊，这个地方叫todo啊，玻璃啊，或者叫的也行吧，可以接着这个。啊，To do。可以吧，可以好的，我这个列表里面是不是又是很多行组成的，那是不是可以进一步拆分，拆分细一点嘛，那我就要todo item，这一次我就把那个名字写的详细一点。能不能看到？当然你可以把这所有图do都给什么去掉。能不能看到。

这个应该是不难啊，首先大家一定啊，做的时候一定要一步一步做，不要着急啊，好，那我是不是要把它们都创建出来吧。啊，把他们都创建出来来。那首先呢，要把我们昨天写的背成一个。啊，我也别改名了啊呃，昨天呢，我们是叫后面备份一个吧，好接着呢，我把当前这个里面啊，这都来看看。啊，这个没留的啊，我们就不再去写了，好。来啊，我们来去创建组件，嗯，首先呢，这外围有一个APP的组件吧，那我就叫他APP美女是吧，好接着去创建一个什么东西。文件夹是吧，叫媒体是吧，好了。来上中下的结构，是不是上中下来不行了吗？首先是初入拍的。

这意思吧，来下面看看V，接着是todo，最下面是todo foot，对吧，三层结构嘛。那历史里面还包含了一个孩子。叫todo什么？能懂是吧，啊能懂啊好。那也就是说现在我们的第一步做完了啊，第一步已经做完了，那下面一步呢，我们要实现什么。静态组件对不对啊，静态组件，那静态组件我是不是要去拆分页面和拆分样式。来找到我们的这一个。配是吧，这里有样式有页面，好，这里面要注意它有用boot的样式吗？

没有对吧，所以我这个里面的这这条语句。是不是给它注释掉啊啊，说不定后面又要用了，对吧。能不能看到啊，先把它注释掉啊，注意。好，接着把页面打开。是吧，看它的层结构，大家看整体是一个，它看这里面大家就能看懂，这个里面是这样子的。看。是不是上中什么下能看到吧，那也说我可以把整个。这个给什么看下C拿到哪个组件里面去APP替换这个这个指标A是吧。接着啊，是要把这三个拆到不同的组件里面去，嗯，他写把这一个看TX放在我们的什么to里面。没问题是吧，好，接着继续把这一个部分。

猜在我们的什么list里面，Todo list。没问题是吧？好，继续将这个div猜到我们的什么todo。能不能看到好，我们这个地方是不是要引入刚才这三个组件来去写成标签三步啊来定义好已经好了，第二步引入是吧，引入啊第引入引入写什么写叫一个个来啊todo from。来点斜杠，看POS下面的土流汗了。是不是有是这个吧，诶写错了吧，To do。拍的是吧，看了吧，嗯，好，一共三个呗。没什么难度吧，好，这个是。

是吧，好，这个叫to。Todo，下面我要将它映射成什么？标签什么意思？Components这个吧，写todo panda这边是南路，再一个出入。还一个。没问题是吧，好下面啊，我在这里写标签名的时候，最直接的方式就是直接写这个名字。但其实呢，它还有一种表达形式，什么意思呢？这种写法应该是比较好懂的，还有一种这种写法把它都变成小写。但是呢，这个地方因为是两个单组成的嘛，在这里面再用一个什么呢，杠隔开。

这种写法他也支持。在哪个地方加杠，其实非常简单，就是这个大小切换的时候，因为你要不加杠，它就理解成为你的这个地方，到时候名字他就不知道是这个了。他可能你本来就是这个名字。能懂吗？啊，这个地方是把大写变成小写，接着在两个单之间用什么杠连接啊，这种写法呢，有人写，所以大家需要知道。啊，上面这种写法更直接一点，说实话。没题吧，好没问题，好页面已经拆完了吧，啊还有一个福特，对啊，这写错了是什么啊，这个是什么todo。这个吧，嗯。你没看到。好，那这个搞好以后下面拆什么。样式好，这个样式呢啊，我为了更好的拆分，我做了一个标识。

这个前面这一部分被被什么意思。基本的这个谁的A的这个是什么呢？Hand这个是may may也是谁Miss的后面有一个谁的的。当然你写的时候，你可能自己去写，那也是可以的啊，这里面只是为了去省点时间。好，那这样啊，我在这里。我可以这样做，看到我看一下C啊，大家看着啊，我可以这么一做，怎么做呢？我在我在这个在这个SC下面去创建一个样式文件。啊，其实很多种形式都可以啊，我这里面呢，去写一个base.css可以吧，把它搞进来，我在哪去引入呢里面。里面引入是不是任何组件都有效啊，所以我直接干嘛port。

点。当前点斜杠，什么base CSS？可以吧，可以啊，其他都不用弄，好晚下晚下把这个干掉。下面一个是AP里面的，也就这一段。我应该放到哪个组件里面去APP里面，因为这里面是不是有点样子啊，那所以我这个地方放它。能看到我是吧，好接着啊，接着继续往下啊，往下我们需要去看一下。下一个是什么？Panda，那就是我们现在去找到什么todo panda，给它拷过来呗。没理是吧，好继续往下，下面这一个。哎，这个时候我们item是还没拆呀，所以我要把它们都什么啊，把item也拷过去。这个不懂啊，放在我的什么历史里面。

没什么好，下面啊，继续最后一个。谁？葡萄是吧，塞到我的。Photo里面呗。这能看懂吧，好，那能看懂以后呢，下面我们要去NPM大的或者是run d都行。也说把项目给它运行起来。啊，其实到此为止呢，我们的静态组件就实现了啊，就是做了一个静态组件的功能。我们可以来看一下。没问题吧，啊，这是我们去做了一个静态组件的一个基本功能，现在有交互吗？没有啊，什么都没有啊，这数据也是固定的是吧。