Tutto sui template Vue.js: apprfondimenti e tanto altro ancora

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.

Indice

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.

new Vue({
    el: '#app',
    data: {
        name: 'James',
        personId: 123,
        type: 'person'
        active: true
    }
})

new Vue({

el: '#app',

data: {

name: 'James',

personId: 123,

type: 'person'

active: true

}

})

&lt;div&gt;&lt;span v-html="type"&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;{{ name }}&lt;/div&gt;
&lt;div v-bind:id="personId"&gt;&lt;/div&gt;
&lt;button v-bind:disabled="active"&gt;Button&lt;/button&gt;

<button v-bind:disabled="active">Button</button>

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

new Vue({
    el: '#app',
    template: '&lt;main id="app"&gt;&lt;/main&gt;',
    render: h =&gt; h(App)
})

new Vue({

el: '#app',

template: '<main id="app"></main>',

render: h => h(App)

})

new Vue({
    render: function (createElement) {
        return createElement(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

&lt;div id="app"&gt;
  &lt;!-- DOM template :( --&gt;
  &lt;app&gt;&lt;/app&gt;
&lt;/div&gt;

</div>

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

&lt;div id="app"&gt;&lt;/div&gt;

1	<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] &gt; * { display:none }
[v-cloak]::before { content: "loading…" }

1 2	[v-cloak] > * { display:none } [v-cloak]::before { content: "loading…" }

&lt;div id="app" v-cloak&gt;
    How are you, {{name}}?
&lt;/div&gt;

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

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!