FREELessons: 10Length: 51 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.8 Components

Vue components are self-contained, reusable blocks of markup that can help us to make our development process much more efficient. In this lesson, you will learn the basics of how to use components in your work.

Useful Links

2.8 Components

Hello, and welcome back. The last major feature of the Vue.js framework that I wanna cover very quickly is the component system. In Vue, a component is a self-contained reusable block of markup. So what we can do is we can create a custom element in HTML, and then we can define that element in Vue or that component in Vue. And then we will tell Veu what we want that component to look like. So I've taken this same basic setup that we've been working with with our Timmy's Diner website, and I've striped out all of the actual menu items. And here's the Featured Items section. And all we have inside of it now is an unordered list. And inside that unordered list, all we have is this weird element that we've never seen before called menu-item. Well, we're going to turn menu item into a component in Vue. So you can find the URL for this starting pen in your course notes for this lesson. Once you open that up, we'll go ahead and click on fork and then all of the changes that I make in this lesson will be saved in this new forked version. So, again, we have this unordered list. And basically what I wanna do is I wanna replace this menu item with an actual list item that's gonna go in this unordered list. So I'll talk about how we would do that. Let's jump into our JavaScript. And keep in mind that when you're creating a component in JavaScript, you need to create that component before you actually create your Vue instance. Because if you create that component afterwards, then it won't work. So before our Vue instance here, but after our menu data object, and you can do this before or after the menu data object, it doesn't matter. I'm gonna go ahead and do it after. The way we create a component, we simply type in the word Vue, V-U-E with a capital V, .component. And then inside parenthesis, the first we need is the name of this custom element that we've created. And that custom element is called menu-item. And so in this vue.component call, we need to put that as a string. So we're gonna put this inside quotation marks. And I'm gonna type in menu-item so that it matches perfectly what we see up here. And then we need to create a template for that menu item component so that Vue knows what that component is supposed to look like. So after this string, I'm gonna type a comma. And then this template is gonna be inside a JavaScript object just like our data object for our Vue instance. So we're gonna create a set of opening and closing curly brackets. And then inside this object, we have a property called template. So we're going to type template: and then we are gonna set this equal to a string. And this string is going to be our template. It's gonna be our HTML markup that's going to replace this menu item component. So let's say we just want this to be a list item. So we're gonna create HTML markup for list item. So now every time we type one of these menu item elements here, let's put a second one, we're gonna see it replaced by whatever mark up we have in here. Now this doesn't really help us much from a dynamic perspective because right now it's just going to type out the same text every time we create a new list item. So wouldn't be nice if we could actually pass some data into this. Well, we can. So I'm gonna get rid of this second menu item. And we can actually use a v-for directive inside our custom element here. So we have menu item. I'm gonna do space v-for. And we're gonna set these equal to what we've done before. We're gonna say product In products. So we're gonna make a loop here and for each product in our products array. And here's our products array here. And you'll notice I've stripped out a lot of the data. All we have now is name and price. But we have three items in that array. So now that we see that this menu item is showing up three times. So in order to get this to show our actual product data, what we need to do is we need to create some way to pass data into our template. So that we can then jump into our template, and maybe create using this same handlebar syntax, we can create something like And this would be similar to that we did before in our HTML. So we want to pass in a parameter called foodItem. And we can do that just before our template property. Let's create another property here. And this is gonna be called props. And this props property is an array of what are basically treated like parameters. So we're going to create an array using square brackets and we'll go ahead and put a comma at the end of that array so that we don't forget. And then inside that array, we really only need one item. We're gonna pass in the fooditem that we want to display in our list item. So inside quotation marks, we're gonna call this fooditem. So we wanna make sure that this is spelled the same way in both places. And you'll notice I'm pointing to And up here in our menu item, our v-for is pointing to product in products. What we're gonna do is we're gonna pass this product into this food item property, so that we can then access the name of property of that product. And the way we do that is very simple. So we have our v-for, but then also we're going to bind this menu item to this food item property. So after v-for, we're also gonna do a V-bind. And then we want to use the food item, we wanna bind this to that food item property, so we're gonna type :fooditem. And we're gonna set this equal to Product, because product is what we wanna pass into that food item. So I'm gonna copy that and we'll paste it inside the quotation marks there. And now we can see our dynamic data is showing up for each of our list items. So as you can imagine, we could also go into our template down here. And we could a hyphen, a dollar sign, and then we can add a price here. We could add fooditem.price, and those prices should show up as well. And we see that they do. So that's a high level overview of how you could use components in Vue.js. Thank you for watching. And I'll see you in the next video.

Back to the top