课程内容：
20220812 - 今日学习的内容包括：
第2章 Vue.js基础语法、生命周期与事件
2-8 样式绑定语法
代码：
解读：
在 vue 里面我们如何的去编写一些样式相关的内容?
在上述代码的基础上，
我们去定义一些样式，
我们做了哪些事情？
在script标签上面我去写一个style，style下面我去写两个样式，分别叫做red color，给它一个red，
然后再来一个叫做green，
在vue里面我如果想给一个标签，增加一个样式可以怎么增加？
你直接加一个class等于 red 就可以了:
保存一下，我们看一下效果，Hello World 它就会变红:
我会问大家一个问题，如果你希望它的颜色可以控制，通过数据做一些控制可以怎么办？
我可以在data里面去写一个内容，一个叫做叫classString这样的一个内容，我给它叫做一个red，
使用数据项classString我们用 v-bind，简写成冒号 :。
保存一下，然后我们来刷一下，它还是红色的，没有任何的问题。
如果想把它变成绿色的怎么办？
我们可以通过vm.$data.classString="greed"，回车，数据变了，它的颜色就会跟着发生变化，所以我们可以通过字符串的方式改变数据来控制样式的展示。
除了我们可以用字符串之外， vue还扩增了一些语法，我们可以用对象或者数组等一系列的形式。
我们现在讲对象，我们可以定义一下classObject这样的一个数据项，我给它变成一个对象，这个对象里我可以这么去写，{red:true,gree:true}
它的意思是什么？我现在class要展示的内容是由对象决定的，
你要不要展示red这样的一个 class 类名？如果是true表示需要。
你要不要展示green这样的一个class 类名？如果是true也是需要.。
此时 Hello Word上面既有red又有green，
这就是我们想要的一个效果。所以你通过对象来去控制样式的展示的时候，它前面的内容表示的是你要展示的类的名字，后面true或表示你到底要不要展示这个类？
好，这里我把red改成false，这个时候red就不展示，只显示green。
除了可以用 Object，我还可以用array数组，数组就简单了：
其实在这里你除了这么去写这个数组之外，你还可以在数组里面再去写上面的这种对象的格式的内容。
如果再加一个对象叫做brown 等于true。
它的意思就是我这个样式里面既要展示red，要展示green，而且 brown 也要展示，因为它是true，这个时候刷新页面。
好，red、green、brown都出来了，假设给brown改成false，很显然brown就会消失。
到这里我们简单的了解了一波在vue里面去用class去定一些样式的时候，该怎么定义，
你可以直接写字符串，
你可以去绑定这种数据，这个数据可以分为三类，字符串的可以，对象的可以，数组也可以。
数组里面甚至还可以包含这样的对象，这就是它的语法的使用方式。
接着我们再讲一点复杂的内容，
我们在 app vue 的实例上面 再去创建一个小的组件叫做 app.component，我们创建一个小组件，组件的名字 我们就叫做demo。
这个组件也很简单，我让它展示一个内容，这个内容比如说我就叫一个single组件的样式，
其实组件展示的内容就是一个 Single这样的字符串，
我想用这个组件怎么用？
也很简单，在父组件里面，也就是在这里面，我们可以在 div 里面，除了展示Hello World之外，再去展示一个子组件叫做demo，
怎么去区分到底谁是父组件，谁是子组件？
我们zai创建vue的应用的时候，其实我们创建的是 vue 的根应用 对应的 vue 的组件。
其实你这个对象决定的是你应用最外层的组件是什么样子，在组件里面我们会调用demo这样的一个组件，也就是说在这个区域里面，
我们调用demo组件，主动调用的这一方叫做父组件，如图：
而demo是被调用的，如图：
被调用的一方我们把它叫做子组件。
大家理解清楚以后，我会这么去称呼组件之间的一些关系，在外层的父组件里面我们去调demo子组件，那是不是我们展示Hello Word之外，还会展示single这个内容，我们来看一下:
single也会出来。那为什么它是绿色的?是因为外层它现在的样式就是red和green，green把red覆盖掉，所以会作用于它内部的 div，
所以都变成绿色了。【好工整哦 逻辑】
这块我可以把它改成一个 classString，
现在它应该是红色的对吧？因为这个字符串是红的。
我现在想把子组件的样式改一改，让它变成绿色可以怎么做？我可以直接在子组件里面去写一个class等于green是不是就行了？
保存一下。single就一定会变成绿色。
当然我们再仔细来看，如果你zi组件最外层只有一个标签，什么叫最外层只有一个标签?
我给大家举一个例子，在这里我来写一下，
比如说你 div这样的一个片段，里面 div一，div二，它的最外层有几个标签，它最外层是不是只有一个这样的div标签？
假设你没有这个东西，如果shi这样的一个代码结构，
它的最外层有几个标签，它的最外层是不是只有两个标签？
所以我们现在看我们zi组件最外层有几个标签，是不是只有一个div标签？
如果是这样的话，我们除了把 green写在子组件上之外，还可以写在调用子组件的地方，
比如说在这个demo上我写一个class等于green，也是可以的，
子组件也会变成绿色，
但假设这个时候我子组件不是一个最外层的节点了，而有两个最外层的节点，比如说 one two：
这个时候最外层就有两个元素了，如果你在父组件里面写一个class等于green，【data里面定义的】能用吗？
我们看一下刷新，这个时候你发现:
子组件one two 上面不会给它增加 class名字，因为你调用子组件的时候，最外层有两个节点，
到底是把green放在第一个节点上，
还是放到第二个节点，
还是两个都放，其实我是不知道的。
但是有没有办法去解这个问题？有，要么你就不把它写在这，直接写在两个的里面，这个写法就比较简单：
我们看一下，没任何的问题，它肯定是有效的：
但是其实还有另外一种写法，大家可以学习一下，在这里我们依然把 class写在父组件 调用子组件的位置上，
这样的一个写法是什么？
它的意思就是我子组件里面的 one这个标签，它的样式是父组件的属性上面的 class的值。【第32行】
通过这样的一个语法， one就会变成绿色，
同样如果two也想变成绿色，你可以这么去写 。
所以这块大家知道有这样的一个语法，它在样式修饰上有可能复杂的场景下也会用到一些，所以大概有个了解就可以了。接着我们讲了刚才说的 class的样式之外，我们还要再去讲一讲像这种行内的样式我们该怎么去写，
保存一下，我们到浏览器上刷一下看一下，没有任何的问题，Hello World字体是黄色的，这样的看的明显一点:
所以在vue里面，如果你想写这种行内样式的话，你可以像写 html 中的这种样式一模一样的去写，但除了这么去写之外，
其实vue里面也扩展了一些语法，帮助你能够控制它展示的一些内容，比如说我可以在这里定一个styleString，我们看一下，
可以把刚才我们写的color yellow变成一个字符串存在这，
然后下面依然我加一个冒号表示style和上面的一些数据做绑定，
和哪个数据绑定？和styleString做绑定，
保存一下到页面上刷新，
这么去写依然没问题，还是能展示出黄色，
这是最基础的一个写法，但是没有做一些扩展，我们可以用对象的形式来去对style做一些处理，比如说我可以定一个styleObject，
这个时候我就可以这么去写了，写一个对象更容易color 我们用orange了，
下面我们就可以不去写 styleString了，写 styleObject就行了。
你会发现这种写法去写样式的话，相对于上面自己拼这种字符串的话，会简单很多，
保存一下，在这我们看有没有效果，它会不会变成橘黄色，
没有任何的问题。所以当你去用这种行内样式的时候，我建议大家不要去这么去定义字符串的形式来写了，【第27行】
你用一个对象，然后对象里面写各种各样的样式属性就可以，比如说我还可以给他一个background，给一个什么色？给一个yellow，注意是字符串，你这样写是不是就方便很多，
如果你拼字符串你怎么写，你得这样再去拼，
很显然可读性没有下面的好，就建议大家如果你写行的样式的时候一定要这么去写。【第28行】我们再看一下是不是有背景色，
没有任何的问题。
在vue里面如何使用样式，你可以通过 class的方式去写样式，也可以通过style的方式去写样式，不同的写法它的语法有一些差异，style的方式写起来方便简单，推荐使用。
当下你学习的样子，未来的你在一点一点的见证你的努力。
随时随地看视频
热门评论
-
大龄前端菜鸟2022-08-13 0
查看全部评论大佬，想问一下，没有自制力怎么办😭