Sintassi dei SFC ​

Panoramica ​

I Single-File Component (SFC) di Vue, solitamente con l'estensione di file *.vue, è un formato di file personalizzato che utilizza una sintassi simile a HTML per descrivere un componente Vue. Un SFC di Vue è sintatticamente compatibile con HTML.

Ogni file *.vue è composto da tre tipi di blocchi di linguaggio di primo livello: <template>, <script>, e <style>, e facoltativamente da blocchi personalizzati aggiuntivi:

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Ciao a tutti!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  Questo potrebbe essere ad esempio la documentazione per il componente.
</custom1>

Linguaggio dei blocchi ​

<template> ​

• Ogni file *.vue può contenere massimo un blocco <template>.

• I suoi contenuti verranno estratti e passati al @vue/compiler-dom, pre-compilati in render function di JavaScript, e collegati al componente esportato come sua opzionerender.

<script>