Summary

In this chapter, you learned about Vue components and how to use them. You saw how to create and register them using a classic approach (application that uses HTML, CSS, and JavaScript) and you also saw how easy it is to create and manipulate them using a single-file components approach. Things to retain:

• While variables are created using CamelCased format, in order to be able to use components inside templates, you must apply the corresponding kebab-cased format, for example, MyBeautifulComponent -> my-beautiful-component
• Attributes data and el inside the component must be functions and not objects: {data: function () {}}
• If you want the style of the component not to leak to the global scope, add a scoped attribute to it: <style scoped></style>

We have also rewritten our applications using single-file components and touched on the data binding to the CSS transitions slightly.

In the next chapter, we will dive deeply into all the types of data binding, including CSS...