VUE JS: template, interpolazione, direttive, stili, data binding, istruzioni condizionali, booleani

Vue JS sulla presentazione della pagina offre un modo semplice per separare contenuto dal contenitore offrendo una semplificazione nella gestione del codice. All’ interno del body della pagina HTML statica ci basta identificare un DIV con un ID in questo modo:

<body>
<div id=”myapp”>
<!– Vue –>
</div>
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
http://index.js
</body>

ora per creare il template mi basta evocare il metodo template dal costruttore richiamando la zona di interesse per l’aggancio sotto i DATA e i METHODS quindi per la nostra applicazione di apprendimento didattico https://www.farwebdesign.com/vue/app/ avremo nel nostro file JS esterno una situazione del tipo:

……………………………………..
template: `
<section class=”todoapp”>
<header class=”header”>
<h1>todos</h1>
<input @input=”handleEvent” class=”new-todo” autofocus autocomplete=”off” placeholder=”What needs to be done?”>
</header>
<section class=”main”>
<ul class=”todo-list”>
<li class=”todo”>
<div class=”view”>
<input class=”toggle” type=”checkbox”>
<label>{{todos[0].title}}</label>
<button class=”destroy”></button>
</div>
</li>
<li class=”todo”>
<div class=”view”>
<input class=”toggle” type=”checkbox”>
<label>{{todos[1].title}}</label>
<button class=”destroy”></button>
</div>
</li>
<li class=”todo”>
<div class=”view”>
<input class=”toggle” type=”checkbox”>
<label>{{todos[2].title}}</label>
<button class=”destroy”></button>
</div>
</li>
</ul>
</section>
</section>
`
});

Sostanzialmente TEMPLATE insieme a DATA e METHODS è un attributo dell’ oggetto istanziato dal costruttore che ci consente di creare applicazioni pulite senza alterare anche la parte graqfica con i CSS. A questo punto diamo un occhiata elle interpolazioni, ossia al modo in cui VUE scrive le nostre cose sulla pagina. In un primo esempio abbiamo capito che all’ interno delle due graffe possiamo scrivere qualsiasi cosa, dei dati, un messaggio, una istruzione di controllo con un operatore ternario e molto altro tipo evocare delle funzioni dichiarate all’ esterno. Vediamo esempi di interpolazione dati:

{{messaggio}}
la forma più elementare di messaggio

{{todos[0].title}]
una semplice espressione javascript richiama l’attributo titolo presente nel primo elemento contrassegnato da posizione o indice zero dell’ array. Da notare che potrei banalmente scrivere anche {{2+2}} per ottenere un valore 4.

{{stampaCinque()}}
qui richiamo un metodo inscritto proprio nella sezione METHODS dell’ oggetto istanziato in VUE che mi ritorna un valore 5, ne consegue che la nostra funzione richiamata fuori dall’ HTML sarà del tipo:

stampaCinque() {
return5
}

<label>{{false ? “ok” : “ko”}}</label>
esempio di operatore ternario dove si può scegliere una delle due opzioni in base alla verità o alla falsità dell’ espressione indicata

<label>{{ ‘message’.split(”).reverse().join(”) }}</label>
dove una semplice stringa come per esempio MESSAGGIO viene stampata al contrario come OIGGASSEM

naturalmente ci sono delle eccezioni come per esempio var a = 1 all’ interno delle doppie graffe manderebbe in tilt il framework.

Se volessi modificare dinamicamente un valore di un attributo tipo la proprietà AUTOFOCUS da off a on del campo INPUT come dovrei fare? Bisogna introdurre l’uso delle DIRETTIVE, nel senso che nel campo DATA definisco una variabile autofocus inizializzata a un valore che poi verrà richiamata automaticamente nella parte dei tag INPUT tramite la nostra direttiva V-BIND (bind sta per collegamento dati). VUE JS contempla anche una scorciatoia per la sintassi V-BIND si può più semplicemente sostituire con i due punti che sono equivalenti. Grazie alla direttiva V-BIND posso anche crearmi nel campo DATA una classe dinamica con più valori tramite un array per esempio. Nel nostro programma il disabled è legato al cambiamento di una classe o allo stato enable/attivazione. Posso anche lasciare abilitata una variabile a TRUE nel campo data e poi cambiare lo stato con delle espressioni ternarie per esempio. Anche l’attributo :style ha la sua importanza in VUE, basterà impostare questo oggetto all’ interno del campo DATA con l’accoppiata chiave valore del tipo colore, valore. Questo serve nel caso in cui dichiarando oggetti con nomi diversi volessimo ad esempio impostare proprietà diverse dal background-color, piuttosto che al font-size etc. Poi queste dichiarazioni del campo data verranno richiamate nel punto esatto in cui si vuole ottenere l’effetto pensato.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: