Vue SFC: script, template e style
Comprendere il formato Single-File Component: il blocco script per la logica, il blocco template per la vista e il blocco style per il CSS con ambito limitato.
Vue SFC: script, template e style è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Che cos'è un componente a file singolo?
Un Vue Single-File Component (SFC) è un file .vue con tre blocchi: <script> per la logica JavaScript, <template> per la vista HTML e <style> per il CSS. Tutto ciò che serve per un componente si trova in un unico file.
<script setup lang="ts">
const greeting = 'Hello, Vue!';
</script>
<template>
<h1>{{ greeting }}</h1>
</template>
<style scoped>
h1 { color: #42b883; }
</style>Il blocco script
Qui si inseriscono logica, dati, importazioni e codice della Composition API. Con <script setup>, le variabili e le importazioni dichiarate al livello superiore sono automaticamente disponibili nel template.
script setup — L'approccio moderno
<script setup> è la sintassi SFC consigliata. Le variabili, le proprietà calcolate e le funzioni dichiarate al suo interno sono direttamente disponibili nel template, senza doverle restituire esplicitamente.
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
function increment() { count.value++; }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>Il blocco template
Il template contiene la vista HTML del componente. I template Vue vengono compilati in funzioni di rendering. Utilizzi gli attributi e le direttive specifici di Vue (v-if, v-for, @click) all'interno del template.
Interpolazione nei template
Utilizzi le doppie parentesi graffe {{ }} per visualizzare dati reattivi come testo. Vue esegue automaticamente l'escape dell'HTML; per eseguire il rendering di HTML, utilizzi la direttiva v-html (con cautela).
<template>
<p>{{ message }}</p>
<p>{{ count * 2 }}</p>
<p>{{ isActive ? 'Active' : 'Inactive' }}</p>
</template>Il blocco style
Il CSS nel blocco style si applica al componente. Aggiunga scoped per limitare gli stili ai soli elementi di questo componente, evitando fuoriuscite accidentali di stili globali.
<style scoped>
.card {
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Without scoped: affects all .card elements globally */
</style>Come funzionano gli stili con scoped
Vue aggiunge un attributo data univoco (come data-v-abc123) agli elementi del componente e riscrive i selettori CSS con scoped per includere tale attributo. In questo modo gli stili corrispondono solo agli elementi di questo componente.
CSS Modules in Vue
Un'alternativa a scoped è usare <style module> per i CSS Modules. Acceda ai nomi delle classi tramite l'oggetto $style nel template.
<template>
<div :class="$style.card">Content</div>
</template>
<style module>
.card { background: white; }
</style>Stili globali
Gli stili senza scoped si applicano globalmente. Un pattern comune consiste in un app.css globale per gli stili di base e i design token, più stili scoped per componente destinati alle regole specifiche del componente.
TypeScript negli SFC
Aggiunga lang="ts" al blocco script per usare TypeScript. Volar (l'estensione IDE ufficiale di Vue) fornisce supporto completo a TypeScript per gli SFC Vue, inclusi i template sottoposti al controllo dei tipi.
Denominazione dei file SFC
Assegni ai file SFC nomi in PascalCase (UserProfile.vue) per i componenti usati nei template. Vue consiglia nomi composti da più parole per evitare conflitti con gli elementi HTML.
Verifica rapida
Cosa fa l'attributo scoped su un blocco <style> di Vue?
Riepilogo: Vue SFC
I file .vue hanno tre blocchi: script (logica), template (vista), style (CSS). Utilizzi