爱生活，爱编程，爱自己。

课程名称：前端工程师2022版
课程章节： 第1章 Vue.js初识
打卡知识进程：4 / 20
主讲老师：Dell

课程内容：
今天学习的内容包括：

第1章Vue.js初识

1-4 组件概念初探，对 TodoList 进行组件代码拆分

代码：

代码解读：
在vue里面，如果在一个标签上某一个属性希望和数据绑定的话，也得使用v-bind的指令。‍‍
v-bind的指令的意思就是我希望让title属性‍‍和我的某一个数据发生绑定，
和哪个数据绑定？和inputValue数据发生绑定，‍‍所以一个标签的属性如果想和数据发生绑定的话，
你得使用v-bind的指令。‍‍
这就是v-bind的指令的作用，接下来跟它刷刷。

如果在一个标签上面，某个属性要绑定内容的时候，需要用v-bind，‍‍
如果在这个标签内部的话去绑定数据的话，直接用插值表达式 {{}}就可以了。
这块大家要死记硬背住。‍‍

接着再学习vue里面组件的概念，其实组件的概念不仅在vue里面有效，其实在前端里面‍‍到处都用到组件的概念，组件是什么意思？就是页面上的一部分。‍‍

我们来看刚才我们写的 todo list的小功能，
比如说这里面加一个hello加一个world，加一个dell，好，看下效果：

你可以看这是一个页面对不对？‍‍我不可能把所有一个大型网站的页面的代码全写在一个文件里面，‍‍写在一个文件里面去维护的话，它成本非常大，后面也没法维护。‍‍

一般来说当一个项目变大的时候，我们经常会提到前端要拆组件。
组件指的是什么？组件指的就是页面上的一部分，‍‍比如说增加这个按钮，你可以把它理解成页面上的一部分，你就可以把它拆成一个组件，

比如说 input 框，‍‍它也是页面上的一部分，你也可以把它拆成一个组件。‍‍
下面 hello world这样的一些列表项，‍‍当然你也可以把它拆成一个组件。‍‍
组件的概念大家要明确，组件就是页面上的一部分，理论上任何页面上的内容你都可以把它拆成一个组件。‍‍

这个时候大家再想一想，如果从‍‍网页的角度来讲，你认为最小的组件是什么东西？其实大家仔细想你就会发现，‍‍在一个网页上，当你把组件的力度拆到最小的时候，每一个组件其实就是一个dom的标签，

你想‍‍增加这个按钮，实际上它是不是一个button的标签，那么它就是一个最小力度的组件了。‍‍

接下来我们回到我们的代码里面，‍‍我们看一下上节课我们这里写了一个循环列表中‍‍对应的内容，
以后可能遇到这样的场景，现在我们只展示一个列表上的内容，‍‍未来我们可能会写很多的这种标签元素，对这个内容做一些包裹以及它的样式修饰。‍‍

比如这里我加了一个div，前面我就加一个span标签，span标签前面我再加一个 index，把它的下标展示出来保存一下，这个时候刷新hello world，‍‍然后再来一个dell，它就这样的一个展示:

但是中间我可以再加两个横线做一个间隔。‍‍我再来一个span标签做一个包裹，中间加两个横线，
可能我下面再来一个span标签包裹一下它的内容，保存:

我们回到页面上看一下效果：

也就是说未来有可能li标签里面的内容会变得越来越复杂，越来越多的代码会加入到这里，‍‍这个时候我们如果把所有的代码都放到这一个文件里去维护，或者说都放到这一坨里面去维护的话，‍‍那么其实维护的成本会变得越来越大。‍‍

这个时候我们就可以想，我们可以把li标签这一块的内容拆成一个小的部分进行维护，‍‍这部分是不是页面上的一部分，你看小的部分 比如0--hello是不是页面上的一部分？‍‍

那么如果把它拆出来维护，它就变成了一个小的组件，是不是？因为组件的定义就是页面上的一部分，‍‍那么我们就把它拆成一个组件，通过拆分的过程让大家更深入的了解一下在vue里面如何去拆分组件，组件之间应该如何的组合。‍‍

首先我在这里定一个变量，【第13行】
比如说 const 叫 app 等于 Vue点createAPP‍‍，
这里的意思就是我现在创建了一个vue的实例，这个实例的名字叫做app，‍‍为什么要用这个名字？‍‍

是因为我要在这个名字上面，也就在这个app上面去注册一些组件，‍‍怎么注册组件，我通过component去注册一个组件，它有方法，组件的名字，我们给它起名叫做‍‍ todo item，后面跟一个对象，描述了组件对应的内容，‍‍我们要做的组件其实就是0--hello这块的组件。

也就是每一个列表项我们把它封装成一个组件，‍‍
那么这个时候每一个列表项的组件的名字叫做todo-item，
组件对应展示的内容是什么？我们现在给它一个固定的展示内容，就是一个div里面展示‍‍ hello world。‍‍

它的意思就是在app这个实例上面，我们可以去使用一个组件了，这个组件叫todo-item，‍‍
组件的内容就是一个hello world，它展示的所有内容就是一个hello world。‍‍

写笔记的过程就是编程的过程。
写笔记的逻辑就是编程的逻辑。

那么现在我去循环展示列表项内容的时候，我可以不写下面这段的代码，

我把它都清除掉，‍‍我现在不去展示一个li标签了，‍‍取而代之我可以展示一个组件了，这个组件就叫做什么？‍‍叫做todo-item，刚才我们定义的组件，‍‍

我们保存一下，回到页面上刷新，这个时候‍‍我输入内容的时候没有任何的效果，页面上实际上你打开控制台它是会报错的，

原因在于‍‍我们如果要用组件的话，不能够这么去写，
首先我创建了一个vue的实例，createApp 创建了一个实例，
然后直接就挂载了实例，‍‍

那么如果你挂载之后再往上面去注册组件，实际上就已经来不及了，不能这么去写。‍‍

我应该先去‍‍创建一个vue的实例，创建完实例之后，我在上面去定义组件，‍‍

定义完组件之后，最后我再把实例去mount，‍‍挂载到哪里去，挂载到root这个节点下，这样一个顺序才可以，

这一点大家要注意一下，保存，‍‍回到页面上我们刷新，再点开控制台。‍‍

在 input框输入 a b c ，‍‍看下效果，下面就渲染出几个对应的hello world，

这里的原因是什么？
大家再来看一下这个代码。当我往里增加内容的时候，‍‍list这个数组的内容项会增加，

跟Dell老师学Vue拿高薪~

我就会循环展示多个todo-item，‍‍每一个todo-item对应的内容都是hello world，对不对？【第43行写死的】

我们说组件是页面上的一部分，‍‍一个组件应该包含这部分的展示内容，‍‍包含它的dom结构，

这块我们可以看到 todo-item 已经包含它的dom结构了，就是这个div，

同样‍‍一个组件还应该包含它的一些样式，比如说这里你可以写一些style的样式，
当然这个组件还应该包含这一部分的 js 逻辑。‍‍

也就是说你这个组件‍‍到底要渲染什么？你里面的一些逻辑应该在哪里写，也都应该写在组件里面。‍‍

继续探讨
这个组件其实‍‍它应该展示什么样的内容，是不是应该展示list这个数组里面一项一项的内容，

这种一行一行的解读代码的方式虽然费时费脑，虽然很笨，但是我能学会，学的很踏实。这种学习方式坚持下去。

所以它应该展示自己的一个数据内容，我可以在这里去写一个data，return‍‍一个数据出来，这里面我们叫一个item， Item的内容是hello，‍‍world我们改成dell，然后我们在这里可以用插值表达式去显示‍‍ item，

其实你发现一个组件的写法和上面 我们写没有最初的实例的写法，基本上是完全一致的。‍‍

这里既包含了一个组件的渲染的结构，又包含了它的一些数据，也就是它的逻辑。‍‍

写成这个样子，我们到浏览器看一下当前的一个效果，我们刷新这里输一个a‍‍，输入 b，
它展示的都是hello dell，

因为我这里显示的内容item我已经固定死的就是hello dell，‍‍

这个Dell老师讲课有点东西，环环相扣。

接下来我们想再做一个修改，做什么修改，我们现在这个数据不能让它每次展示的都是hello dell，‍‍而是让它展示成我‍‍上面组件，也就是外层 Vue 的实例里面对应的 list 里面每一项的内容，

也就是在这里我循环‍‍ todo-item 的时候，循环的每一项item的内容，我希望它展示出来，那怎么去展示，这个时候我们可以这么去写，‍‍我们先把index不传，先说item这个事情，现在每一个item就是要循环展示的内容，‍‍我可以通过 v-bind 的指令把它变成一个组件的属性，这个属性的名字叫做什么？‍‍就叫做content 等于item。‍‍

好，这么写意思就是我现在渲染todo-item组件，‍‍组件上面我绑定了一个名字叫做content的属性，它的值是item，这个item是不是就是列表中每一项的内容？‍‍

好，当你这么在组件上面去绑定了一个叫做content的属性的时候，那么这个组件其实能够感知得到，‍‍
它可以通过props来接收你传递过来的属性，
奇怪的知识增加了呢

怎么接受？
我们这么去写，我写一个‍‍ props，后面跟一个数组，这里我去写一个content，

它的意思是这样的，‍‍你既然外层调用我这个组件的时候，在我这个组件上挂载了一个叫做content对应的属性，‍‍
那么组件自己，我就去接收 content 对应的属性值。‍‍
props content 它的意思就是‍‍我去接收外部调用我这个 todo-item 的时候，你挂载在我身上面的 content 对应的属性的值，‍‍我接收之后在这里我就可以直接用属性值了，
该图片上传失败！
【见第44行代码】
好，保存一下，我们这么写完我们的代码，‍‍回到我们的页面上刷新，写一个hello，增加没问题，world增加没问题，
该图片上传失败！

好，这里我可以把这个div标签变成 li 标签，跟之前的代码‍‍结构应该就完全一致了，因为ul里面我们放todo-item组件，‍‍组件渲出来的又是一个 li 标签，所以就相当于ul里面又是 li 标签，
和之前删除的效果是一模一样。‍‍

通过这样的编写，我们就把之前这些 ul 里面每一个‍‍标签上的内容罗列在这里，我们就把它摘成一个组件来去维护了。‍‍

比如说我未来在想写 index，之前我们会在前面加一个index表示它的下标对不对？‍‍
该图片上传失败！

但现在如果你这么写index肯定展示不出来，因为我这个组件自己是没有index这个数据项的，‍‍我想用这index怎么用？

大家可以参考一下上面的代码去想一想，【第37-39行代码】

我依然可以这么去传递 v-bind index 等于这个index，
当然你上面这块要把item和index循环的时候都要列上。‍‍【第37行】

这个时候你这么去写它的意思就是我循环list中的每一项，‍‍每一项的内容我放到item里面去，
每一项的下标我放到index里面去，‍‍然后我往todo-tem组件上挂载第一个属性名字叫做content，
它的值就是item，也就是上面每一项的内容，‍‍我再挂载一个叫做index的属性值，它的值就是我们每一项的下标，‍‍在下面我组件去定义的时候，我会接受content外面在我身上挂载的属性的内容，‍‍同时我还会接受 index，index 也是调用我组件传递过来的一个属性的值。‍‍

这里我定义了content，index之后，展示index，content，我们来看一下组件运行的效果，‍‍回到浏览器上，刷新一下，输入dell，输入lee，输入world‍‍都没有任何的问题，

我们这样的一个to do list就把它拆分成两个组件了，‍‍最外层的组件大家可以认为是app，【第13行】

vue的app实例实际上就是一个最外层的大组件，‍‍而最外层的大组件的一部分，我们又拆成了一个todo-item这样的小组件，‍‍小组件我们怎么写的？‍‍我们通过 app.component定义了小的组件，‍‍
ta会从外部接收content和index传递过来的内容进行显示。‍‍

课程收获：
（1）对一些基础的概念有一些‍‍基础的认知
（2）通过使用组件可以提高代码的复用和可拓展
（3）比如使用 v-bind 可以实现 title属性 和数据的绑定

学习开始时间：2022.08.04 19:40
学习结束时间：2022.08.04 21:01
总计时：81分钟