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

呃，下面呢，我们来做一个小的一个练习，其实前面应该做过类似的东西，就这一个一样的，其实对吧，因为都是主化编码都一样。来啊。啊，我们把这个。本来的这个被子，把它保留一份啊。保留一份，写个名字就基本使用。接着写我们的，我们把这些都都可以把它删了，重新写是吧，好，我把那个静态页面拿过来一下。其实我们应该是有静态页面的。哎，不是这个我。

哎，有几个订单页面啊，嗯，我们现在做的应该是这个吧，把它拿过去。那我现在暂时啊，其实当前这个应用不需要我暂时把它存在这里啊，放在这里。审判的位置，我们可以把它打开。嗯，毕竟这个界面嘛，这还以前的肯定要改是吧啊。那首先啊，在做之前，你一定要知道，我们组件化编码它是有一个基本流程的。对吧，啊，应该要知道啊，第一步我们要去做什么啊，拆分组件对吧？啊拆分第二步我们要去实现一个叫什么呢？叫静态组件，第三步动态组件。啊，什么？静态组件和动态组件区别在哪？静态组件显示的界面数据是固定的，也没有交互。

懂不懂，那动态组件呢？有两个方面是动态的，第一个初始化显示。对吧，啊，初始化显示也就这个数据应该动态的展现出来。再一个就是交互了，这个交互就是我用户点击提交，点击删除。是不是都能操作啊。啊，其实这跟你用view还是用RA没有区别啊，都一样的，因为他们都是一种编码方式，叫什么呢？组件化编码啊，所以他们流程都一样。这个是大必须得非常清楚了啊。好，那下面呢，我们就去啊，猜这个猜的其实还是跟以前一样的啊，最外围是谁。APP是吧，这个头部要拆出吗？不用，因为它固定的这个文本是拆什么是吧，好下面。

就是左边和什么右边。对吧，整个外面啊叫APP我就不截图了啊，因为这个咱做过左边我们可以教他什么呢。取取个名字啊是吧，OKI可以，不但我这一次啊，我的主键名右的主机名都首字母都写成大写的。这个可以吧，可以啊好，接着这个list里面是不是很多行啊啊每一个我们可以叫它什么item。这是我们写的名称比较简洁，那如果我们写的要稍微详细点，可以写common commonem以及common list啊，这样写也行啊。没问题，好，那也就是说我们现在是不是要将这四个组件给它创建出来吧？啊，拆分组件中要把文件创建出来。来啊。呃，首先把路口要创建好，路口不是个GS吗？

叫什么？不能随便加写面点DS是吧，好最外层的组件直接写在sa下下面啊，就写在它下面叫APP。好，接着专门去创建一个文件夹component吧，Components是吧，不能component。Components。好，里面应该是不是有三个组件。能懂吧，好来啊，因为说一下啊，我们现在的这个组件呢，现在图片也没有，所以我们每一个组件就单独一个文件就可以啊，如果写的复杂的话，应该是个文件夹。因为有可能有图片嘛，我们现在没有啊，所以我就简单来做，先来去搞我们的。APP有了以后，下面左边是什么？爱是吧，哎，爱的右边历史的理念挨着。

拆好了吗？是吧，好，那也就是说其实我们的第一步就搞好了。能懂吧啊OK，不过在第一步的时候把这个搞一下，这个是固定的编码，说实话没有什么变化啊，看到引入view记住了，大家写，千万别写错了，引入APP对吧？写一下另一个view EL是什么井号，这我就不看了啊，刚才写过是吧？接着将A映射为标签，Components。写谁PA，就是写一个模板，Template模板字符串里面写的什么，哪个标签APP。

是基本上固定。啊，所以这次我就直接把它搞好，那下面呢，我们要去做我们的第二大步啊，静态组件是吧？啊，我们要去实现一个静态组件，那实际上我们现在就要去拆分页面和样子。来看一下我们的这个里面的东西。诶，这个里面它是不是用了一个boot的CSS啊，所以它我们可以把它怎么说呢，看到这里它是公用的啊，我们可以建一个文件夹就叫CSS。啊，把这个放在这里。啊，这个我是临时放在这里的，这个文件夹可以不要的，能懂吧？啊这个是需要的好了，但是这个boot CS在哪引入呢。啊，页面里面引入就可以。好来一个啊，什么link呗，点斜杠啊是下面的不是吧，哎，没有先要文件夹是吧，提示啊，一定要有提示。

问题是吧，好，关闭好，下面我们继续来看这个里面的东西，好，它有自己的样式，有自己的页面是吧？先拆分页面也很简单，大家看一下啊。这不上面这不下面吗，整个就是这个第二位呗。对吧，看下C啊，这外面不要啊，放在我们每一个组件里面，去APP组件里面吧，放在这边。听懂吧，这个头部不用动对吧，稍微改一下这个是吧？啊好，这个头部就不用弄了，那不用弄是下面这部分是吧，下面这部分又分为左边和是吧右边。左边这一部分的猜到我们的什么爱的这个主页里面来是吧。能不能看到好，接着继续的猜啊，这一个右边的这一部分，猜到我们什么list里面这边来。

怎么看到？好，那我的AP里面是不是得引入使用这两个子主页？先，一共三步，刚才说过了，先什么引入from？来看一下，点斜杠，Components下面的再来一个。改一下啊list是吧，嗯，情感提示好了，这一个就是什么。第二步。映射成标签，用一个配置components写两个I以及什么你再写两个标签。在这里是吧，啊。这是一个啊，写成自闭合的啊也可以啊，来个list，那么看到没问题是吧？好，来页面相当于采访好了。

看吧，下面要猜谁？样子。这个样式，现在其实这个制定样式只是在哪个里面用到了在面里面。在这个list里面有用到，其实这个呢，还不是list的，这个ii不代表行吗？13是谁的了item的，但现在呢，因为我们写静态组件，Item现在没法写，所以我们先暂时的把这里面所有的。都塞到这个什么呢，List里面。甩过来大家看到啊，这个历史里面，这里面不有一个class吗？其他的按出来说这个ii是不是应该拆到单独的item组件里面去啊，那因为我现在静态组件现在没法拆啊。好，那到此为止，我们的样式也拆完了，那也就是说现在我这个项目运行应该是要有一定的效果了啊OK，首先我们来看一下我们当前的这一个。

把它关了。是不是可以啊，可以说明我们的第二步已经做好了，就是静态组件。嗯。是不是觉得有点太简单是吧？啊，等会我们把这个改掉啊。下面做什么？因为我们奇门熟路了，组件化编码咱已经做过，下面做什么？第三步动态组件，动态组件是不是又分为两步？第一步动态显示初始化数据是吧？那下面就有个概念，我们这里面的数据是谁？是不是这个列表啊，那下面我们要对这个列表的数据要定义一个名称。确定它的类型，这些都是要在写之前先确定好的，先要给它取个名。叫什么？

我这个列表的数据。Comments嘛，对吧，什么类型。数组吧，数组里面每一个元素是一个什么类型对象，因为它包含谁说的对吧，说的什么内容，是不是两个数据。啊，这个呢，我们可以叫name，这个可以叫content，可以吧？啊OK，那下面一个问题，这个数据放在哪个组件里面。这是最重要的一个点。也就是说我们一共有这么几个组件，我们先来再说一遍啊，因为以前肯定说过最外层是APP。这是爱的是吧？这是list的，无非就是这三个可以放啊，OK，里面有item，肯定放在item里面啊，那现在有三个组件可以放，我是怎么去决定到底是放在哪个里面的？判断的依据什么？我不要结果，我要的是依据。

啊，就要看这一个数据是某个组件用到，还是某些组件用到，能懂不是某一个，那我就放在这个里面呗，是吧，那要是某些，那就放在他们的什么副组件里面。也就说是一个某个还是某些的问题，懂不懂？好，首先看一下爱的需不需要。需要，因为他要往那个数组面添加一个。是吧，List需不需要，需要它要遍历读对不对啊，内部还要删除对吧，那也就是说我们的艾和list是不是两个组件都需要吧，那放在每一个里面都不合适，你放在艾里面也不合适，放在不合适怎么办啊，放在APP里面啊，就是因为你是某个还是某些的问题。能不能懂，嗯，那也就是说我们现在分析出来结果是在哪个组局方数据APP。

啊，在哪个里面通过什么形式放。贝嘛，是吧，固定的。记住主件里面写的时候必须是个函数，Return一个什么对象。没问题是吧，好，刚才我们取过一个名字，叫什么comments，什么类型数组，我们还说过了，这个数组里面是不是一个一个对象。某个人说对吧啊，譬如说是包我吧，这么来一个啊，接着说的内容是什么，对吧，是view啊。说啥呀？啊，还不错是吧，好，下面啊再来一个怎么着，来个两三个吧，确实一个有点说不过去啊。啊，这个呢，是卡特说，卡特说啥呢？说you so easy。

啊说那个班长说，班长说你有瘦瘦是吧，啊好。来啊，下面啊，下面我们初始化书以后，下面最终的目标是不要展现出来，展现不出来了，我一直没插没插电。好来啊，下面要展现你得去看啊，是我们当前这个AP来显示吧，不是我当前P来回显示他对不对，是不是得交给他的职业是哪个。历史的显示列表嘛，对吧，所以我要将这个数据是不是传过去，那最简单的传递这个地方就涉及到一个概念，叫组件兼什么通信，对吧？这个应该是反复强调过的组键兼通信，这个跟你用view还有react没关系啊，啊没有任何关系，都一样。

那组件通信最最简单最最原始的方式就是通过标签属性是吧？那也就是说我现在是不是要通过一个属性把这个属性的值传过去啊，那我用什么属性名合适啊？最好是同鼻音。你不要想方设法说搞一个C什么的啊，OK，这个。最好是同名好，你说我现在这样写法对不对。咋不对了，对啊，这个地方必须写一个冒号。对吧，因为现在如果不写冒号传过去了，是不是这个文本啊，对吧，而如果加了冒号传过去了，是不是这个变量的值。能不能啊，好。

那传给它来，通过它，那我的历史是不是要去接收啊，这个地方一个组件想要接收。附组件传给他的数据必须要有一个概念叫声明啊，声明接收属性。这里面呢，有一个配置叫威写，大家自然就懂了。啊，声明接收属性，介绍哪个属性。Components说明了我这个属性名，外部团队是属于必须是components吧。能不懂那这一个属性啊，结果是什么呢？这个属性，这个属性就会成为组件对象的属性。而我在模板里面，模板里面可以直接读取它。可以直接就看到这个属性，就跟那date一样。

直对的是我内部的属性对吧，是我内部的。这个时候就从VM变成了组件对象。因为我现在外部是不是只有一个VM对象，其他的都称为组件对象。我们在组件对象里面是不是也在这里面，是不是也可以声明对塔对不？我声明date的话给这个对，譬如说假设我生边的一个A为一。那你说这个A属性定义的时候是写在这一个date里面的是吧，但是我们说过了，以前说过是VM里面是不是也有这个属性，但现在不是VM了是谁？组建对象啊，也就是说我现在再去打印输出this this不再是VM了。不是VM是什么，当前这个组件对象啊，但是它的那个使用的方式跟VM是一样的。就VM以前怎么用，现在依然怎么用。

能懂吧，好，这个我们现在没有啊。来这一个属性我接收以后，我在这个里面是不是直接可以用啊，直接可以用的话，那我这一个ii是不是便利产生。而且也不能写ii。应该把它抽取成一个什么。Item组件呢，刚才不是搞过这个事吗，就把这个。搞到什么里面去，那既然标签搬过来了，它对应的样式是不是也要搞过来？啊，也就是说本来这个ii看到这边。能看到吧。都是他的。放在什么item里面？那也就是说我在历史里面是不是需需要去使用item组件，那又是那三步啊引入啊，OK，直接来一个。映色。

哎，在这里是吧，好叫components对吧，下一步是不是写这个标签呢，来写。啊写这个标签，但是呢，我们这个地方啊，是需要产生多个吧，来什么指令。Reform，好把这个结构性啊，易水components，因为我的当前组件对象呢，已经有这个属性了。就他能看到吧，好，这个里面写必须写，写一个comment，写一个index。接着我应该有一个冒号，K等于index。好了，这个压缩，这个comment要交给谁去？是不是交给item组件，现在我交了吗？没有，那所以我这里面应该怎么显示。

记住对啊，这个冒号说的很关键，就是冒号啊，给它是吧。能看到吧，嗯，好，那下面我的item这边是不是要读取这个属性，先要声明接收对吧，写什么pro最简洁的语法是不是这么写，就是说明了一下我的属性名是吧？其实啊，有一个比这个比较写的比较详细一点的这一种写法，大家看我写一下啊，看看大家能不能懂，OK。好，写一个object。什么意思啊，这里面它指定了来说一下啊，这种方式只是指定了属性名，指指定什么属性名，而这一个它指定哪些东西呢。指定属性名和属性值的类型，其实在里面也有类似的语法呀。

用到一个那叫pro对不？还要把这个pro还要单独引入啊，你看他多舒服，就用原声的。就是指定类型的时候，完全。就用了原生的语法吧，没有去说引什么其他的库。啊，写起来也比较舒服一些。好，这是这还不是最复杂的啊，先写一个中等难度的啊，这基本上中等难度好。那也就是说现在我组建对象上面是不是有个component的属性啊，那我这个地方我要去动态显示一下，这个该怎么做呀，两个大框写什么呢？component.name。是吧，说内容是什么呢？点content。

就这样。不在了吗？对不对？两用大卦表达式来去显示数据吗？刚刚说过来，我这里面所有生命的属性，我的主建对象是不可用啊对，就这么个事，好，现在我们来看一下。那好了，已经。他的这个这个项目的反应其实比项目的反应要快一点，就是你改了以后。它这个更新的特别快啊，基本上现在就是好了吧。嗯，好了，那也就是说现在我们的第三步的第一步啊，第一小步搞定了，就是动态初始化数据，对吧，初始化显示已经没问题了。嗯，好。把这个提交。