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

Get Learning Vue.js 2 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.