36_尚硅谷_Vue_案例_初始化显示

我们来看一下。这个。还有印象是吧。来，我们把那个静态页面给它捞过来。这里面有一个user，把这个页面呢，先暂时的先放在这个static下面存一下。我们打开来看一下啊，看一下这就这个呗，可以把它打开。就这吧，嗯。好。那我们要写它首先第一步干嘛呀。是不是拆分组件呢，啊，这是。这一个部分是设计是吧，这一部分是可以说是历史人，最好不叫历史的，叫妹会好一点，因为其实这个里面我不知道还有没有印象，这个里面一共有四种状态。

对吧，搜索之前，搜索中和搜索后有两种成功或者什么失败，你用list其实是不太好的，只是其中的一种情况。看吧，我们可以用一下，另外一个叫什么呢？妹可以吧，看一下。因为这个咱做过啊，应该快速的把这个组件给它抽取出来来啊。呃，我这个地方来去将这个组件给它建一下。啊，首先有一个components。对吧，这个呢，稍微稍微的改一下名字。这个是我们开始的第一个。接着我们还是要创建一个AP吧。创建一个pap，好，就是里面有两个。啊，一个是上面的设计吧，搜索吗？美女是吧，还有一个。

下面的我们把它叫做主体部分。OK吧，OK，好。来啊，那下面呢，我们就要去做我们的拆分组件以后的下一个就是静态组件面这边它是不是用到了布头的样式，所以我要去页面里面把这个给他什么。是不是放开呀，啊放开好。来，把它们都先关了啊。放在下面擦一遍。啊，这个大家实际上是应该猜过的，这里面一共就是这么两个部分。看到吧，我把整个C拷贝到每一个组件里面去APP。就这个呗，好，接着这一部分可以把它搞到什么X放在色系里面。是吧，好，接着下面这一部分放了什么。

Main里面，其实这只是main里面的一种情况。那么看到他还有其他情况，等会再写，不着急啊。好。来把这两个弄好以后我这边。做什么啊，对，还是这个套路啊，套路好，第一个色系from啊，点斜杠component下面的设计点view啊，Import may from，点斜杠component下面的什么呢？那下一步。映射成标签是吧，好一个叫设计，这个没问题，其实这个名字有问题。这个名字啊，在HT里面这个名字是不能用的，也就是他这个名字跟HT的名字冲突了。这两种冲突了该怎么办？

是不是得用一个别的名字啊，你说这一个，也就是说我在这里面如果写这个，如果直接我们最后要写两个标签吗？一个叫设计，这个没问题，这个可以写。这个是可以写的，那下面这个不能写，这个不能写。这个名字他不让用。啊，怎么办？是不是得改一个别的名字，改个别的名字，用个什么名字呢？譬如说啊，譬如说啊，我们啊得写一个名字，就叫取个什么名字好。嗯，我们当前是就写这个吧，有者使命可以吧，那也就是说我们现在的标签名是什么。You me。当然，你也可以这么写。有没有看到啊，这种写法也是有的啊，大家看了以后要认识。好，那现在呢，我们的页面虽然拆完了吧。

下面。样式吧，样式，这个样式呢，只有这个面里面有这个卡的，卡的什么意思，卡片，卡片指谁呢？实际上是用来去描述他的一个样子。那也就是说这个里面所有的样式都在我们的什么main里面。大家看到这里，这不有一个class叫什么？这咱是做过的啊好，那到此为止，我们的这个静态的组件就弄完了，我们现在看看能不能看一下。啊，先把它清理一下，刷一下，看他包不包数。明白错吧，是不是出来了啊，基本的结构出来，但是现在都是进都是固定的，也没有交互是吧，数据也不是动态显示的啊。那也就是说我们初始化的展现需要做了。

说我们第三步嘛，第三步的第一步干嘛。初始化展现，初始化展现呢，也就是说开始的时候是显这个样子吗。不是啊，完全不是这个样子啊，开始的时候是这个样子吧，懂不懂啊，OK，那这个怎么做呢？来，首先你要确定我们是去写哪个组件。选哪个密码。我们刚刚说过了，我当前这个组件一共有几个状态，四个，其实有四个显示的效果也就四个状态，那也就是说我这个地方需要去定义四个状态，对吧？啊，跟以前还是一样的啊，First view开始了是to，也就是说如果它为柱，代表我显示的是第一个界面。那此时啊，此时譬如说我搞个大点的HR。啊，什么时候显示HR呢。

啊，大看呢，我就来一个we if或者we should都行啊，First you啊，为真的时候我显示什么呢？现在输入什么用户名搜索。这能懂吧？第二个状态是什么呢？请求中，譬如说我们写个什么楼顶开始为什么？能看到吧，那也就说它为处的时候啊，如果它为处，那这个地方是不是显示一个假设啊，我就显示一个楼。可以吧，可以好，下面还有两种情况。啊，下面两种情况是我请求以后有返回，有两种结果成功或者什么失败。那如果我成功，最终是不是要得到一个优时？

这个不懂，开始我没有懂吗？还有一个。错误什么信息啊，开始了空串或者是空都行，有没有看到，那如果它有值。如果这个是真，那我干嘛去？那我就显示这个值啊。这不I哟手机吗，错误信息。它有值是不是就显示它，那这三个都满足啊，才显示水去。是不是显示下面的。我一共就四种情况吧。这个能不能看懂，好，那下面啊，下面我这个地方实际上写一个就够了不。写一个就可以。但是我要干嘛去？我要便利呀。v for v for的写法很固定，应随。Users，那每一个都是一个什么，User index。

是吧，冒号K等于index。那下面我是不是从优者里面取到我想需要的信息，这里面一共有这么几个信息，首先是这个用户啊，这个用户他的主页的地址。啊，也就是说我这里要用什么冒号。关键是是什么名字的问题，我可以设计一下假设，我这里面就来个ul。可以吧，啊这个地址啊，搞一个下面这个是什么。是不是他的头像啊，好，那个头像是不是也应该在U里面。是吧，啊，那可以来个阿凡达。可以吧，或者阿凡达U都可以。啊都可以，这都没问题，这里面必须写个什么冒号，还有一个。这个用户的名字。

那应该有一个优点是吧，那那也就是说我们的优者里面应该是一个什么样的结构，这个要能够去提前设计好是吧，有一个URL。是吧，啊的一个值，我这里面标示一下，还有什么阿凡达下划线UL4个值是吧，这个串还一个。那又是另外一个字。三结吧。好。那整个我们基本上就设计的差不多了，看看我们的初始化显示到底对不对，大家可以看一下啊。是不对的。没问题吧，你这么显示请输入用户吗。