Corso Vue.js
Corso Vue.js. Vue.js è un framework javascript open-source e front-source. E’ utilizzato per lo sviluppo interfacce utente e single page application (spa). Nasce nel 2014 con il fondatore cinese Evan You e con il suo team. Vue Fornisce un modello dichiarativo e basato su componenti che aiuta a sviluppare in modo efficiente le interfacce utente sia semplici che complesse. Vue.js ha due funzionalità principali:
- Rendering dichiarativo: Vue estende l’HTML standard con una sintassi del modello che ci consente di descrivere in modo dichiarativo l’output HTML in base allo stato JavaScript.
- Reattività: Vue tiene traccia automaticamente delle modifiche allo stato di JavaScript e aggiorna in modo efficiente il DOM quando si verificano modifiche.
Viene definito un “progressive framework”: Vue è un framework ed ecosistema che copre la maggior parte delle funzionalità comuni necessarie nello sviluppo del frontend. Ma il web è estremamente diversificato: ciò che costruiamo sul web può variare drasticamente in forma e portata. A tale scopo Vue è progettato per essere flessibile e adottabile in modo incrementale. Lo si chiama “progressive framework” perchè può crescere progressivamente ed adattarsi alle necessità. A seconda del caso d’uso, Vue può essere utilizzato in diversi modi:
- Miglioramento dell’HTML statico senza una fase di creazione
- Incorporamento come componenti Web in qualsiasi pagina
- Single Page Application (SPA)
- Full Stack/Rendering lato server (SSR)
- Jamstack/Generazione di siti statici (SSG)
- Targeting per desktop, dispositivi mobili, WebGL e persino terminale
Vue.js implementa il pattern MVVM (Model-View-ViewModel). Si tratta di una declinazione del più famoso MVC (Model-View-Controller). Le tre componenti di un’applicazione MVVM sono tre:
- Il Model che rappresenta l’implementazione del dominio dati gestito dall’applicazione
- La View che non è altro che il componente grafico renderizzato all’utente (HTML e CSS)
- Il ViewModel è il collante fra i precedenti componenti e fornisce alla View i dati nel formato per la presentazione
Quando scegliere di utilizzare Vue.js?
- Per la creazione di prototipi per specialisti di livello principiante. Per i designer con poca esperienza non sarà molto difficile realizzare prototipi con Vue. La creazione di componenti utilizzando JS, HTML, CSS e modelli HTML consente agli utenti di iniziare facilmente i propri progetti. Inoltre, con l’interfaccia utente Vue, un ingegnere del software può configurare e organizzare l’applicazione in modo da sfruttare rapidamente i suoi componenti. Se lo sviluppatore incontra difficoltà, può richiedere aiuto alla community. Inoltre, gli sviluppatori possono ottenere informazioni preziose dall’abbondante documentazione.
- Per l’integrazione delle applicazioni. Il framework Vue è un’ottima opzione quando è necessario integrarsi con le attuali AMP e SPA rese dal server.
- Per la pubblicazione di un MVP. Se si desidera eseguire rapidamente la pubblicazione MVP, implementare il framework Vue.js è un’ottima soluzione. Gli ingegneri del software possono riutilizzare i componenti e accelerare la creazione di applicazioni e il lancio di MVP.
- Per le animazioni e l’interazione. Le animazioni aiutano a catturare facilmente l’attenzione dell’utente, oltre a mantenerla. Pertanto, questa è un punto essenziale nelle applicazioni di oggi. Il framework Vue.js offre API con transizione graduale tra visualizzazione e architettura regolabile. Inoltre, esistono numerosi approcci per creare animazioni accattivanti con i moduli integrati basati sui CSS.
I benefici di Vue.js :
- rapida curva di apprendimento
- Leggero
- Ampia gamma di Tools
- Flessibilità ed integrabilità
- Progressività
- Elevato livello di personalizzazione
- Buona documentazione
- Alte performance
- Popolare nell’industria dello sviluppo
- Codice semplice da leggere e componenti “single file”
Obiettivi del Corso Vue.js:
Formare lo studente per lo sviluppo applicazioni web con il framework Vue.js
Requisiti per i discenti Corso Vue.js:
Conoscenze di programmazione in HTML, CSS e Javascript
Altri framework del mondo Javascript sono Angular e React.
Corso Corso Corso Vue.js attivabile solo per le aziende e su richiesta.
Modalità virtual classroom online in diretta (o frontale in-house).
Vuoi essere ricontattato?
Lasciaci il tuo numero telefonico e la tua email, ti richiameremo nelle 24h:
Programma didattico Corso Vue.js (32 ore)
1. Introduzione a Vue.js
Pro e contro di Vue.js
Vue-cli
Anatomia dell’app ed Hello World Vue
2. Template e View Model
Template
Istanza viewmodel/vue
Sintassi template
Interpolazione
Direttiva
Filtri
Espressioni Javascript
Proprietà calcolate
Osservatori
Legami di classe e stile
Classi HTML
Stili in linea
Rendering condizionale ed iterativo
3. Istanza Vue rivisitata
Utilizzo di base dell’istanza Vue
Istanze Vue multiple
Ciclo di vita dell’istanza Vue
Accesso ai dati dall’istanza Vue esterna
Dati e metodi
4. Gestione degli eventi
introduzione
Ascolto di eventi
Metodo Gestori di eventi
Modificatori di eventi
Modificatori chiave
5. Forms e Two way binding
Two way binding via tramite v-model
Gestione dell’input dell’utente con controlli del modulo HTML
Data binding
Modificatori .lazy, .number, .trim
Invio di un form
6. Introduzione ai componenti
Anatomia di un componente
Registrazione dei componenti a livello locale e globale
Componente Root
Composizione dell’applicazione come componenti
7. Passaggio dei dati ai componenti
Props, comunicazione da genitore a figlio
Eventi personalizzati, da figlio a genitore
8. Distribuzione dei contenuti con slot
Compilation scope
Single Slot
Named Slot
Scoped Slot
9. Componenti dinamici
Switching di più componenti con componenti dinamici
Comportamento dei componenti dinamici
Lifecycle hooks
10. Custom Directives
Directive hook functions
Sviluppo di una custom directive
Passaggio di valori e arguments alle custom directive
Directive hook arguments
11. Mixin
Creazione e utilizzo di mixin
Option merging
Global mixin
12 Filtri rivisitati
Filtri locali
Filtri globali
Filtri concatenati
13. Comunicazione remota con Vue.js
Utilizzo di vue-resource per lavorare con HTTP
Fetch data
Pubblicare i dati sul server
Request response interception
Template Urls
14. Routing
Setting di vue-router
Caricamento routes
Routing modes
Navigazione con router links
Styling dei collegamenti attivi
Navigazione imperativa
Route parameters
Setting child o nested routes
Named routes
Query parameters
Named router views
Route guards
15. State management
Panoramica vuex
Centralized store
Getters
Mappatura dei getter alle proprietà
16. Mutations
Mutations
Actions
Mappatura delle actions sui methods
17. Unit testing
Setup e tooling
Test dei componenti