Part Two of VueJS Components Lesson | Coding Like a Pro
Part Two of VueJS Components Lesson

Part Two of VueJS Components Lesson

Introduction

Having successfully covered a lot of elementary details of this topic in the first phase, we shall jump immediately into this secondary part.

But, then, it will be great we refresh our memory on some of the basic things you should know about the topic.

It is necessary to properly understand what Vue Components is all about, that’s if you are yet to know. They’re actually very vital parts of VueJS that build custom versions that are reusable in HTML.

Did that sink in?

Anyways, let’s officially commence this lesson. It’s loaded with specific facts about the concept. And then, we shall cement our knowledge with practical exercises.

Before we proceed, don’t forget that VueJS elements are components that we can reuse with a title.

More Details about VueJS components?

Now, we are about to dive deeper. To aid our comprehension of the concept, we’ll have to brainstorm on the examples below:

Let’s say we have an application that supports making a taxi purchase online. In this sense, we’ll need 2 duplicative keyswhich we’ll have to use a lot of times on application. For instance, assign the names “CUT” and “PASTE” to the buttons.

To achieve this, we may just script the codes for the buttons across different areas on our application for the instructions to be able to show. Or, we may take the better and easier way. We just build a VueJS element which will make this action happen and support it.

We can see that the easier method to adopt in other to achieve our objective in the application is the second. You only need to term the particular VueJS mention from the components.

Practical Example of VueJS component

To drive home what we’ve learn so far, we shall take a look at some practical exercises on VueJS certificate:

The Vue

Vue.component('button-counter', {
    data: function () {
        return {
            count: 0
        }
    },
    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});

Before any other action is taken, we’ve to build a VueJS element using Vue.component() to initialize a new component. This first attribute represents the name of the element.

Then, we move on to the next which is the instance. And we can take it to be a function, process etc.

Data this function ensures that we can replicate different attributes in different places and that each mention has its unique copy.

Template with this function, we add HTML markup to the particular Vue element. So, it has to go through the instance – the area in the application where we apply the element by initializing the new Vue instance.

The HTML

<div id="components-demo">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>

There is no complication here. It’s just an easy-to-follow procedure.

Now that we have the HTML code, we’ll assign a new VueJS mention and embed it in the HTML through embedding the name of the element. This is how we create the VueJS. So, we have <button-counter></button-counter> tags.

What’s next?

We can’t just call this into the HTML straight up. No, it can’t work that way. It’s necessary we assign the Vue instance for the element for it to work.

This is how we can do it:

new Vue({ el: '#components-demo' })

Whereas, the attribute we’ll use for this purpose is “new Vue.” It’ll take the attribute to hold the component. We assume it is the div built into the HTML code with the identity #components-demo.

We have succeeded to attach the Vue element on the HTML div with assigned the name #components-demo. So, that this is done, we’ll in the button. Second Illustration…

Now, we take on another instance. And this is much easier, and we won’t include template feature.

This is HTML element for a “hi” or greeting action. We use the functions <h1>Hi</h1>

It goes this way:

<div id="hi-box">
    <say-hi></say-hi>
</div>

You can see from the example that we announced the name of the element which is “say-hi.” It is a div with an identity #hi-box.

Now, we move on to the VueJs code we will adapt to create the greeting instance:

Vue.component('say-hi', {
    template: '<h1>Hi</h1>'
});

So, we just built the element named “say-hi” and then embed a markup to it.

You can tell what will follow this action…

We just proceed to announce the vue instance:

new Vue({ el: '#hi-box' })

Vue Element Props

Next up, we take a dig into the next part of this topic – props. What does it mean, and how can we make use of it? You ask.

Oh, there is still another question you may ask – how best can we apply them? Anyway, have this in mind; we’re going to discuss passing data.

What they are…

VueJS props are means through which we send properties to HTML tags as well as additional information to the markup. We can write props directly into the Vue Component using the announcement props.

More so, we can define props as properties we can enter in the component on our own. So, each time we assign a value to the props, such value becomes an element in the component.

Immediately we enter a prop, we can go ahead to send the information it becomes a custom attribute and we can go ahead to send information.

Vue.component('learn-props', {
  // PROPS
  props: ['postTitle'],
})

It is imperative we have it in mind that we can use props to send information or data to little components on VueJS.

Here’s a practical sample to help you understand better:

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

What can you identify from the above?

Well, we just used props and a framework for our HTML markup to produce a component.

Here’s how to send data to prop when it has become a custom attribute:

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

On your own, make effort to practice on this. 

Wrap up

Ok, now, we have neared the end. But, hey, we can’t just go like that. We would make some more efforts to elaborate on the topic with some practical exercises.

Before we leave…let’s consider these few points

Remember, why we need VueJS elements is that they help us duplicate codes in so much easy and simpler way.

With props, we can access internal method to send data to the components easily.

We are able to dissect complicated areas of the App to make them reliable enough to help us achieve our objective.

These VueJS elements are adaptable, powerful, efficient and ordered for whatever task we want to undertake.

While we have touched on these points, you strongly advised to research and learn more other points. It all comes down to how well you want to learn feature and for what purpose. You know, you need to put in much effort.

Spread the love
2 votes, average: 5.00 out of 52 votes, average: 5.00 out of 52 votes, average: 5.00 out of 52 votes, average: 5.00 out of 52 votes, average: 5.00 out of 5 (2 votes, average: 5.00 out of 5)
You need to be a registered member to rate this.
Loading...

Leave a Reply