Framework: Vue.js

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

npm init vite@latest
cd vite-app //spostiamoci nella cartella
npm install //installiamo le librerie
npm run dev //apriamo il cli
//si aprirà una porta (probabilmente la 5173)

Architettura

\vue-project
├── .vscode/
├── node_modules/
├── public/
├── src/
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
├── README.md
└── vite.config.js

Dentro src troviamo la nostra App che monta tutti i componenti. Andiamo a guardare ./src/components

Proviamo ad osservare insieme un semplice calcolatore come abbiamo visto per gli altri componenti

<template>
    <section>
        <p v-if="likes > 0">
            This page has {{likes}} likes
        </p>
        <p v-else>
            This page has no likes :(
        </p>
        <button v-on:click="like()">
            Like this page!
        </button>
    </section>
  </template>

  <script>    
  export default {
    data() {
        return {
            likes: 0,
        }
    },

    methods: {
        like() {
            this.likes++
            alert("You liked this page!")
        }
    }
  }
  </script>

Creando un nuovo componente chiamato "Likes.vue", importiamolo nell'App e proviamo ad utilizzarlo

Dobbiamo importare questo componente nell'App, quindi andiamo su App.vue e aggiungiamo il seguente codice:

  <template>
  <div>
    <Likes />
  </div>
</template>

<script>
import Likes from "@/components/Likes.vue";

export default {
  components: {
    Likes,
  },
};
</script>

Vite ricaricherà il server in automatico una volta salvato il tutto.

Architettura di un componente

Un componente Vue si divide in tre parti principali:

• Template
• Script
• Style

Il template è la parte HTML del componente, il codice che vediamo nel browser. Il template può essere scritto in HTML o in Pug, un linguaggio di template che permette di scrivere codice HTML in modo più semplice e veloce.

Lo script è la parte JavaScript del componente, dove vengono definite le funzioni e le variabili che il componente utilizza. Lo script può essere scritto in JavaScript o in TypeScript, un linguaggio di programmazione che aggiunge tipi statici a JavaScript.

Lo style è la parte CSS del componente, dove vengono definite le regole di stile che il componente utilizza. Lo style può essere scritto in CSS o in SCSS, un preprocessore CSS che aggiunge funzionalità avanzate a CSS.

 <template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello World',
      message: 'This is a simple Vue component'
    }
  }
}
</script>

<style>
h1 {
  font-size: 2rem;
  font-weight: bold;
}

p {
  font-size: 1rem;
  color: gray;
}
</style>

export default è una funzionalità del sistema dei moduli ES6 usato in JavaScript che consente di esportare un singolo valore da un modulo. L'istruzione export default viene utilizzata per specificare l'esportazione predefinita di un modulo, che può quindi essere importato da altri moduli tramite l'istruzione import.

In Vue.js, il metodo data() è un'opzione del componente utilizzata per definire i dati iniziali di un componente. Il metodo data() dovrebbe restituire un oggetto con proprietà che rappresentano lo stato del componente. Quando il componente viene creato, Vue.js unisce le proprietà dell'oggetto data() all'istanza del componente, rendendole reattive. Ciò significa che se una delle proprietà dell'oggetto data() cambia, il componente verrà automaticamente ri-renderizzato per riflettere lo stato aggiornato.

  <template>
      <div>
        <p>{{ message }}</p>
        <button v-on:click="changeMessage">Cambia Messaggio</button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          message: 'Ciao Mondo!'
        }
      },
      methods: {
        changeMessage() {
          this.message = 'Nuovo Messaggio!'
        }
      }
    }
    </script>

Altri esempi

  //HelloWorld.vue
  <script>
  export default {
    data() {
      return {
        message: 'Ciao Mondo!'
      }
    },
    computed: {
      reversedMessage() {
        return this.message.split('').reverse().join('')
      }
    },
    methods: {
      greet() {
        alert(this.message)
      }
    }
  }
  </script>

  <template>
    <div>
      <h1>{{ reversedMessage }}</h1>
      <button v-on:click="greet">Saluta</button>
    </div>
  </template>

In questo esempio, abbiamo definito un componente semplice con un'opzione data che contiene una stringa di messaggio, una proprietà computed che restituisce il messaggio invertito e un metodo che mostra un messaggio in una finestra di dialogo di avviso.

Aggiorniamo anche App.vue

  <template>
  <div>
    <Likes />
    <HelloWorld />
  </div>
</template>

<script>
import Likes from "@/components/Likes.vue";
import HelloWorld from '@/components/HelloWorld.vue';

export default {
  components: {
    Likes,
    HelloWorld,
  },
};
</script>

L'elemento script dentro HelloWorld.vue definisce l'oggetto da esportare tramite la funzione data(). Ritorna un elemento message con dentro una stringa; computed poi esporta un messaggio che modifica tramite this.message il testo originario, e l'oggetto methods esporta la funzione che andrà eseguita dentro il template