vue.js

Vue.js: tutto sui template

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 .

Text Interpolation

Binding effettuato tramite la Mustache Syntax
Il tag mustache verra’ rimpiazzato dal valore della relative proprieta’ nel data object. Data una variabile contenente un testo è dunque possibile visualizzare il testo all’interno di un particolare nodo HTML.


  • Valori Elementi
    • v-bind:
      – Per effettuare il dual-binding anche per attributi HTML, dove il nome dell’attributo come argomento della direttiva
    • v-html:
      – Per mostrare tag HTML in modo dinamico
    • v-text:
      – In un nodo HTML
    • v-once:
      – Trattato come statico, e non cambia nei re-render

Dom Options


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

Eliminare DOM template e usare render function per fare il mouting del root component

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.


  • 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

Corso Vue.js: chiedi maggiori informazioni!

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!

 

Leave a reply