js 3 Fundamentals with the Composition API, then you're ready to start taking things a step further with the power of components. Now, components are reusable pieces of markdown, style, and logic all bundled up together to easily create different pieces of websites or web apps. For instance, on the Vue School website, the header could be a component. Each of the individual cards that make up the courses index here could be a component.
The filters that allow you to filter the courses could be a component. It could even be something as small as the little badge that shows up on each of the cards. So components are infinitely nestable and we can use them to compose our page as well as other components. Let's dive into working with components.
I have already created a project with npm init view at latest, and you can do the same. Here is what I answered for each of the different questions in the setup. vue extension. Let's call our component CounterButton, as we'll be creating a button that increments a count whenever it's clicked.
Inside this component, we'll create a template section to hold the markup. That'll just be a button. And whenever we click it, we'll update some piece of state called count. For the label on the button, we'll display the value of count.
Next, inside of script setup, we'll have to actually define that piece of state, or that data. I'll first import the ref function from view, and then we'll use it to define the count. initializing the value to zero. And just like that, you've created your very first reusable component.
view. In order to use it, we will have to import it. view. Then inside of my template, I'll get rid of all of the boilerplate code, and let's just print out one of our counter buttons.
Notice this just looks like another HTML element, but it has a name of our choice. The counter button tag here corresponds to the naming of the import. vue files. I'll save the file, open up my terminal, and then let's start up the dev server with npm run dev oh and we haven't actually installed the dependencies so do make sure you do that first with npm install now let's see what our page looks like okay that's really small so i'll zoom in quite a bit here now we have a button with zero displayed as the label and whenever i click on it the number of the label increments now remember i said though that components are meant to be reusable.
That means I can take this counter button here and then display it as many times as I want to on the page. Back in the browser now we have four different buttons and clicking on each of them increments their count separately. Notice that state is not tied so when I click on one button it does not increment the count on another button. Finally if we don't have to put anything inside of our component which is called a slot.
We won't learn about that now. But to shorten things up, we can use what's called a self-closing tag by removing the ending tag and putting a slash at the end of the start tag. Great. That works just the same.
Congrats! js applications. js 3 Fundamentals with the Composition API, then you're ready to start taking things a step further with the power of components. Now, components are reusable pieces of markdown, style, and logic all bundled up together to easily create different pieces of websites or web apps.
For instance, on the Vue School website, the header could be a component. Each of the individual cards that make up the courses index here could be a component. The filters that allow you to filter the courses could be a component. It could even be something as small as the little badge that shows up on each of the cards.
So components are infinitely nestable and we can use them to compose our page as well as other components. Let's dive into working with components. I have already created a project with npm init view at latest, and you can do the same. Here is what I answered for each of the different questions in the setup.
vue extension. Let's call our component CounterButton, as we'll be creating a button that increments a count whenever it's clicked. Inside this component, we'll create a template section to hold the markup. That'll just be a button.
And whenever we click it, we'll update some piece of state called count. For the label on the button, we'll display the value of count. Next, inside of script setup, we'll have to actually define that piece of state, or that data. I'll first import the ref function from view, and then we'll use it to define the count.
initializing the value to zero. And just like that, you've created your very first reusable component. view. In order to use it, we will have to import it.
view. Then inside of my template, I'll get rid of all of the boilerplate code, and let's just print out one of our counter buttons. Notice this just looks like another HTML element, but it has a name of our choice. The counter button tag here corresponds to the naming of the import.
vue files. I'll save the file, open up my terminal, and then let's start up the dev server with npm run dev oh and we haven't actually installed the dependencies so do make sure you do that first with npm install now let's see what our page looks like okay that's really small so i'll zoom in quite a bit here now we have a button with zero displayed as the label and whenever i click on it the number of the label increments now remember i said though that components are meant to be reusable. That means I can take this counter button here and then display it as many times as I want to on the page. Back in the browser now we have four different buttons and clicking on each of them increments their count separately.
Notice that state is not tied so when I click on one button it does not increment the count on another button. Finally if we don't have to put anything inside of our component which is called a slot. We won't learn about that now. But to shorten things up, we can use what's called a self-closing tag by removing the ending tag and putting a slash at the end of the start tag.
Great. That works just the same. Congrats! js applications.