Applicazione con OpenLibrary in Vue

Applicazione con OpenLibrary in Vue

In questa lezione realizzeremo un’applicazione con l’uso di OpenLibrary, un progetto open source che si propone di creare un catalogo online completo e accessibile di tutti i libri. È gestito da Internet Archive, una organizzazione non profit che si impegna a preservare il patrimonio culturale digitale. L’obiettivo principale di OpenLibrary è quello di fornire un’ampia … Leggi tutto

Visualizzare libri da un file JSON

Visualizzare libri da un file JSON

In questa lezione impararemo a visualizzare dei libri da un file JSON. Ricordiamo che la visualizzazione dei dati da un file JSON è un’operazione comune nello sviluppo di applicazioni web e mobili poiché i file JSON forniscono un modo efficace per organizzare e trasferire dati strutturati. Visualizzare libri da un file JSON – esempio Supponiamo … Leggi tutto

Dati JSON

Dati JSON

JSON, acronimo di JavaScript Object Notation, è un modo molto pratico ed efficiente di rappresentare e scambiare dati tra diverse applicazioni e sistemi informatici. È come una lingua comune che le applicazioni usano per comunicare tra loro in modo chiaro e conciso. Immagina JSON come una scatola virtuale che contiene informazioni organizzate in modo specifico. … Leggi tutto

API

API

Le API (Application Programming Interface) rappresentano un pilastro fondamentale nell’ecosistema delle tecnologie moderne. Esse definiscono le regole e i protocolli attraverso i quali le applicazioni software possono interagire tra loro e con altri sistemi, consentendo la comunicazione e lo scambio di dati in modo efficace e standardizzato. Tipi di API Esistono diversi tipi di API, … Leggi tutto

Lifecycle hook beforeUpdate

Lifecycle hook beforeUpdate

Il lifecycle hook beforeUpdate in Vue.js viene chiamato prima che l’istanza di Vue aggiorni il DOM e renda nuovamente il componente. Questo hook è utile quando è necessario eseguire determinati compiti o calcoli prima dell’aggiornamento del componente. Quando utilizzare il lifecycle hook beforeUpdate? L’hook beforeUpdate in Vue.js è utile quando si desidera eseguire operazioni o … Leggi tutto

Creare Componenti Vue con le Rotte

In questa lezione vedremo come creare componenti Vue per le rotte utilizzando Vue Router. Scopo di questa lezione è quello di creare un piccolo sito web di esempio per capire come visualizzare le varie pagine personalizzate con contenuto e titolo. Iniziamo con la creazione di alcuni componenti: HeaderComponent e FooterComponent. Creare Componenti Vue con le … Leggi tutto

Installare Vue Router

Installare Vue Router

In questa lezione vedremo come installare Vue Router nei nostri progetti. Per l’installazione di Vue Router analizzeremo in dettaglio i passaggi da seguire per poterlo utilizzare nei nostri progetti. Innanzitutto assicuriamoci di avere un progetto Vue già creato. Se non si ha ancora un progetto, si può crearlo utilizzando Vue CLI o un altro metodo … Leggi tutto

Introduzione a Vue Router

Introduzione a Vue Router

In questa lezione faremo una breve introduzione a Vue Router per capire perchè è conveniente utilizzarlo nei nostri progetti, Definizione Vue Router è una libreria ufficiale per la gestione delle rotte nelle applicazioni Vue.js. Quindi, consente di definire le diverse “rotte” all’interno delle nostre applicazioni Vue.js e dunque permette di gestire la navigazione tra di … Leggi tutto

Lifecycle hook beforeMount

Lifecycle hook beforeMount

In questa lezione parleremo di lifecycle hook beforeMount di Vue.js. Questo metodo è uno dei lifecycle hooks che viene chiamato prima che il componente venga montato nel DOM, dunque permette di eseguire operazioni di preparazione o configurazione prima che il componente sia effettivamente visualizzato nella pagina web. Quindi, possiamo affermare che beforeMount è un hook utile … Leggi tutto

lifecycle hook created in Vue.js

lifecycle hook created in Vue.js

In questa lezione parleremo del lifecycle hook created in Vue.js. Questo hook è uno dei primi ad essere eseguiti durante il ciclo di vita di un componente Vue. lifecycle hook created in Vue.js – quando è chiamato? Il lifecycle hook created in Vue.js viene chiamato subito dopo che l’istanza del componente è stata creata e tutte … Leggi tutto

lifecycle hook beforeCreate in Vue.js

lifecycle hook beforeCreate in Vue.js

In questa lezione parleremo di beforeCreate, un lifecycle hook dei componenti in Vue.js. Gli hooks del ciclo di vita sono metodi predefiniti che sono chiamati in momenti specifici durante il ciclo di vita di un componente Vue. Ricordiamo che i lifecycle hooks consentono di eseguire codice in risposta a eventi come la creazione, l’aggiornamento o … Leggi tutto

slot di Vue.js

Slot di Vue.js

In questa lezione parleremo deli slot di Vue.js, partendo dalla definizione di slot nel contesto di Vue JS. Definizione tecnica 🛠️ In termini tecnici, uno slot è un’API che consente ai componenti genitori di inserire del contenuto all’interno dei componenti figlio in modo dinamico. Ciò significa che si può definire zone specifiche all’interno dei componenti … Leggi tutto

Tabs in Vue.js

Tabs in Vue.js

In questa lezione creiamo un esercizio per gestire le tabs in Vue.js. Le “tabs” sono solitamente utilizzati per creare interfacce utente con più schede, dove ogni scheda contiene un insieme di contenuti separati. Può essere utile ad esempio per organizzare e visualizzare diverse sezioni di informazioni o funzionalità all’interno di un’applicazione web. Ci sono diverse … Leggi tutto

Lifecycle hooks in Vue

In questa lezione parliamo dei lifecycle hooks in Vue.js che sono metodi speciali che possono essere definiti all’interno di un componente. Gli hooks sono eseguiti automaticamente in diverse fasi del ciclo di vita del componente stesso. Queste fasi includono la creazione, il montaggio, l’aggiornamento e la distruzione del componente. Utilizzando i lifecycle hooks in Vue.js, … Leggi tutto

Installazione di Bootstrap in Vue.js

Installazione di Bootstrap in Vue.js

In questa lezione effettueremo l’installazione di Bootstrap in Vue.js. Ricordiamo che Bootstrap è un framework front-end open source utilizzato per la progettazione e lo sviluppo di interfacce utente responsive e moderne per siti web e applicazioni web. Questo potente framework offre una vasta gamma di componenti UI predefiniti, come bottoni, form, navbar, cards e molto … Leggi tutto

Slideshow in Vue JS

Slideshow in Vue JS

In questa lezione realizziamo uno slideshow utilizzando Vue JS. Gli slideshow sono un elemento comune nelle moderne applicazioni web, utilizzati per presentare contenuti in modo dinamico e coinvolgente. Con Vue.js, è possibile creare facilmente uno slideshow interattivo che offre una user experience fluida e piacevole. In questo tutorial, ti guiderò attraverso i passaggi per creare … Leggi tutto

emit in Vue.js

emit in Vue.js

L’emit In Vue.js, è un metodo utilizzato per la comunicazione tra componenti figli e genitori. Infatti, consente ai componenti figli di inviare eventi al loro componente genitore. Possiamo descrivere il funzionamento di emit attraverso queste fasi. Emitting (Emissione): Nel componente figlio, si può chiamare il metodo $emit per emettere un evento. All’evento si può passare … Leggi tutto

props in Vue 3

props in Vue 3

In questa lezione affronteremo le props in Vue 3 integrando la sintassi della Composition API. Ricordiamo che le props sono un meccanismo fondamentale per passare dati da un componente genitore a uno figlio. Come gestire le props in Vue 3 e le Composition API? Con Vue 3, le props mantengono la loro flessibilità e immutabilità, … Leggi tutto