Vue.js
Vue.js software | |
---|---|
![]() | |
Genere | Framework per applicazioni web |
Sviluppatore | Evan You |
Data prima versione | febbraio 2014 |
Ultima versione | 3.4.34 (24 luglio 2024) |
Sistema operativo | Multipiattaforma |
Linguaggio | TypeScript JavaScript |
Licenza | licenza MIT (licenza libera) |
Sito web | vuejs.org/ |
Modifica dati su Wikidata · Manuale |
Vue.js (comunemente noto come Vue, pronunciato /vjuː/, come view) è un framework JavaScript open source in configurazione Model–view–viewmodel per la creazione di interfacce utente e single-page applications. È stato creato da Evan You ed è gestito da lui stesso e i membri attivi del core team, provenienti da varie società come Netlify e Netguru[1].
Panoramica
Vue.js presenta un'architettura adottabile in modo incrementale che si concentra sul rendering dichiarativo e sulla composizione dei componenti. Le funzionalità avanzate richieste per applicazioni complesse come routing, state management e strumenti di compilazione sono offerte tramite librerie e pacchetti di supporto ufficialmente mantenuti[2], che comprendono Nuxt.js tra le soluzioni più popolari.
Storia
Vue è stato creato da Evan You, dopo aver lavorato per Google utilizzando AngularJS in numerosi progetti. Ha proposto un sunto del suo processo di pensiero a seguito della sua esperienza: "Ho pensato, e se potessi solo estrarre la parte che mi piaceva molto di Angular e costruire qualcosa di veramente leggero?".[3] Il primo commit del codice sorgente del progetto è datato luglio 2013, mentre è stato pubblicato ufficialmente il febbraio successivo, nel 2014.
Versioni
Versione | Data di pubblicazione | Titolo |
---|---|---|
3.4 | 28 dicembre 2023[4] | Slam Dunk |
3.3 | 11 maggio 2023 | Rurouni Kenshin |
3.2 | 5 agosto 2021 | Quintessential Quintuplets |
3.1 | 7 giugno 2021 | Pluto |
3.0 | 18 settembre 2020 | One Piece |
2.6 | 4 febbraio 2019 | Macross |
2.5 | 13 ottobre 2017 | Level E |
2.4 | 13 lug 2017 | Kill la Kill |
2.3 | 27 aprile 2017 | JoJo's Bizarre Adventure |
2.2 | 26 febbraio 2017 | Initial D |
2.1 | 22 nov 2016 | Hunter X Hunter |
2.0 | 30 settembre 2016 | Ghost in the Shell |
1.0 | 27 ottobre 2015 | Evangelion |
0.12 | 12 giu 2015 | Dragon Ball |
0.11 | 7 nov 2014 | Cowboy Bebop |
0.10 | 23 marzo 2014 | Blade Runner |
0.9 | 25 febbraio 2014 | Animatrix |
0.8 | 27 gennaio 2014 | - |
0.7 | 24 dicembre 2013 | - |
0.6 | 8 dicembre 2013 | VueJS |
Caratteristiche
Componenti
I componenti Vue estendono gli elementi HTML di base per incapsulare il codice riutilizzabile. A livello generale, i componenti sono elementi personalizzati a cui il compilatore di Vue associa una funzionalità. In Vue, un componente è essenzialmente un'istanza di Vue con opzioni predefinite.[5]
Lo snippet di codice seguente contiene l'esempio di un componente Vue. Il componente presenta un pulsante e stampa il numero di volte in cui si fa clic sul pulsante:
<div id="tuto"> <button-clicked v-bind:initial-count="0"></button-clicked> </div> <script> Vue.component('button-clicked', { props: [ "initialCount" ], data: () => ({ count: 0, }), template: `<button v-on:click="onClick">Clicked <nowiki>{{ count }}</nowiki> times</button>`, computed: { countTimesTwo() { return this.count * 2; } }, watch: { count(newValue, oldValue) { console.log(`The value of count is changed from ${oldValue} to ${newValue}.`); } }, methods: { onClick() { this.count += 1; } }, mounted() { this.count = this.initialCount; } }); new Vue({ el: '#tuto', }); </script>
Modelli
Vue utilizza una sintassi di modello basata su HTML che consente di associare il DOM renderizzato ai dati dell'istanza di Vue sottostante. Tutti i modelli Vue sono HTML validi che possono essere analizzati da browser e parser HTML conformi alle specifiche. Vue compila i modelli in funzioni di rendering DOM virtuali. Un Document Object Model (o "DOM") virtuale consente a Vue di eseguire il rendering dei componenti in memoria prima di aggiornare il browser. In combinazione con il sistema di reattività, Vue è in grado di calcolare il numero minimo di componenti per eseguire nuovamente il rendering e applicare la quantità minima di manipolazioni DOM quando cambia lo stato dell'app.
Gli utenti di Vue possono utilizzare la sintassi del modello o scegliere di scrivere direttamente le funzioni di rendering utilizzando JSX.[6] Le funzioni di rendering consentono di compilare l'applicazione da componenti software.[7]
Reattività
Vue presenta un sistema di reattività che utilizza semplici oggetti JavaScript e un re-rendering ottimizzato. Ogni componente tiene traccia delle sue dipendenze reattive durante il rendering, in modo che il sistema sappia esattamente quando eseguire nuovamente il rendering e su quali componenti.[8]
Transizioni
Vue offre una varietà di modi per applicare effetti di transizione quando gli elementi vengono inseriti, aggiornati o rimossi dal DOM. Ciò include strumenti per:
- Applicare automaticamente le classi per le transizioni e le animazioni CSS;
- Integrare librerie di animazione CSS di terze parti, come Animate.css;
- Utilizzare JavaScript per manipolare direttamente il DOM durante gli hook di transizione;
- Integrare librerie di animazione JavaScript di terze parti, come Velocity.js.
Quando un elemento di cui è stato eseguito il wrapping in un componente di transizione viene inserito o rimosso, questo è ciò che accade:
- Vue rileverà automaticamente se all'elemento target sono state applicate transizioni o animazioni CSS. In tal caso, le classi di transizione CSS verranno aggiunte/rimosse nei tempi appropriati.
- Se il componente di transizione ha fornito hook di JavaScript, questi hook verranno chiamati nei tempi appropriati.
- Se non vengono rilevate transizioni/animazioni CSS e non vengono forniti hook di JavaScript, le operazioni DOM per l'inserimento e/o la rimozione verranno eseguite immediatamente sul frame successivo.[9][10]
Routing
Uno svantaggio tipico delle applicazioni a pagina singola (SPA) è l'incapacità di condividere collegamenti all'esatta "sotto" pagina all'interno di una pagina Web specifica. Poiché le SPA forniscono ai loro utenti solo una risposta basata su URL dal server (in genere serve index.html o index.vue), aggiungere segnalibri a determinate schermate o condividere collegamenti a sezioni specifiche è normalmente difficile se non impossibile. Per risolvere questo problema, molti router lato client delimitano i loro URL dinamici con un "hashbang" (#!), Ad esempio pagina.com/#!/. Tuttavia, con HTML5 la maggior parte dei browser moderni supporta il routing senza hashbang.
Vue fornisce un'interfaccia per modificare ciò che viene visualizzato sulla pagina in base al percorso URL corrente, indipendentemente da come è stato modificato (tramite collegamento via e-mail, aggiornamento o collegamenti in-page). Inoltre, l'utilizzo di un router front-end consente la transizione intenzionale del percorso del browser quando si verificano determinati eventi del browser (ad esempio clic) su pulsanti o collegamenti. Vue stesso non viene fornito con il routing hash front-end, ma il pacchetto open source "vue-router" fornisce un'API per aggiornare l'URL dell'applicazione, supporta il pulsante Indietro (cronologia di navigazione) e reimpostazioni della password e-mail o collegamenti di verifica e-mail con parametri URL di autenticazione. Supporta il mapping di percorsi su componenti nidificati e offre un controllo di transizione a granularità fine. Con Vue, gli sviluppatori compongono applicazioni con piccoli blocchi costruendo componenti più grandi. Con vue-router aggiunto alla combinazione, i componenti devono essere semplicemente mappati alle route a cui appartengono e le route parent/root devono indicare dove devono essere eseguito il rendering degli elementi figlio.[11]
<div id="app"> <router-view></router-view> </div> ... <script> ... const User = { template: '<div>Utente <nowiki>{{ $route.params.id }}</nowiki></div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }) ... </script>
Il codice sopra:
- Imposta un percorso front-end su nomesito
.com/user/<id>
, che verrà visualizzato nel componente User definito in (const User...) - Consente al componente User di passare un ID particolare dell'utente che è stato digitato nell'URL usando la chiave params dell'oggetto $route:
$route.params.id
- Questo modello (che varia in base ai parametri passati nel router) verrà renderizzato in
<router-view></router-view>
all'interno del div#app del DOM - L'HTML generato alla fine per qualcuno che digita:
nomesito.com/user/1
sarà:
<div id="app"> <div> <div>Utente 1</div> </div> </div>
[12]
Ecosistema
La libreria principale include strumenti e librerie sviluppati sia dal team principale che dai collaboratori.
Tooling ufficiale
- Devtools - estensione devtools del browser per il debug delle applicazioni Vue.js
- Vue CLI - tool standard per un rapido sviluppo di Vue.js
- Vue Loader - caricatore di webpack che consente la scrittura dei componenti Vue in un formato chiamato Single-File Components (SFCs)
Librerie ufficiali
- Vue Router - il router ufficiale di Vue.js
- Vuex - gestore di stato centralizzato ispirato a Flux per Vue.js
- Vue Server Renderer - rendering lato server per Vue.js
Note
- ^ (EN) Meet the Team, su vuejs.org. URL consultato il 17 novembre 2019.
- ^ (EN) Evan is creating Vue.js, su Patreon. URL consultato il 17 novembre 2019.
- ^ (EN) Between the Wires: An interview with Vue.js creator Evan You, in freeCodeCamp, 30 maggio 2017. URL consultato il 17 novembre 2019.
- ^ Announcing Vue 3.4 | The Vue Point, su blog.vuejs.org. URL consultato il 4 giugno 2024.
- ^ (EN) Components Basics, su vuejs.org. URL consultato il 17 novembre 2019.
- ^ (EN) Template Syntax, su vuejs.org. URL consultato il 17 novembre 2019.
- ^ (EN) Evan You, Vue 2.0 is Here!, in The Vue Point, Medium, 30 settembre 2016. URL consultato il 17 novembre 2019.
- ^ (EN) Reactivity in Depth, su vuejs.org. URL consultato il 17 novembre 2019.
- ^ (EN) Enter/Leave & List Transitions, su vuejs.org. URL consultato il 17 novembre 2019.
- ^ (EN) State Transitions, su vuejs.org. URL consultato il 17 novembre 2019.
- ^ (EN) Routing, su vuejs.org. URL consultato il 17 novembre 2019.
- ^ (EN) Nested Routes, su Vue Router. URL consultato il 17 novembre 2019.
Voci correlate
Altri progetti
Altri progetti
- Wikimedia Commons
Wikimedia Commons contiene immagini o altri file su Vue.js
Collegamenti esterni
- (EN) Sito ufficiale, su vuejs.org.
- Vue.js / Vue.js (altra versione), su packages.debian.org.
- (EN) Vue.js, su GitHub.
- Repository sorgenti di Vue.js, su github.com.
- (EN) Vue.js, su Free Software Directory.
V · D · M | |
---|---|
C++ | CppCMS · Wt |
CLI | ASP.NET (Core · AJAX · Dynamic Data · MVC · Razor · Web Forms) · Blazor · DNN · BFC · MonoRail · OpenRasta · Umbraco · WebSharper |
ColdFusion | CFWheels · ColdBox Platform · ColdSpring · Fusebox · Model-Glue |
Common LISP | Caveman2 · CL-HTTP · Weblocks |
Haskell | Yesod · Snap |
Java | AppFuse · Flexive · Grails · GWT · ICEfaces · ItsNat · JavaServer Faces · JHipster · Jspx · JWt · OpenXava · Play · Remote Application Platform · RIFE · Seam · Sling · Spring · Stripes · Struts · Tapestry · Vaadin · Vert.x · WebWork · Wicket · WaveMaker · ZK |
JavaScript | Angular/AngularJS · Backbone.js · Chaplin.js · Closure · Dojo Toolkit · Ember.js · Express.js · Ext JS · jQuery · Knockout · Meteor · MooTools · Next.js · Node.js · OpenUI5 · Prototype · React · Rico · script.aculo.us · Sencha Touch · SproutCore · Svelte · Vue.js · Wakanda |
Perl | Catalyst · Dancer · Mason · Maypole · Mojolicious · WebGUI |
PHP | CakePHP · CodeIgniter · Drupal · Fat-Free · FuelPHP · Flow · Grav · Gyroscope · Horde · Joomla! · Kohana · Laravel · Li3 · Midgard · MODX · Nette · Phalcon · PHP-Fusion · Pop PHP · PRADO · ProcessWire · Qcodo · Silex · SilverStripe · Symfony · TYPO3 · WordPress · XOOPS · Yii · Zend Framework |
Python | BlueBream · CherryPy · Django · Flask · Grok · Nevow · Pyjs · Pylons · Pyramid · Quixote · TACTIC · Tornado · TurboGears · web2py · Webware · Zope 2 |
Ruby | Camping · Merb · Padrino · Ruby on Rails · Sinatra |
Scala | Lift · Play · Scalatra |
Smalltalk | AIDA/Web · Seaside |
Altri | Vibe.d (D) · Application Express (PL/SQL) · Grails (Groovy) · Kepler (Lua) · OpenACS (Tcl) · Phoenix (Elixir) · Ash (Elixir) · SproutCore (JavaScript-Ruby) · Yaws (Erlang) |
![](http://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Nuvola_apps_emacs.svg/25px-Nuvola_apps_emacs.svg.png)