Single File Components concept in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a Single File Component (SFC) in Vue?

A Single File Component in Vue is a file with a .vue extension that contains the template, script, and style sections all in one file. It helps organize code by keeping related parts together.

beginner

Which three main sections are found inside a Vue Single File Component?

The three main sections are: <br>1. <template> for HTML structure <br>2. <script> for JavaScript logic <br>3. <style> for CSS styling

intermediate

How does using Single File Components help in building Vue apps?

It keeps the template, logic, and styles together, making the code easier to read and maintain. It also supports scoped styles and better tooling support like syntax highlighting and linting.

intermediate

What does the scoped attribute do in the <style> section of a Vue SFC?

The scoped attribute makes the CSS styles apply only to the current component, preventing them from affecting other parts of the app.

advanced

Can you use multiple <script> or <style> tags in a Vue Single File Component?

Yes, you can have multiple <style> tags (for example, with different scopes or languages like SCSS) and multiple <script> tags (e.g., <script setup> and <script> for options).

What file extension do Vue Single File Components use?

A .vue

B .js

C .html

D .css

Vue Single File Components always use the .vue extension to combine template, script, and style.

Which section in a Vue SFC contains the HTML markup?

A <script>

B <style>

C <template>

D <markup>

The <template> section holds the HTML structure of the component.

What is the purpose of the scoped attribute in the <style> tag?

A To apply styles only to the current component

B To disable styles

C To apply styles globally

D To import external styles

The scoped attribute limits styles to the component, avoiding conflicts.

Can you have more than one <script> tag in a Vue SFC?

A Yes, but only two

B Yes, unlimited

C Only if they are empty

D No, only one is allowed

Vue SFCs support multiple <script> tags, such as <script setup> and a regular <script> for options.

Why are Single File Components useful in Vue development?

A They only work with CSS frameworks

B They separate template, logic, and styles into different files

C They remove the need for JavaScript

D They combine template, logic, and styles in one file for better organization

SFCs keep all parts of a component together, making code easier to manage.

Explain what a Vue Single File Component is and why it is helpful.

Think about how keeping related code together helps when building apps.

Describe the role of the scoped attribute in Vue SFC styles and how it affects CSS.

Consider how styles might accidentally affect other parts of a page without scoping.