You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/overview.md
+9-9
Original file line number
Diff line number
Diff line change
@@ -4,15 +4,15 @@ type: guida
4
4
order: 2
5
5
---
6
6
7
-
Vue.js (pronunciato /vjuː/, come **view** in inglese) è una libreria che si pone lo scopo di costruire interfacce web interattive. L'obbiettivo di Vue.js è quello di offire i benefici che derivano dal **vincolo di dati reattivo** e dai **componenti riutilizzabili per le viste** con delle API più semplici possibili.
7
+
Vue.js (pronunciato /vjuː/, come **view** in inglese) è una libreria che si pone lo scopo di costruire interfacce web interattive. L'obbiettivo di Vue.js è quello di offire i benefici che derivano dal **binding reattivo dei dati** e dai **componenti riutilizzabili per le viste** con delle API più semplici possibili.
8
8
9
9
Vue.js non è un framework completo - è solo improntato alla gestione dello strato delle viste. Questo d'altronde lo rende facilmente integrabile con altri framework o librerie già esistenti. In altre parole Vue.js, quando utilizzato con altri strumenti adeguati, vi aiuta a creare Applicazioni Web a Pagina Singola sofisticate e complesse.
10
10
11
11
Se hai esperienza nello sviluppo di interfacce web e vuoi capire meglio come Vue.js si differenzi da altre librerie/framework puoi controllare la [Comparazione con gli Altri Framework](comparison.html); Se sei più interessato a capire come Vue.js si approcci allo sviluppo di Applicazioni Scalabili allora controlla la sezione [Costruire Applicazioni Scalabili](application.html).
12
12
13
-
## Vincolo di Dati Reattivo
13
+
## Binding reattivo dei dati
14
14
15
-
Il fulcro di Vue.js si basa sul Vincolo di Dati Reattivo, tale vincolo rende estremamente semplice mantenere sincronizzati a dovere i dati all'interno del DOM. Quanto si usa jQuery per manipolare il DOM, tramite QueryDOM, il codice che si scrive il più delle volte diventa imperativo, ripetitivo e soggetto ad errori. Vue.js sfrutta il concetto delle **viste manipolate dai dati**. In parole semplici significa che sfruttiamo delle parole chiavi all'interno del codice HTML per "vincolare"il DOM ai dati sottostanti. Una volta che il vincolo è creato, il DOM verrà mantenuto in sincronizzazione con i dati. Ogni volta che modificherai i dati il DOM si aggiornerà di conseguenza, in automatico. Questo rendere il codice molto più semplice da scrivere, leggere e mantenere.
15
+
Il fulcro di Vue.js si basa sul binding reattivo dei dati, tale vincolo rende estremamente semplice mantenere sincronizzati a dovere i dati all'interno del DOM. Quanto si usa jQuery, per esempio, per manipolare il DOM, tramite QueryDOM, il codice che si scrive il più delle volte diventa imperativo, ripetitivo e soggetto ad errori. Vue.js sfrutta il concetto delle **viste manipolate dai dati**. In parole semplici significa che sfruttiamo delle parole chiavi all'interno del codice HTML per "vincolare", o meglio legare, il DOM ai dati sottostanti forniti da Vue.js. Una volta che il binding è creato, il DOM verrà mantenuto in sincronizzazione con i dati. Ogni volta che modificherai i dati il DOM si aggiornerà di conseguenza, in automatico. Questo rendere il codice molto più semplice da scrivere, leggere e mantenere.
16
16
17
17

18
18
@@ -55,7 +55,7 @@ var exampleVM = new Vue({
55
55
56
56
Questo modo di operare sembra molto simile al rendering di template, ma Vue.js ha fatto tanto lavoro dietro le quinte. I dati e le viste (il DOM) sono ora collegati, ed il tutto è **reattivo**. Come lo sappiamo? Potete provare ad aprire la Console degli Sviluppatori del vostro browser, detta anche ispeziona elemento, e modificare la variabile `exampleData.name`. Se tutto è fatto a dovere dovreste vedere l'esempio sopra aggiornarsi di conseguenza alle vostre modifiche.
57
57
58
-
Da notare come non abbiamo dovuto scrivere nessun tipo di logica per manipolare il DOM: il template HTML, arricchito con i vincoli, è una mappa dichiarativa dello stato dei dati sottostanti, i quali sono solo degli oggetti in JavaScript. Le nostre viste sono interamente guidate dai dati.
58
+
Da notare come non abbiamo dovuto scrivere nessun tipo di logica per manipolare il DOM: il template HTML, arricchito con i binding, è una mappa dichiarativa dello stato dei dati sottostanti, i quali sono solo degli oggetti in JavaScript. Le nostre viste sono interamente guidate dai dati.
59
59
60
60
Vediamo un secondo esemppio:
61
61
@@ -88,15 +88,15 @@ var exampleVM2 = new Vue({
88
88
</script>
89
89
{% endraw %}
90
90
91
-
In questo esempio abbiamo visto qualcosa di relativamente nuovo. L'attributo `v-if` che vedete è chiamato **Direttiva**. Le Direttive hanno il prefisso `v-` per indicare che sono attributi speciali che Vue.js fornisce, avrete già capito perché, per applicare condizioni particolari al DOM. Provate voi stessi, come prima, cambiare il valore di `exampleVM2.greeting` a `false` tramite la console. Se tutto è fatto in maniera corretta dovreste vedere il messaggio "Ciao!" scomparire.
91
+
In questo esempio abbiamo visto qualcosa di relativamente nuovo. L'attributo `v-if`, che vedremo più avanti, è chiamato **Direttiva**. Le Direttive hanno il prefisso `v-` per indicare che sono attributi speciali che Vue.js fornisce al DOM per applicare condizioni particolari. Provate voi stessi, come prima, a cambiare il valore di `exampleVM2.greeting` a `false` tramite la console. Se tutto è fatto in maniera corretta dovreste vedere il messaggio "Ciao!" scomparire.
92
92
93
-
Il secondo esempio è una dimostrazione di come non solo possiamo vincolare il DOM con i dati, ma possiamo anche vincolare la **struttura** del DOM in base ai dati. Vue.js fornisce anche un potente sistema di effetti transizioni applicabili quando si aggiungono/rimuovono elementi dal DOM.
93
+
Il secondo esempio è una dimostrazione di come non solo possiamo vincolare il DOM con i dati, ma possiamo anche vincolare la **struttura** del DOM in base ai dati. Vue.js fornisce un potente sistema di effetti transizioni applicabili quando si aggiungono/rimuovono elementi dal DOM.
94
94
95
-
Ci sono molte altre direttive, ognuna ha delle caratteristiche speciali. Per esempio la direttiva `v-for` serve a visualizzare i dati di un Array, oppure la direttiva `v-bind` per vincolare attributi di un elemtno HTML. Discuteremo delle direttive in modo approfondito in un secondo momento più avanti.
95
+
Ci sono molte altre direttive, ognuna delle quali ha delle caratteristiche speciali. Per esempio la direttiva `v-for` serve a visualizzare i dati di un Array, oppure la direttiva `v-bind` per vincolare attributi di un elemento HTML. Discuteremo delle direttive in modo approfondito più avanti.
96
96
97
97
## Sistema a Componenti
98
98
99
-
Il Sistema a Componenti è un altro concetto fondamentale in Vue.js, perché è una astrazione che ci aiuta a construire applicazioni su larga scala composte da piccoli componenti, isolati e riutilizzabili. Se ci pensiamo, quasi qualsiai interfaccia si può pensare come un albero di componenti:
99
+
Il Sistema a Componenti è un altro concetto fondamentale in Vue.js, perché è una astrazione che ci aiuta a costruire applicazioni su larga scala composte da piccoli componenti, isolati e riutilizzabili. Se ci pensiamo, quasi qualsiasi interfaccia si può pensare come un albero a componenti:
100
100
101
101

102
102
@@ -112,7 +112,7 @@ Difatti qualsiasi tipo di applicazione costruita con Vue.js verrà formata esatt
112
112
</div>
113
113
```
114
114
115
-
Come avrete notato i componenti di Vue.js sono molto simili ai **Componenti Personalizzati** che fanno parte della [Specifica sui Componenti Web](http://www.w3.org/wiki/WebComponents/). Difatti, la sintassi dei componenti Vue.js è fatta ad immagine e somiglianza di quelle specifiche. Per esempio implementano le così detta [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) e c'è l'attributo speciale `is` però ci sono alcune differenze sostanziali:
115
+
Come avrete notato i componenti di Vue.js sono molto simili ai **Componenti Personalizzati** che fanno parte della [Specifica sui Componenti Web](http://www.w3.org/wiki/WebComponents/). Difatti, la sintassi dei componenti Vue.js è fatta ad immagine e somiglianza di quelle specifiche. Per esempio implementano la così detta [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) e c'è l'attributo speciale `is` però ci sono alcune differenze sostanziali:
116
116
117
117
1. La specifica dei Componenti web è ancora un lavoro non finito, e non tutti i browser implementano tale specifica. Vue.js invece non ha bisogno di nessun supporto per far funzionare i Componenti, e vengono ben interpretati da tutti i browser (IE9 e maggiori versioni). Quando serve, i Componenti Vue.js possono essere anche incapsulati dentro ad elementi nativi.
0 commit comments