- [Instructor] Now we'll create our own simple component
and add it to this page.
Back in our single file component named app,
let's take a closer look at what's going on here.
This components option here is just another way
to register components.
Previously, we were using the component method
to globally register them, making view aware of them
so that they could be used anywhere in the app.
Using the components option
is a way to locally register components
as child components of the app component.
Let's go ahead and remove all references
to this hello world component
and then we'll create a new component for our deck name.
So in the components folder,
I'm going to add a new file
decname.view
and now we'll create a single file component from scratch.
Most single file components have a template element,
a script element
and a style element.
The script element will be used for
defining our options object
and then exporting it as a JavaScript module.
So it's common to see here, export default
instead of a named export, and then the options object.
By the way, you'll notice that the view team
tends not to use semi-colons
at the end of JavaScript statements
but I still find them sort of reassuring.
So we can give our component a name.
This will be deck name
and this will take the name of the deck as a prop.
So we'll add props here and remember
we'll just have the name, name in an array.
There are other ways to declare props
and we can even include the type that we're expecting.
And you can read about that in the view guide,
but for now this will do just fine.
So now that we have that set up,
let's talk about our template.
This is going to be incredibly simple just an H1 tag
with our name prop interpolated there
with the mustache syntax like so.
We don't have to use style if we don't want to
but this is a convenient place to add components
specific CSS and it can make it really easy
to update this component later
because we'll have all the markup,
logic and relevant CSS, all in one place.
Let's just add a little bit of styling to the H1 tag
to make sure this is all working as expected.
So we'll just italicize it.
Another nice feature of single file components
is that we can make sure that this CSS
doesn't affect anything outside of this component
by adding the scoped attribute to the style element
and I'll show you how that will change
the rendered element in a moment.
So now back in app
let's
import this component
deck.name
from dot the current directory slash components
slash deck name.
And that will pick up the deckname.view for us.
We'll register it as a local component
by just adding deck name here
and then we'll add it to the template.
So up here now that we're using Vue CLI
and compiled templates, I can use the Pascal casing here.
I don't have to use the kebab casing
as we were doing before
which would be deck dash name all lowercase.
And remember, this is expecting a name prop.
So we'll just pass in hard-coded Vue JS fundamentals.
So we're not passing a data property
or a JavaScript expression.
So we don't use colon name, just name
and we can have the open and closed tags
or we can just use a self-closing tag like so.
So now if I go over to the browser
which has automatically been refreshed, we see
that our simple component is being rendered correctly.
And if you take a look at the dev tools
and just zero in again on this H1 element
you'll see that this data attribute has been inserted here.
And the CSS rule that goes
along with it has been updated as well.
This pretty much guarantees
that this CSS would never affect anything
outside of this component.
Even if we had another H1 tag.
We've really only scratched the surface of what's possible
with single file components and Vue CLI.
And with view itself. We'll wrap up the course
in the next video with some tips and ideas
about where to allocate your learning time moving forward
to get the most out of UJS.