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.
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.
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.
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.