Transcript from the "v-bind in CSS" Lesson
>> Okay, but one other thing I wanna tell you about styling, which most people don't know about when it comes to Vue 3 is that this is great. We have the ability to global styles, we have scoped styles, we have CSS modules. For me, one of the things, when it comes to extending on the functionality of the web, is how we can bring the technology together in a better way.
[00:00:42] And on the App.vue, what if we wanted the ability for the user to choose what the background color is? Typically the approach for that is you probably would come to your designers and you would say, okay, these are the seven classes we'll support. And so we'll try our best to just support it this way, and so you're limited.
[00:00:59] But there are plenty of cases where you might actually want to give the user infinite configuration. But the reason why we can't do that is because, frankly, managing the CSS for that can be quite difficult. So let's say, for instance, we have that property. So I'm gonna import a ref from vue, and I'm gonna call it colorPreference.
[00:01:42] There's a lot of work that goes into that. Well, what if I said, instead, that what we could do is, let's say on the app itself. This time we're gonna do a background color. But this time, I'm going to actually, let's see, let's try to just do this.
[00:02:00] Will colorPreference work? Now, nothing's happening. Well, let's make sure it's working first. So let's go ahead and do this. Let's actually render out the colorPreference. So colorPreference, now where is it? It's all the way down here. Let's bump it up so it's easier to read. Okay, great, it is showing up.
[00:02:20] Let's make sure it actually can get changed, that it's reactive. Let's do an import. If you didn't know, there's a type called color on your inputs that's actually built into HTML. And we can just v-model this to our colorPreference. So let's see if this works. Let's see, let's go this, okay, great, so now we have this infinite color loop.
[00:02:38] Well, Vue 3 was like, you know what? I think we can make this happen. What if we just wrapped this in v-bind? And so, we get, shoot, we need to, maybe app is too far of a context. There we go, okay? That context was too high. All right, it's fine.
[00:03:23] Now if you're skeptical, you're like, this looks like black magic, what's happening here? All right, let me show you. Let me show you. I promise you, when we think about things, we try to think of things in terms of extending the web. Look at actually what's happening here.
[00:04:00] So you get the power of CSS and cascades and everything in its native form. But you also get the power of getting reactive data that can impact those things. So you can imagine, the number of times I've been on Azure I wanted to customize the font size or the padding, those were hard to do.
[00:04:15] Because to create a class for every single one of those scenarios or to manage that at one point was nigh impossible. But with things like v-bind on your styles now, so many possibilities now exists with this. And so if you're wondering, though, why did I have a little bit of trouble with the HTML, I think, and the app?
[00:04:34] Is because, I think, Vue, once it takes over the div is unable to go outside of it. So that's what it is. It's not in control, Vue is not in control of that area. So if you're gonna do this, obviously make sure that you're within the context of your app, otherwise the CSS won't apply.
[00:04:49] But otherwise at this point, you can imagine just infinite user preference configuration that's possible with this.