VUE JS FRAMEWORK e la GESTIONE DEGLI STATI

Dopo aver sperimentato una lezione introduttiva su VUE all’ indirizzo https://umbriawayfocus.wordpress.com/2020/03/24/vue-js-un-framework-potente-per-le-tue-user-interface/ gettiamoci a capofitto nella GESTIONE DEGLI STATI. Analizziamo il seguente codice da includere come file con estensione.js esterno:

new Vue ({
el: ‘.todoapp’,
data: {
todos: [{
title: “shopping”
}, {
title: “video corso”
},{
title: “lavare i piatti”
}],
}
});

intanto abbiamo istanziato un oggetto di nome todos che fa riferimento all’ elemento della pagina html todoapp. All’ interno dell’ array ritroviamo tre notes o cose da fare che sono nello specifico i tre elementi presenti che occupano l’array rispettivamente nella posizione 0,1,2 visto che il rimpimento di ciascun cassetto nell’ array armadio parte per convenzione da zero. A questo punto sorge spontanea una domanda. Qui ho occupato l’array con dei dati ma se io avessi avuto l’esigenza di riempire questo armadio ad esempio con un API esterna? Solo con la versione tre di VUE è stato risolto il problema dei contenuti, in quanto nelle versioni precedenti l’oggetto voleva i dati di riempimento, mentre dalla tre possiamo anche valutare di inizializzare un array lasciandolo vuoto, oppure di usare la parola chiave NULL sulla proprietà NODATA o anche come detto di riempire l’oggetto array con dati che arrivano dall’ esterno. Si può fare tutto tranne che utilizzare la parola deleteria UNDEFINED sull’ attributo nodata. A questo punto visto che nella lezione precedente abbiamo visto come stampare i dati potremmo inglobare questo array nella nostra pagina HTML e renderlo funzionale con la sintassi che già conosciamo ossia, cone le famose doppie graffe. E’ buona regola di programmazione inserire i link di collegamento al framework tramite CDN prima della chiusura del BODY in quanto prima si preferisce offrire all’ esperienza utente il completo caricamento della pagina e solo dopo caricare le risorse utili. Quindi avremo prima della chiusura del body il CDN e lo script esterno visto prima:

<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script src=”index.js”></script>

ovviamente in alto nell’ HEAD ci sarà il nostro CSS VUE che ingloba le classi di formattazione e nel corpo del documento potremmo ad esempio scrivere il codice per leggere a video il nostro primo appuntamento della giornata ossia quello dello shopping dopo una sezione introduttiva, quindi sotto il body ci sarà:

<section class=”todoapp”>
<header class=”header”>
<h1>todos</h1>
<input class=”new-todo” autofocus autocomplete=”off” placeholder=”che cosa devi fare?”>
</header>
<section class=”main”>
<ul class=”todo-list”>
<li class=”todo”>
<div class=”view”>
<input class=”toglle” type=”checkbox”>
<label>{{todos[0].title}}</label>
<button class=”destroy”></button>
</div>
</li>

se volessimo ripetere le attività memo basterà copiare la porzione di codice:

<li class=”todo”>
<div class=”view”>
<input class=”toglle” type=”checkbox”>
<label>{{todos[1].title}}</label>
<button class=”destroy”></button>
</div>
</li>

cambiando l’indice dell’ array. Per vedere l’effetto che fa la nostra prima applicazione andiamo su https://www.farwebdesign.com/vue/todos/ e volendo possiamo anche dare un occhiata al main.css per il nostro abbellimento a video:

html,
body {
margin: 0;
padding: 0;
}

button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
color: inherit;
-webkit-appearance: none;
appearance: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

body {
font: 14px ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
line-height: 1.4em;
background: #f5f5f5;
color: #4d4d4d;
min-width: 230px;
max-width: 550px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 300;
}

:focus {
outline: 0;
}

.hidden {
display: none;
}

.todoapp {
background: #fff;
margin: 130px 0 40px 0;
position: relative;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

.todoapp input::-webkit-input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}

.todoapp input::-moz-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}

.todoapp input::input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}

.todoapp h1 {
position: absolute;
top: -155px;
width: 100%;
font-size: 100px;
font-weight: 100;
text-align: center;
color: rgba(175, 47, 47, 0.15);
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}

.new-todo,
.edit {
position: relative;
margin: 0;
width: 100%;
font-size: 24px;
font-family: inherit;
font-weight: inherit;
line-height: 1.4em;
border: 0;
color: inherit;
padding: 6px;

In uno dei prossimi articoli andremo a visionare i METODI sempre contestualmente alla GESTIONE DEGLI STATI in VUE JS Framework!