DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for VueJs Beginners part 3 - Component
Hash
Hash

Posted on

VueJs Beginners part 3 - Component

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.

Image description

Defining a Component

Vue component schema:

app.component('component-name', {
  template: `<div>component</div>`,
  data:...
  methods:...
  ,...
})

Enter fullscreen mode Exit fullscreen mode

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)

πŸ‘‹ Hey, my name is Noah and I’m the one who set up this ad. My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.

If you found DEV from searching around, here are a couple of our most popular articles on DEV: