Benefits of using components

There are some things that we need to learn before going deep into the components and rewrite our applications using them. In this section, we will cover things such as handling data and el properties inside a component, component templates, scope, and preprocessors.

Declaring templates in HTML

In our previous example, we created a Vue component with a template written as a string. It's actually easy and nice because we have everything we need inside our component. Now imagine our component with a more complex HTML structure. Writing a complex HTML string template is error-prone, ugly, and against best practices.

Tip

By best practices, I mean clean and maintainable code. Complex HTML written as a string is anything but maintainable.

Vue allows declaring templates inside an HTML file within a special <template> tag!

So, to rewrite our example, we will declare an HTML tag template with the corresponding markup inside:

<template id="hello">...