Vue.js
Vue.js (comunemente noto come Vue, pronunciato /vjuː/, come view[1]) è un framework per applicazioni web JavaScript open source in configurazione model-view-viewmodel per la creazione di interfacce utente e single-page application. È stato creato da Evan You ed è gestito da lui e dai membri attivi del team principale, provenienti da varie società come Netlify e Netguru[2]. PanoramicaVue.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 il routing, lo state management e gli strumenti di compilazione sono offerte tramite librerie e pacchetti di supporto ufficialmente mantenuti[3], che comprendono, tra le soluzioni più popolari, Nuxt.js. StoriaVue è 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?».[4] Il primo commit del codice sorgente del progetto è datato luglio 2013, mentre è stato pubblicato ufficialmente il febbraio successivo, nel 2014. Versioni
CaratteristicheComponentiI 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.[27] 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>
ModelliVue 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.[28] Le funzioni di rendering consentono di compilare l'applicazione da componenti software.[29] 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.[30] TransizioniVue offre una varietà di modi per applicare effetti di transizione quando gli elementi vengono inseriti, aggiornati o rimossi dal DOM. Ciò include strumenti per:
Quando un elemento di cui è stato eseguito il wrapping in un componente di transizione viene inserito o rimosso, questo è ciò che accade:
RoutingUno 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 routingsenza 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.[33] <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:
<div id="app">
<div>
<div>Utente 1</div>
</div>
</div>
EcosistemaLa libreria principale include strumenti e librerie sviluppati sia dal team principale che dai collaboratori. Tooling ufficiale
Librerie ufficiali
Note
Voci correlateAltri progetti
Collegamenti esterni
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Portal di Ensiklopedia Dunia
