js, it's time to go a step further and leverage the power of components. Components are reusable groups of markup, state, and logic with a name. Their purpose is to encapsulate some functionality of our application and they can be anything from big parts like a whole page or a navigation bar to tiny parts like a button or special formatted text. Here I have a view application that mounts to the element with the id of app and doesn't do anything.
component. This is a function that accepts the name of the component in the first argument and an object with the options in the second argument. This object includes options like data, computed, methods, and so on. I will name this component click counter.
Now you might be wondering how we mount this component to a certain element, but components don't work like that. Components are made to be reusable and thus they are not bound to the markup. A view component has its own template that can be defined in many ways. One way is using a string.
Let's make this component display a button with a counter. that will increase every time we click it. Here, we need the count data, so we can add it right away to our component. Notice here that the data is not an object.
A component's data must be a function that returns an object. That way, each instance of the component can maintain an independent copy of the returned data object. Don't worry too much if you forget that, because Vue will throw an error. and will tell you to use a function to define the component's data.
Great, it's ready to be used. Now, the cool thing is that we can actually use our component name as a custom HTML element. In our case, we will use the click counter element. In the browser, we see our button that shows zero, and if we click on it, the count increases.
So, we managed to create our very own component. I've said many times that components are reusable. This also means that we can actually create as many instances of the ClickCounter component we want. So, if I duplicate our element four times, we will get four different counters.
Notice here that all these counters are new instances of our component, so changes on one's data won't affect the others. js, it's time to go a step further and leverage the power of components. Components are reusable groups of markup, state, and logic with a name. Their purpose is to encapsulate some functionality of our application and they can be anything from big parts like a whole page or a navigation bar to tiny parts like a button or special formatted text.
Here I have a view application that mounts to the element with the id of app and doesn't do anything. component. This is a function that accepts the name of the component in the first argument and an object with the options in the second argument. This object includes options like data, computed, methods, and so on.
I will name this component click counter. Now you might be wondering how we mount this component to a certain element, but components don't work like that. Components are made to be reusable and thus they are not bound to the markup. A view component has its own template that can be defined in many ways.
One way is using a string. Let's make this component display a button with a counter. that will increase every time we click it. Here, we need the count data, so we can add it right away to our component.
Notice here that the data is not an object. A component's data must be a function that returns an object. That way, each instance of the component can maintain an independent copy of the returned data object. Don't worry too much if you forget that, because Vue will throw an error.
and will tell you to use a function to define the component's data. Great, it's ready to be used. Now, the cool thing is that we can actually use our component name as a custom HTML element. In our case, we will use the click counter element.
In the browser, we see our button that shows zero, and if we click on it, the count increases. So, we managed to create our very own component. I've said many times that components are reusable. This also means that we can actually create as many instances of the ClickCounter component we want.
So, if I duplicate our element four times, we will get four different counters. Notice here that all these counters are new instances of our component, so changes on one's data won't affect the others.