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