Lesson 01 · 10 min

One file: template, script, style

A Vue component is three blocks in one `.vue`. Markup stays markup.

Single File Component: <template> — HTML with directives, <script setup> — logic on the Composition API, <style scoped> — styles for this piece only. In the template you write tags, not a JSX function. It's closer to HTML than React, and closer to a component than "just a markup file".

Skeleton

You can ask about this rule«What you declare in script is visible in template»

scoped keeps styles from leaking into another component.
A file named HelloCard.vue is an ordinary component. You don't have to register it globally: import it where you insert it.
{{ }} in a Vue template is text. An attribute: v-bind:title or shortly :title.

You can ask about this point«Lesson summary»

Check

Lock it in before you move on

1. Why three blocks in a .vue?
2. script setup gives the template
3. Is a Vue template JSX?

PracticeSolve the lesson tasksA few short tasks in the editor. Check your code right away and see where it goes wrong.Start practice