Creazione del primo componente Vue.js

Vue.js è un framework basato su componenti, il che significa che le applicazioni sono create utilizzando componenti riutilizzabili. Ogni componente incapsula il proprio HTML, CSS e JavaScript. Questo articolo ti guiderà attraverso il processo di creazione del tuo primo componente Vue.js da zero.

Creazione di un nuovo componente Vue

I componenti Vue.js sono solitamente archiviati in file .vue. Ogni file componente è costituito da tre sezioni principali: '<template>', '<script>' e '<style>'. Creiamo un semplice componente chiamato Greeting.vue.

1. Vai alla cartella del tuo progetto: Usa il terminale per spostarti nella directory del tuo progetto Vue:

cd my-vue-project

2. Crea un nuovo file componente: Nella directory src/components, crea un nuovo file denominato Greeting.vue.

<template>
  <div>
    <h1>Hello, Vue.js!</h1>
    <p>Welcome to your first Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'Greeting'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Questo componente Greeting.vue contiene:

• <template>: Definisce la struttura HTML del componente.
• <script>: Contiene la logica JavaScript per il componente, come le proprietà dei dati e i metodi.
• <style>: Contiene gli stili CSS limitati a questo componente. L'attributo scoped assicura che gli stili si applichino solo a questo componente.

Utilizzo del componente

Dopo aver creato il componente, devi utilizzarlo all'interno della tua applicazione Vue. Apri il file src/App.vue e modificalo per includere il componente Greeting:

<template>
  <div id="app">
    <Greeting />
  </div>
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
  name: 'App',
  components: {
    Greeting
  }
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>

In questo file App.vue aggiornato:

• Importa il componente: Usa import Greeting from './components/Greeting.vue'; per importare il componente Greeting.
• Registra il componente: Aggiungi Greeting all'oggetto components nel blocco export default.
• Utilizza il componente: Inserisci il tag '<Greeting />' nella sezione '<template>' per utilizzare il componente nella tua app.

Test del componente

Salva le modifiche e assicurati che il tuo server di sviluppo sia in esecuzione. Apri il tuo browser e vai su http://localhost:8080. Dovresti vedere il contenuto del componente Greeting renderizzato sulla pagina.

Conclusione

Hai creato e utilizzato con successo il tuo primo componente Vue.js. I componenti sono i mattoni delle applicazioni Vue.js, che ti consentono di incapsulare e gestire diverse parti della tua interfaccia utente. Man mano che acquisisci familiarità con Vue.js, puoi esplorare funzionalità avanzate come prop dei componenti, eventi e hook del ciclo di vita per creare applicazioni più interattive e complesse.

Continua a sperimentare con i componenti Vue.js e amplia le tue conoscenze per creare applicazioni web dinamiche e coinvolgenti.