Panoramica ​

Impara Vue con i tutorial video su VueMastery.com

Cos'è Vue? ​

Vue (pronunciato /vjuː/, come view in inglese) è un framework JavaScript per la costruzione di interfacce utente. Si basa su standard HTML, CSS e JavaScript e fornisce un modello di programmazione dichiarativo e basato su componenti che ti aiuta a sviluppare in modo efficiente interfacce utente, siano esse semplici o complesse.

Questo è un piccolo esempio:

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Il conteggio è: {{ count }}
  </button>
</div>

Risultato

L'esempio precedente dimostra le due caratteristiche fondamentali di Vue:

• Rendering Dichiarativo: Vue estende l'HTML standard con una sintassi di template che ci permette di descrivere in modo dichiarativo l'output HTML basato sullo stato JavaScript.

• Reattività: Vue traccia automaticamente i cambiamenti dello stato JavaScript e aggiorna in modo efficiente il DOM quando avvengono modifiche.

Potresti già avere delle domande, non preoccuparti. Copriremo ogni piccolo dettaglio nel resto della documentazione. Per ora, ti preghiamo di continuare a leggere per avere una comprensione di alto livello di ciò che Vue offre.

Il Framework Progressivo ​

Vue è un framework e un ecosistema che copre la maggior parte delle caratteristiche necessarie allo sviluppo frontend. Ma il web è estremamente vario - le cose che costruiamo sul web possono essere estremamente differenti nella forma e nella grandezza. Pensando a ciò, Vue è stato progettato per essere flessibile e favorirne l'uso in modo incrementale. A seconda del tuo caso d'uso, Vue può essere utilizzato in modi diversi:

• Migliorare l'HTML statico senza l'uso della compilazione
• Incorporare Web Components su qualsiasi pagina
• Applicazioni Single-Page (SPA)
• Fullstack / Rendering Server-Side (SSR)
• Jamstack / Generazione di Siti Statici (SSG)
• per usi su desktop, mobile, WebGL e perfino al terminale

Se questi concetti sembrano difficili non preoccuparti! Il tutorial e la guida richiedono conoscenze di HTML e JavaScript di base e dovresti riuscire a seguire tutto senza essere un esperto.

Se sei uno sviluppatore esperto interessato a come integrare al meglio Vue nel tuo stack tecnologico, o sei curioso di sapere cosa significano questi termini, ne discutiamo in modo più dettagliato in Modi di utilizzare Vue.

Indipendentemente dalla sua flessibilità, la conoscenza di base su come funziona Vue rimane la stessa in tutti casi d'uso visti qui sopra. Anche se ora sei solo un principiante, le conoscenze acquisite lungo il cammino rimarranno utili mentre cresci e affronti obiettivi sempre più ambiziosi. Se sei un veterano, puoi scegliere il modo più congeniale per sfruttare Vue in base ai problemi che stai cercando di risolvere, mantenendo la stessa produttività. Questo è il motivo per cui chiamiamo Vue "Il Framework Progressivo": è un framework che può crescere con te e adattarsi alle tue esigenze.

Componenti Single-File ​

Nei progetti Vue che sfruttano gli strumenti di compilazione, creiamo componenti Vue utilizzando un formato di file simile a HTML chiamato Single-File Component (Componente in un singolo file, anche noto come file *.vue , abbreviato in SFC). Un file SFC, come suggerisce il nome, incorpora in un singolo file la logica (JavaScript), il template (HTML) e lo stile (CSS) del componente. Ecco l'esempio precedente, riscritto in formato SFC:

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Il conteggio è: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Il conteggio è: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

L'SFC è una caratteristica distintiva di Vue ed è il modo consigliato per la creazione di componenti Vue se il tuo progetto richiede l'uso e la configurazione della compilazione. Nella sezione dedicata puoi saperne di più su come e perché usare SFC. Al momento è sufficiente sapere che Vue si occuperà di tutta la configurazione degli strumenti di compilazione per te.

Stili delle API ​

I componenti Vue possono essere scritti in due diversi stili di API: Options API e Composition API.

Options API ​

Con l'Options API definiamo la logica di un componente utilizzando un oggetto contenente opzioni come data, methods, and mounted. Le proprietà definite dalle opzioni vengono esposte all'interno delle funzioni su this, che fa riferimento all'istanza del componente:

<script>
export default {
  // Le proprietà restituite da data() diventano parte dello stato reattivo.
  // e saranno esposte su `this`.
  data() {
    return {
      count: 0
    }
  },

  // I metodi sono funzioni che modificano lo stato e innescano degli aggiornamenti.
  // Possono essere usati come gestori di eventi nei template (tramite `v-on`).
  methods: {
    increment() {
      this.count++
    }
  },

  // Gli hook del ciclo di vita vengono chiamati in diverse fasi
  // del ciclo di vita di un componente.
  // Questa funzione verrà chiamata quando il componente sarà montato.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Il conteggio è: {{ count }}</button>
</template>

Prova nel Playground

Composition API ​

Nella Composition API definiamo la logica di un componente importando le funzioni dell'API. Negli SFC, di solito, la Composition API è utilizzata con <script setup>. L'attributo setup è un suggerimento che, durante la compilazione, permette a Vue di eseguire delle trasformazioni e usare la Composition API con meno codice ripetitivo. Per esempio gli imports e le variabili / funzioni di livello superiore dichiarate in <script setup> possono essere usate direttamente nel template.

Ecco lo stesso componente, con lo stesso identico template, ma utilizzando la Composition API usando <script setup>:

<script setup>
import { ref, onMounted } from 'vue'

// stato reattivo
const count = ref(0)

// funzioni che modificano lo stato e innescano l'aggiornamento
function increment() {
  count.value++
}

// hook del ciclo di vita
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Il conteggio è: {{ count }}</button>
</template>

Prova nel Playground

Quale scegliere? ​

Entrambi gli stili di API sono completamente in grado di coprire i casi d'uso più comuni. Si tratta di interfacce diverse alimentate dallo stesso identico sistema. In effetti l'Options API è implementata al di sopra della Composition API! I concetti fondamentali e la conoscenza riguardo Vue sono condivisi dai due stili.

L'Options API è incentrata sul concetto di "component instance" ('istanza di componente', this come visto nell'esempio), che tipicamente si allinea meglio con un modello mentale basato sulle Classi per gli utenti provenienti da linguaggi OOP. È anche più accessibile ai principianti, nascondendo i dettagli della reattività e imponendo un'organizzazione del codice tramite gruppi di opzioni.

La Composition API, invece, si concentra sulla dichiarazione di variabili di stato reattive direttamente nell'ambito di una funzione e, per gestire la complessità, sulla composizione dello stato da più funzioni insieme. È un modo di scrivere codice più libero e richiede una comprensione di come funziona la reattività in Vue per essere utilizzata in modo efficace. In cambio la sua flessibilità consente strutture per l'organizzazione e il riutilizzo della logica più potenti.

Puoi saperne di più sul confronto tra i due stili e sui potenziali vantaggi della Composition API nelle FAQ sulla Composition API.

Se sei nuovo in Vue, in linea di massima, ecco la nostra raccomandazione:

• Per scopi di apprendimento scegli lo stile che ti sembra più facile da capire. Ancora una volta, la maggior parte dei concetti chiave sono condivisi tra i due stili. Puoi sempre imparare l'altro stile in seguito.

• Per l'uso in produzione:

  • Scegli l'Options API se non stai utilizzando strumenti di build, o se prevedi di utilizzare Vue principalmente in scenari di bassa complessità, ad esempio per un miglioramento progressivo.

  • Scegli la Composition API + Componenti Single-File se prevedi di costruire applicazioni complete con Vue.

Non devi impegnarti a utilizzare un solo stile durante la fase di apprendimento. Il resto della documentazione fornirà esempi di codice in entrambi gli stili dove applicabile, e potrai passare da uno all'altro in qualsiasi momento utilizzando il selettore di preferenza API, presente nella parte superiore della barra laterale sinistra.

Hai ancora domande? ​

Consulta le nostre FAQ.

Scegli il tuo percorso di apprendimento​ ​

Ogni sviluppatore ha uno stile di apprendimento diverso. Sentiti libero di scegliere un percorso di apprendimento che si adatti alle tue preferenze - anche se ti consigliamo di esaminare tutto il contenuto, se possibile!