I started learning VueJs and tend to share it with you step by step. Slowly, but steadily.
In this episode, we are going to see what is a component in VueJs and how we can use it.
With components, we can split the UI into small and reusable pieces and by compositing them solve a problem or make an application.
Defining a Component
Vue component schema:
app.component('component-name', {
template: `<div>component</div>`,
data:...
methods:...
,...
})
As you can see it's completely same as defining the app, indeed we can define a component's logic using an object of options such as data
, methods
.
and with template
option we can use the logic and expose as a component.
for instance we are going to define a component that provide a button that counts.
Then by importing <Count/>
, it can be used.
Right now we are trying to learn Vue by injecting it to a html file, obviously there are some other ways to define the components and using them will discover them later together.
see you in the next episode
learn more VUE-Components
Top comments (0)