Vue Components

Last article, we tackled two way binding using v-model. On this article, we will discuss another Vue concept that is very helpful in developing large scale applications – components.

The rationale for components is to help developers easily manage and maintain the complex web applications that they are developing. What it does is divide the creation of user interface into smaller pieces which is highly maintainable and reusable.

Let us have a look at our To Do application table from the previous tutorial and study what we have done in our v-loop.

vue components

In this picture, we can say that the code above is perfectly clean, good and maintainable. Indeed, we have managed to append the Todo List in our table just by writing at least four lines of code. However, we can manage to make the same output just by writing a one-liner code, which can also be used in the other parts of our application. Yes that’s right, we can make it short just by writing one line of code in our HTML file.

vue components

The above code works well and prints the same output of todo list. You may ask, “How did it happen? Is it a new HTML tag?”. We can find the answer in our app.js.

vue components

We have made a new component named as todo-list and created our own template. The data is printed in our table by using v-bind inside our component and pass the content of task_list. Now we can use this component in different parts of our page and it prints the same results.

On the next article, we will discuss Constructors.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.