Iniziamo uno dei capitoli più importanti del nostro blog: le super guide di Vue.js! Così come abbiamo fatto con Laravel contribuendo in maniera netta e decisiva ormai alla divulgazione del framework PHP che sta rivoluzionando il mondo dello sviluppo web… adesso siamo pronti a fare lo stesso con Vue.js.
Data Binding
Declarative Render of the Data to the Dom
& Binding of the render DOM to the Instance data
Vue utilizza una sintassi basata su templates HTML e su particolari attributi (direttive) che permettono di definire la View.
(Re-render del minor numero di componenti e minimo anmount di manipulazione della DOM quando lo stato dell’app cambiano)
- Tutti i templates Vue.js templates sono valido HTML che puo’ essere “parsed” dai browsers ed HTML parsers.
- I templates sono compilati nella Virtual DOM che consente reattività dei contenuti effettuando cambiamenti solo dove necessari,
- Associazione l’elemento “presentazionale” (view) con una particolare variabile o oggetto Javascript e propagazione di eventuali cambiamenti alla view agendo sulla variabile .
Dom Options
new Vue({
el: '#app',
template: '<main id="app"></main>',
render: h => h(App)
})
new Vue({
render: function (createElement) {
return createElement(App);
}
})
el:
– Elemento esistente nella DOM assegnato all’instanza to mount on.
– Puo’ essere un CSS selector o HTMLElement.On mounted, sara’ accessibile con vm.$el
template:
– String template usato come markup dell’istanza.
– Ha priorita’ sull’ elemento mounted, el.
– Markup all’interno presente sara’ ignorato (con eccezione di slot)
render:
– Riceve createElement method e ha priorita’ su el e template
h e’ un alias di createElement
L’uso di newha side-effects se presente el: dom manipulation. (.$mount(...))
Evitare uso string templates ecco come
Servono a ridurre app performance, in quanto la compilation avviene a runtime.
DOM parser puo’ fare confusione con il markup
Minimizzare DOM template e astrarre il markup nei componenti, come da immagine
<div id="app"> <!-- DOM template :( --> <app></app> </div>
Eliminare DOM template e usare render function per fare il mouting del root component
<div id="app"></div>
v-cloak
Attributo (direttiva) che si puo aggiungere ad un elemento per nasconderlo mentre Vue sta “mounting”, appena Vue è pronto, l’attributo viene pertanto rimosso. Prima del mounting nella pagina, si puo’ vedere il {{tag}} non analizzato per una frazione di secondo.
[v-cloak] > * { display:none }
[v-cloak]::before { content: "loading…" }
<div id="app" v-cloak>
How are you, {{name}}?
</div>
- L’attributo da solo non può fare nulla, bisogna creare un css per formattarlo
- Non funziona durante il caricamento dei dati remoti (axios)
- Caricare contenuti esterni come immagini all’interno non funziona, perche’ probabilmente si avvierà prima del caricamento del contenuto.
- Si può usare molteplici volte
Scopri di più su Vue.js e perché ti può servire oggi per diventare uno sviluppatore di livello avanzato, non solo dai un’occhiata a come integrare Vue.js con Laravel!