Vue.js è un framework JavaScript
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
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
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
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
Le props (abbreviazione di “properties”) sono una caratteristica di Vue.js che consente la comunicazione unidirezionale dei dati tra componenti genitore e figlio. Difatti le props consentono dunque ai componenti figli di accedere ai dati passati loro dal componente genitore. Come vengono passati i dati con le props da padre a figlio? Le props sono passate … Leggi tutto
La direttiva v-model in Vue.js è utilizzata per creare un legame bidirezionale tra i dati dell’applicazione e gli elementi di input HTML come campi di testo, caselle di controllo e menu a discesa. Questa direttiva semplifica notevolmente la gestione degli input da parte degli utenti e la sincronizzazione dello stato dell’applicazione. Sintassi di base: Questa … Leggi tutto
La direttiva v-bind in Vue.js è una delle direttive più utilizzate per collegare dinamicamente gli attributi HTML a espressioni Vue all’interno del template. Questo consente di rendere l’interfaccia utente reattiva e di aggiornare dinamicamente gli attributi degli elementi in base allo stato dell’applicazione. Questa direttiva può essere utilizzata nella sua forma esplicita v-bind oppure nella … Leggi tutto
La direttiva v-for in Vue.js è una delle direttive più utilizzate in Vue.js ed è usata per iterare su un array o su un oggetto e renderizzare dinamicamente gli elementi nel DOM. Ecco la sintassi di base: La direttiva v-for in Vue.js si utilizza nella forma “item in items“, dove items è l’array o l’oggetto … Leggi tutto
In questa lezione parleremo della direttiva v-if in Vue.js e delle direttive v-else, e v-else-if. Queste direttive sono degli strumenti potenti per la gestione condizionale del rendering degli elementi nell’interfaccia utente. Permettono di mostrare o nascondere elementi in base al verificarsi di determinate condizioni. Dunque spieghiamo dettagliatamente queste direttive. Direttiva v-if in Vue.js La direttiva … Leggi tutto
In questa lezione realizzermo l’esercizio Counter utilizzando Vue.js. Il contatore che creermo si incrementerà ogni volta che clicchermo su un pulsante, si decrementerà ogni volta che cliccheremo su un altro pulsante. Counter in Vue.js utilizzando la Option API Realizziamo il componente per il nostro contatore dapprima utilizzando la sintassi Option API. Ecco dunque una possibile … Leggi tutto
La Composition API è una delle funzionalità principali introdotte in Vue.js 3, progettata per fornire un modo più flessibile e organizzato per scrivere la logica dei componenti Vue. Questa API si basa sul concetto di “composizione” delle funzioni, consentendo dunque di separare la logica correlata in unità riutilizzabili e componibili. Dunque vediamo subito un esempio … Leggi tutto
Con l’Option API di Vue.js, si possono definire i dati, i metodi e le proprietà calcolate del componente Vue in modo esplicito all’interno dell’opzione data, methods, computed, ecc. La Option API è uno dei due modi principali per definire un componente Vue, insieme alla Composition API introdotta in Vue 3. Option API – Esempio Ecco … Leggi tutto
I componenti Vue.js sono elementi modulari e riutilizzabili che rappresentano parti specifiche dell’interfaccia utente di un’applicazione. Ogni componente Vue è autonomo, con la propria logica, struttura e stile. Questo approccio semplifica la gestione e la manutenzione del codice, specialmente in progetti complessi. Definire i componenti in Vue.js I componenti Vue.js possono essere definiti utilizzando l’estensione … Leggi tutto
Facciamo i primi passi con Vue.js, dopo la sua installazione e aver creato un nuovo progetto utilizzando Vue CLI, come spiegato nella lezione precedente: installare Vue.js. Aprendo dunqur la cartella del progetto o esaminandola in VSCode si nota la struttura di base che include diversi file e cartelle che costituiscono l’infrastruttura di base per lo … Leggi tutto
In questa lezione vi spiego come installare Vue.js per iniziare ad utilizzarlo. Ci sono diverse opzioni per iniziare ad utilizzare Vue.js: utilizzare la CDN oppure configurare l’ambiente di sviluppo. Innanzitutto linkiamo il sito ufficiale di Vue.js dove possiamo trovare una vasta gamma di risorse di riferimento: Vue.js. Su questo sito troviamo infatti il riferimento alla … Leggi tutto
Vue.js è un framework JavaScript ampiamente utilizzato per lo sviluppo di interfacce utente dinamiche e reattive, apprezzato sia dai principianti che dagli sviluppatori esperti. Vue.js è basato su un’architettura modulare e component-based e consente di suddividere l’interfaccia utente in componenti riutilizzabili, facilitando la manutenibilità del codice. Grazie al suo sistema di reattività, Vue.js offre un’esperienza … Leggi tutto