Vue SFC: script template style
Understand the Single-File Component format: the script block for logic, the template block for the view, and the style block for scoped CSS.
What Is a Single-File Component?
A Vue Single-File Component (SFC) is a .vue file with three blocks: <script> for JavaScript logic, <template> for the HTML view, and <style> for CSS. Everything for one component lives in one file.
<script setup lang="ts">
const greeting = 'Hello, Vue!';
</script>
<template>
<h1>{{ greeting }}</h1>
</template>
<style scoped>
h1 { color: #42b883; }
</style>The script Block
Logic, data, imports, and composition API code go here. With <script setup>, variables and imports declared at the top level are automatically available in the template.
All lessons in this course
- Vue SFC: script template style
- Options API: data methods computed
- Directives: v-if v-for v-bind v-on
- Component Props and Emits