User Avatar

Corso Vue.js

32 ore
Qualsiasi livello

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

    Contattaci su Whatsapp
    Innovaformazione
    Privacy Policy

    Questo sito Web utilizza i cookie per consentirci di offrire la migliore esperienza utente possibile. Le informazioni sui cookie sono memorizzate nel tuo browser ed eseguono funzioni come riconoscerti quando ritorni sul nostro sito web e aiutando il nostro team a capire quali sezioni del sito web trovi più interessanti e utili.

    È possibile regolare tutte le impostazioni dei cookie navigando le schede sul lato sinistro.