Learning Vue

Chapter 3. Composing Components

In the previous chapter, you learned the fundamentals of Vue and how to write a Vue component with common directives using Options API. You are now ready to deep dive into the next level: composing more complex Vue components with reactivity and hooks.

This chapter introduces the Vue Single File Component (SFC) standard, component lifecycle hooks, and other advanced reactive features such as computed properties, watchers, methods, and refs. You will also learn to use slots to dynamically render different parts of the component while maintaining the component’s structure with styles. By the end of this chapter, you will be able to write complex Vue components in your application.

Vue Single File Component Structure

Vue introduces a new file format standard, Vue SFC, denoted by the .vue extension. With SFC, you can write the HTML template code, the JavaScript logic, and the CSS stylings for a component in the same file, each in its dedicated code section. A Vue SFC contains three essential code sections:

Template

This HTML code block renders the UI view of the component. It should only appear once per component at the highest level element.

Script

This JavaScript code block contains the component’s main logic and only appears a maximum of once per component file.

Style

This CSS code block contains the stylings for the component. It is optional and can appear as many times as required per component file.

Example 3-1 is an example of an SFC ...