Introducing Components Concept 0:00Let's move on to components. I think you'll like this. It's pretty sharp. Consider any website, and you can probably break it down to various sections, like a navbar. Or maybe this section right here could be a collection. And each item within here could be a card or course. And if I were to click through here, once again, you have a header. You have an episode list. You have a single episode. So you can sort of break this down into various little blocks. But the problem is, with HTML, you can't be too semanticSo you can sort of break this down into various little blocks. But the problem is, with HTML, you can't be too semantic because you're limited to a small set of elements, like div, or header, or section, or main. So I can't really use things like episode list, or episode item, or, well, we can use nav, but you get the basic idea, right? Well, with Vue, imagine if we could use this concept of custom elements. And we can also hook them into Vue so that they can have all the behavior we want. That's pretty cool. So let's go back to Sublime and imagine the most basic possible one.That's pretty cool. So let's go back to Sublime and imagine the most basic possible one. We've been talking about this concept of tasks, but up until now, we were using an unordered list. So what did the list item represent there, when we would have the equivalent of go to the store? What is this? It's a task, right? But it doesn't say task anywhere. It's just up to us to know that it's a task. Well, what if instead I could say something like task, go to the store?It's just up to us to know that it's a task. Well, what if instead I could say something like task, go to the store? That would be interesting. And what if up here you had tasks, or a task list? Now imagine how differently you might approach things. And even better, imagine coming back to this project six months from now and understanding exactly what each block means because of this. Okay, let's review our first example. I'm going to scroll down here, but you know what? Why don't we go ahead and extract this to its own file now? Creating a Global Component 1:50I'm going to scroll down here, but you know what? Why don't we go ahead and extract this to its own file now? I think we're ready. I will create main.js, and we're going to say view.component, and we're going to give this any name we want. It could be task, like I said. It could be task list. I will tell you it's considered a best practice to use a hyphen for your names, and that way it doesn't clash with any official names that the spec provides. But you can do whatever you want.and that way it doesn't clash with any official names that the spec provides. But you can do whatever you want. So to be honest, sometimes I do just keep it simple. But still, keep it in mind. Okay, so we have a view component called task, and that means ultimately within my HTML, I will be able to do something just like this. However, the browser still doesn't know what a task is, what is the underlying representation of that. So like if we were to go into the shadows of this, Defining Component Template 2:34what is the underlying representation of that. So like if we were to go into the shadows of this, what exactly would make it up? Is it a heading? Is it a list? Is it a collection of items? We would still need to define that. So we can use a template for that. We could just say the makeup is going to be for now a list item, and then I will hard code foobar here.We could just say the makeup is going to be for now a list item, and then I will hard code foobar here. Okay, so we now have a very basic global view component that can be used anywhere. Let's new up a view instance, bind it to our root div, and we're all set to go. Now if I go back to index.html, I'm going to use a task here, and let's see what we get. Okay, so sure enough, it worked. I referenced task, but behind the scenes we actually spit out a list itemOkay, so sure enough, it worked. I referenced task, but behind the scenes we actually spit out a list item because that's what we expected. And that means because each one is contained, I could duplicate this and get, in this case, five different instances as you can see here. But yeah, of course, I don't want to hard code foobar. I want that to be dynamic. So maybe once again I could say go to the store and get rid of these, do a couple more, Using Slots for Content 3:34So maybe once again I could say go to the store and get rid of these, do a couple more, go to the bank, go to work. Okay, so now if we refresh, how do we get this slot of text into our list item? Okay, well we're going to talk about this quite a bit more in future episodes, but for now we can use this concept of a slot. Until we talk about it a good bit more, just think of it as our way of saying, yeah, we're going to slot anything the user types between these tags right here.just think of it as our way of saying, yeah, we're going to slot anything the user types between these tags right here. So now if I come back and refresh, there we go. It's working. Now we're going to stop here, but we have so much more to discuss when it comes to components. For now, I want you to play around with creating a handful of your own. You can define a global one by saying view.component. You give it a name. You can give it a template. Component Data as Function 4:26You give it a name. You can give it a template. You can even give it its own set of data by returning an object here. And that is one final quick important note. For regular view instances, you can set data equal to an object. However, for components, we can't do that because it's not linked to any single instance. So instead, you can make data equal to a function that returns an object. Very important to understand, and that's a really common mistake. So keep that in mind.Very important to understand, and that's a really common mistake. So keep that in mind. Okay, so I want you to play around with this for an hour. Give it some time. Create lots of components and get comfortable with it.
