02 maggio - 08 maggio

#BooleanCodingWeek
 Dom 02 Lun 03 Mar 04 Mer 05 Gio 06 Ven 07 Sab 08
Introduzione Layout con Live Coding Programmare VueJS Chiamate Progetto e
a HTML e CSS CSS Flexbox Layout in JavaScript API con Axios final show

Cosa facciamo oggi?

VueJS
Muoveremo i primi passi con un framework
javascript e vedremo come rendere dinamica e
interattiva una pagina web.

#BooleanCodingWeek
 PRONTI?

#BooleanCodingWeek
 SI PARTE!

#BooleanCodingWeek
 Framework
Il termine inglese framework può essere tradotto come
intelaiatura o struttura.

In informatica, con questa parola si fa riferimento a

un'architettura logica di supporto su cui un software
può essere progettato e realizzato, spesso facilitandone
lo sviluppo da parte del programmatore.

#BooleanCodingWeek
 Vue.js
Vue è un framework JavaScript open source utilizzato
principalmente per costruire interfacce utente e Single
Page App.

Con Single Page Application si intende un’applicazione

web che può essere usata su una singola pagina web.

In un'applicazione su singola pagina tutto il codice

necessario è recuperato in un singolo caricamento della
pagina.
La pagina non si ricarica in nessun punto del processo.

#BooleanCodingWeek
 Come funziona Vue?
La base di partenza sono i dati: è necessario creare una
struttura dati idonea a rappresentare le informazioni da
visualizzare nella pagina, utilizzando ad esempio gli
array o gli oggetti.

Tutta la logica e le funzionalità dell’applicazione web

saranno basate proprio su questi dati.

#BooleanCodingWeek
 Primi passi
La prima cosa da fare per poter utilizzare Vue.js è
importare la libreria nell’applicazione web.

Il modo più semplice è utilizzando il link al file js di Vue.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

#BooleanCodingWeek
 Primi passi
Per avviare Vue.js è necessario creare una nuova
istanza Vue e dichiarare dentro quale elemento della
pagina andrà ad agire.

var app = new Vue({ <div id="contenitore-vue">

el: '#contenitore-vue'
}) </div>

#BooleanCodingWeek
 Hello Vue!
Per aggiungere dei contenuti dinamici alla pagina è
necessario inserire tutte le variabili all’interno
dell’oggetto data.

var app = new Vue({ <div id="contenitore-vue">

el: '#contenitore-vue', <h1>{{ messaggio }}</h1>
data: { </div>
messaggio: 'Hello Vue!'
}
})

#BooleanCodingWeek
 LIVE CODING

#BooleanCodingWeek
 v-model
Per monitorare il valore di un input e recepire le
modifiche apportate dall’utente, si utilizza la direttiva
v-model associata ad una variabile in data.

var app = new Vue({ <div id="contenitore-vue">

el: '#contenitore-vue', <input type="text" v-model="nome">
data: { <h1>Ciao {{ nome }}!</h1>
nome: '' </div>
}
})

#BooleanCodingWeek
 LIVE CODING

#BooleanCodingWeek
 v-bind
Con la direttiva v-bind, è possibile rendere dinamico
il valore di qualsiasi attributo HTML, classi comprese!

var app = new Vue({ <div id="contenitore-vue">

el: '#contenitore-vue', <h1 v-bind:class="classe_titolo">
data: { Questo testo è scritto in rosso.
classe_titolo: 'testo-rosso' </h1>
} </div>
})

#BooleanCodingWeek
 v-bind
La direttiva v-bind si può usare anche in un formato più
compatto, scrivendo davanti all’attributo solamente il
simbolo :

var app = new Vue({ <div id="contenitore-vue">

el: '#contenitore-vue', <a :href="link">
data: { Vai a Google
link: 'https://www.google.it/' </a>
} </div>
})

#BooleanCodingWeek
 LIVE CODING

#BooleanCodingWeek
 methods
Tutte le funzioni necessarie al corretto funzionamento
della pagina, vanno inserite all’interno dell’oggetto
methods, senza la keyword function davanti.

var app = new Vue({

el: '#contenitore-vue',
methods: {
saluto() {
alert('Ciao dev!')
}
}
})

#BooleanCodingWeek
 @click
Per rendere la pagina interattiva, è necessario restare in
ascolto di determinati eventi, usando ad esempio @click
per reagire ad un click su un bottone.
Ad ogni evento, è possibile associare una funzione.

var app = new Vue({ <div id="contenitore-vue">

el: '#contenitore-vue', <button @click="saluto">
methods: { Cliccami!
saluto() { </button>
alert('Ciao dev!') </div>
}
}
})

#BooleanCodingWeek
 LIVE CODING

#BooleanCodingWeek
 this
Per accedere alle variabili d’istanza definite dentro
l’oggetto data all’interno di un metodo, bisogna usare la
keyword this.

var app = new Vue({ <div id="contenitore-vue">

el: '#contenitore-vue', <input type="text" v-model="nome">
data: { <button @click="saluto">
nome: '' Cliccami!
}, </button>
methods: { </div>
saluto() {
alert('Ciao ' + this.nome)
}
}
})

#BooleanCodingWeek
 LIVE CODING

#BooleanCodingWeek
 @keyup
Oltre al click, è possibile anche intercettare i tasti
digitati dall’utente tramite la direttiva @keyup.
Per reagire al tasto enter premuto all’interno di un
campo di input testuale, si usa @keyup.enter.

var app = new Vue({ <div id="contenitore-vue">

el: '#contenitore-vue', <input type="text" v-model="nome"
data: { @keyup.enter="saluto">
nome: '' </div>
},
methods: {
saluto() {
alert('Ciao ' + this.nome)
}
}
})

#BooleanCodingWeek
 LIVE CODING

#BooleanCodingWeek
 v-if
Con la direttiva v-if è possibile visualizzare alcuni
elementi della pagina in modo condizionale, solo se la
condizione logica è verificata.

var app = new Vue({ <div id="contenitore-vue">

el: '#contenitore-vue', <p v-if="visibile">
data: { Questo testo non è visibile.
visibile: false </p>
} </div>
})

#BooleanCodingWeek
 LIVE CODING

#BooleanCodingWeek
 v-for
Per visualizzare un elemento molteplici volte, sulla base
ad esempio degli elementi di un array, si usa la direttiva
v-for.

var app = new Vue({ <div id="contenitore-vue">

el: '#contenitore-vue', <ul>
data: { <li v-for="prodotto in prodotti">
prodotti: [ {{ prodotto }}
'biscotti', </li>
'caffè', </ul>
'zucchero' </div>
]
}
})

#BooleanCodingWeek
 LIVE CODING

#BooleanCodingWeek
 Dom 02 Lun 03 Mar 04 Mer 05 Gio 06 Ven 07 Sab 08
Introduzione Layout con Live Coding Programmare VueJS Chiamate Progetto e
a HTML e CSS CSS Flexbox Layout in JavaScript API con Axios final show

Cosa abbiamo fatto oggi?

VueJS
Abbiamo mosso i primi passi con un framework
javascript e abbiamo imparato a rendere dinamica
e interattiva una pagina web.

#BooleanCodingWeek
 Dom 02 Lun 03 Mar 04 Mer 05 Gio 06 Ven 07 Sab 08
Introduzione Layout con Live Coding Programmare VueJS Chiamate Progetto e
a HTML e CSS CSS Flexbox Layout in JavaScript API con Axios final show

Cosa faremo domani?

Chiamate API con Axios
Vedremo come si eseguono delle richieste ad un
server remoto e recupereremo dei contenuti da
visualizzare in pagina in modo dinamico.

#BooleanCodingWeek
 Registrazioni delle lezioni
Tutte le lezioni e le slide vengono registrate e
caricate su:

https://booleancodingweek.teachable.com

entro la mattina del giorno successivo

#BooleanCodingWeek