Vuejs come funziona in parole generali
Vue.js è un framework frontend utilizzato per creare applicazioni web lato client. In un progetto Vue.js, le comunicazioni con il backend avvengono tramite API (REST API).
Vue.js si basa su una logica a componenti. Un componente è una parte riutilizzabile dell’interfaccia utente, scritta in HTML, che rappresenta una sezione della pagina web, ad esempio un menu di navigazione.
Esistono due modalità principali per scrivere codice in Vue.js: Options API e Composition API.
Come in React, anche in Vue.js esiste uno stato interno: in Vue viene gestito tramite data oppure ref.
Un aspetto importante è il passaggio dei dati tra componenti. Un’applicazione Vue è composta da più componenti che lavorano insieme.
Ad esempio, un componente Post può definire dei dati props in questo modo:
<Post :data="article" />
In questo caso :data è una proprietà del componente che riceve un oggetto article:
{
"title": "Titolo dell'articolo",
"content": "Descrizione dell'articolo"
}
Questo oggetto sarà disponibile nel componente Post tramite le props.
Cosi:
<script>
export default {
props: ['data'],
data() {
return {titlePage: 'Pagina Article'}
}
}
</script>
<template>
<h1>{{titlePage}}</h1>
<p>{{data.title}}</p>
<div>{{data.content}}</div>
</template>
<style scoped>
p {
font-size: 20;
}
</style>