- Once your code starts getting really long
you may want to divide your project into little pieces.
And what's really nice about this is that
if you're going to be using the same types of things
in multiple projects you can create
a separate component that does something
and then share that component with different projects.
So what I'm going to do is write a component
that's going to output this price,
and it will also allow us to use
the euro notation instead of the dollar sign
and perhaps even do a conversion.
So I'm going to get started just by creating
the most basic component that you can,
and to do that, I'm going to come up here
and use my Vue object to create
just a regular component, let's go ahead
and hide this right here 'cause it's going to be blinking
for quite a while, and we use the component key word,
and then we're going to give the component a name.
So you can use something like this,
you can say like, my dash price, or you can use camel case
if you want to, but mine's going to be pretty simple
so I'm just going to call it price.
And then you're going to include an object here,
so let's add a semicolon there,
and then in this object it's going to be similar
to what you did when you created the app.
So we'll say here data, and data's going to be
a little bit different than what we've done before,
it's going to have to be a function,
and that function is going to return the information.
So you just write these a little bit different.
And so in here, just like with my regular component,
or my main component, I'm just going to type in some code here,
so prefix, I'm going to put a dollar sign here
as the prefix, then I'll create a value,
and I'll just type in a number here, so,
so for right now we're just going to put in some sort
of random number here, and then I'll do
a precision and I'll make that two,
also need a comma right there,
and in addition to this you can also have
all the regular things that you would have
on a normal application, so you can have things like
filters, methods, and other things,
but at the very least with a component
you need something called a template.
So a template is essentially what's going to be output
in to where this component is going to go.
So I need a comma right there.
So there has to be a main container
that has all your code, so you can actually do something
like that and that would work fine,
there just has to be one single tag outside,
but actually I'm going to use a span here.
And in here, what I want to do is use the same formula
that I used for my currency filter,
so here I am returning this stuff right here,
but what I'm going to do is, by using this component
I'm going to make this a little more flexible,
and instead of the dollar sign here,
I'll use the prefix.
So, because it's part of the data
I need to modify that so that it says this prefix
and then I could put in instead of value,
this dot value, and instead of the two here,
I'll put this dot precision.
Also, if you want to make a more complicated template,
you can put it in multiple lines
by using the tilde marks which are right to the left
of the one, it just allows you to do
a multi sort of line template.
This was pretty easy though, so we can just keep it
with the normal quotes like this.
And then once you do this, you've essentially written
the most basic type of component,
it's not really accepting anything yet,
we'll take care of that later,
and I don't need a semicolon there,
that was the problem,
so now I can use this component in my HTML
and let's go ahead and open this up,
and I need to look for where I output the price,
not in my dropdown menu but in my regular list,
and so what I'm doing here is the price,
filter by currency, and instead of that
what I'll do is I'll just create a tag
with the name of my component,
just like if it was a normal HTML tag,
and my component will now output
whatever I've placed inside it,
so that's pretty cool.
Also notice that you can use this as many times as you want,
so I can just paste that a few times
and you can see that it'll render several times.
So this creates a reusable piece of code
that you can place wherever you want,
and as you'll be able to see in future videos,
you can really customize how the component works.