Vue.js
IlariaFranchini2
225 views
30 slides
Apr 16, 2018
Slide 1 of 30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
About This Presentation
Introduzione alle principali funzionalità di Vue.js e creazione di una web app da zero
Slide Content
Vue.js
“The progressive javascript framework”
Presentazione a cura di: Ilaria Franchini
“The progressive javascript framework”
Presentazione a cura di: Ilaria Franchini
Un po’ di storia...
2012 - Evan You lavora per Google Creative Labs e realizza interfacce
web con Angular 1.
2013 - Inizia a pensare ad un framework con le stesse funzionalità di
Angular ma più semplice e più accessibile.
2014 - Viene rilasciata la prima versione di Vue.
2015 - Inizia a lavorare a tempo pieno su Vue.
2012 - Evan You lavora per Google Creative Labs e realizza interfacce
web con Angular 1.
2013 - Inizia a pensare ad un framework con le stesse funzionalità di
Angular ma più semplice e più accessibile.
2014 - Viene rilasciata la prima versione di Vue.
2015 - Inizia a lavorare a tempo pieno su Vue.
Vantaggi di Vue
❏Molto leggero e compatto
❏Performance real-time molto alta
❏Accessibile
❏Versatile
❏Integrazione semplice
❏Molto leggero e compatto
❏Performance real-time molto alta
❏Accessibile
❏Versatile
❏Integrazione semplice
Realizzazione di una shopping list con Vue.js
Installazione della Vue CLI
npm install -g vue-cli
vue init <template> <name>
cd <name>
npm install
npm run dev
Template:
●simple
●webpack
●webpack-simple
●browserify
●broserifery-simple
●pwa
npm install -g vue-cli
vue init <template> <name>
cd <name>
npm install
npm run dev
Template:
●simple
●webpack
●webpack-simple
●browserify
●broserifery-simple
●pwa
Installazione della Vue CLI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>shopping_list</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js">
</script>
</body>
</html>
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
<template>
</template>
<script>
export default {
data() {
return {
}
}
</script>
<style>
</style>
index.html
main.js
app.vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>shopping_list</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js">
</script>
</body>
</html>
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
<template>
</template>
<script>
export default {
data() {
return {
}
}
</script>
<style>
</style>
index.html
main.js
app.vue
Data-Binding
Associazione di un elemento con una variabile o oggetto javascript ed essere certi che
eventuali cambiamenti vengano propagati alla view agendo sulla variabile.
La modalità più semplice di data-binding è l’interpolazione.
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
data() {
return {
title: "Shopping
list"
}
}
}
</script>
<style>
h1 {
color: red;
}
</style>
Shopping list
Risultato:
JS
HTML
CSS
Associazione di un elemento con una variabile o oggetto javascript ed essere certi che
eventuali cambiamenti vengano propagati alla view agendo sulla variabile.
La modalità più semplice di data-binding è l’interpolazione.
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
data() {
return {
title: "Shopping
list"
}
}
}
</script>
<style>
h1 {
color: red;
}
</style>
Shopping list
Risultato:
JS
HTML
CSS
Le direttive principali
Sono delle istruzioni che permettono a Vue.js modificare il comportamento degli
elementi HTML di base nel DOM.
Sono sempre precedute dal prefisso v-.
Le principali direttive sono:
●v-for
●v-if , v-else e v-show
●v-model
●v-bind
●v-on
Sono delle istruzioni che permettono a Vue.js modificare il comportamento degli
elementi HTML di base nel DOM.
Sono sempre precedute dal prefisso v-.
Le principali direttive sono:
●v-for
●v-if , v-else e v-show
●v-model
●v-bind
●v-on
La direttiva v-for
<template>
<div>
<h1>{{ title }}</h1>
<ul>
<li v-for="element in elements">
{{ element.food }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
...
elements: [
{ food: "pane", completed: false },
{ food: "farina", completed: false },
{ food: "latte", completed: false }
]
}
}
</script>
Shopping-list
●pane
●farina
●latte
Risultato:
JS
HTML
<template>
<div>
<h1>{{ title }}</h1>
<ul>
<li v-for="element in elements">
{{ element.food }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
...
elements: [
{ food: "pane", completed: false },
{ food: "farina", completed: false },
{ food: "latte", completed: false }
]
}
}
</script>
Shopping-list
●pane
●farina
●latte
Risultato:
JS
HTML
La direttiva v-model
<template>
...
<input type="text" class="title" v-model="title">
</template>
HTML<script>
export default {
data() {
return {
title: "Shopping list"
}
}
}
</script>
JS
Risultato:
Crea un binding bidirezionale su un elemento di input.
<template>
...
<input type="text" class="title" v-model="title">
</template>
HTML<script>
export default {
data() {
return {
title: "Shopping list"
}
}
}
</script>
JS
Risultato:
Crea un binding bidirezionale su un elemento di input.
I methods
<template>
<span>{{ elementsLength() }}
elementi nella lista</span>
</template>
<script>
methods:{
elementsLength() {
const length = this.elements.length;
console.log('Elementi nella lista: ' ,
length);
return length;
}
}
</script>
HTML
JS
Risultato:
<template>
<span>{{ elementsLength() }}
elementi nella lista</span>
</template>
<script>
methods:{
elementsLength() {
const length = this.elements.length;
console.log('Elementi nella lista: ' ,
length);
return length;
}
}
</script>
HTML
JS
Risultato:
Methods vs Computed Properties
Risultato usando computed:
<script>
computed:{
elementsLength() {
const length = this.elements.length;
console.log('Elementi nella lista:' , length);
return length;
}
} ...
</script>
JS
<template>
<span>{{ elementsLength }} elementi nella lista
</span>
</template>
HTML
Risultato usando computed:
<script>
computed:{
elementsLength() {
const length = this.elements.length;
console.log('Elementi nella lista:' , length);
return length;
}
} ...
</script>
JS
<template>
<span>{{ elementsLength }} elementi nella lista
</span>
</template>
HTML
I components
Consentono di suddividere il codice in moduli riutilizzabili, ognuno con i propri
metodi, proprietà e stili css.
Registrazione globale
Vue.component('my-component', {
// ... options ...
})
main.js Registrazione locale
<script>
export default {
...
components: {
'my-component' : Component
}
}
</script>
app.vue
<template>
<my-component></my-component>
</template>
Visualizzazione app.vue
HTML
JSJS
Consentono di suddividere il codice in moduli riutilizzabili, ognuno con i propri
metodi, proprietà e stili css.
Registrazione globale
Vue.component('my-component', {
// ... options ...
})
main.js Registrazione locale
<script>
export default {
...
components: {
'my-component' : Component
}
}
</script>
app.vue
<template>
<my-component></my-component>
</template>
Visualizzazione app.vue
HTML
JSJS
I components
<script>
import ListItem from "./components/ListItem.vue" ;
import NewItem from "./components/NewItem.vue" ;
export default {
...
components: {
'list-item' : ListItem,
'new-item' : NewItem
}
</script>
JS
NewItem.vue ListItem.vue
App.vue
(Root component)
<script>
import ListItem from "./components/ListItem.vue" ;
import NewItem from "./components/NewItem.vue" ;
export default {
...
components: {
'list-item' : ListItem,
'new-item' : NewItem
}
</script>
JS
NewItem.vue ListItem.vue
App.vue
(Root component)
Le props e la direttiva v-bind
<script>
...
export default {
props: ['item']
};
</script>
Genitore
(App.vue)
Figlio
(ListItem.vue)
props
Nel component figlio:
JS
<template>
...
<list-item v-bind:item="element"></list-item>
<template>
Nel component padre (app.vue):
HTML
<script>
...
export default {
props: ['item']
};
</script>
Genitore
(App.vue)
Figlio
(ListItem.vue)
props
Nel component figlio:
JS
<template>
...
<list-item v-bind:item="element"></list-item>
<template>
Nel component padre (app.vue):
HTML
Binding a una classe
<template>
<input type="checkbox" v-model="item.completed">
<span v-bind:class="{ completed: item.completed }">{{ item.food }}</span>
...
</template>
<style>
.completed {
text-decoration: line-through;
}
</style>
CSS
HTML
Risultato:
ListItem.vue
ListItem.vue
<template>
<input type="checkbox" v-model="item.completed">
<span v-bind:class="{ completed: item.completed }">{{ item.food }}</span>
...
</template>
<style>
.completed {
text-decoration: line-through;
}
</style>
CSS
HTML
Risultato:
ListItem.vue
ListItem.vue
La direttiva v-on
<script>
...
data() {
return {
...
currentValue: "",
}
}
...
methods: {
addItemHandler(currentValue){
this.elements.push({
food: this.currentValue,
completed: false
});
this.currentValue = "";
}
...
</script>
<template>
...
<input id="text" v-model="currentValue" type="text">
<button v-on:click="addItemHandler">+</button>
...
</template>
Risultato:
App.vue
HTML
JS
<script>
...
data() {
return {
...
currentValue: "",
}
}
...
methods: {
addItemHandler(currentValue){
this.elements.push({
food: this.currentValue,
completed: false
});
this.currentValue = "";
}
...
</script>
<template>
...
<input id="text" v-model="currentValue" type="text">
<button v-on:click="addItemHandler">+</button>
...
</template>
Risultato:
App.vue
HTML
JS
Genitore
(App.vue)
Figlio
(NewItem.vue)
<script>
...
data() {
return {
currentValue: ""
}
...
methods: {
add() {
// do something
this.currentValue = "";
...
</script>
JS
NewItem.vue
<template>
...
<input id="text" v-model="currentValue"
type="text">
<button v-on:click="add">+</button>
...
<template>
HTML
(App.vue)
Figlio
(NewItem.vue)
<script>
...
data() {
return {
currentValue: ""
}
...
methods: {
add() {
// do something
this.currentValue = "";
...
</script>
JS
NewItem.vue
<template>
...
<input id="text" v-model="currentValue"
type="text">
<button v-on:click="add">+</button>
...
<template>
HTML
Gli eventi
Genitore
(App.vue)
Figlio
(NewItem.vue)
$emit
<script>
...
data() {
return {
currentValue: ""
}
...
methods: {
add() {
this.$emit("addItem",this.currentValue);
this.currentValue = "";
...
</script>
JS
NewItem.vue
<template>
...
<input id="text" v-model="currentValue"
type="text">
<button v-on:click="add">+</button>
...
<template>
HTML
Genitore
(App.vue)
Figlio
(NewItem.vue)
$emit
<script>
...
data() {
return {
currentValue: ""
}
...
methods: {
add() {
this.$emit("addItem",this.currentValue);
this.currentValue = "";
...
</script>
JS
NewItem.vue
<template>
...
<input id="text" v-model="currentValue"
type="text">
<button v-on:click="add">+</button>
...
<template>
HTML
Gli eventi
<script>
...
methods: {
addItemHandler(newItem) {
this.elements.push({
food: newItem,
completed: false
});
...
</script>
JS
<template>
...
<new-item v-on:addItem="addItemHandler"></new-item>
...
</template>
HTML
App.vue
Risultato:
<script>
...
methods: {
addItemHandler(newItem) {
this.elements.push({
food: newItem,
completed: false
});
...
</script>
JS
<template>
...
<new-item v-on:addItem="addItemHandler"></new-item>
...
</template>
HTML
App.vue
Risultato:
I filtri
Funzionalità utilizzabili per cambiare la formattazione del testo e l'output dei dati.
Implementazione:
Registrazione globale:
<script>
export default {
...
filters: {
filterName(value){
return ...
}
}
</script>
Vue.filter('filterName', function(value){
return...
})
main.js Registrazione locale:
<template>
<div>{{ data | name }}</div>
</template>
Funzionalità utilizzabili per cambiare la formattazione del testo e l'output dei dati.
Implementazione:
Registrazione globale:
<script>
export default {
...
filters: {
filterName(value){
return ...
}
}
</script>
Vue.filter('filterName', function(value){
return...
})
main.js Registrazione locale:
<template>
<div>{{ data | name }}</div>
</template>
I filtri <template>
...
<span v-bind:class="{ completed: item.completed }">
{{ item.food | capitalize }}</span>
</template>
HTML
<script>
...
filters: {
capitalize(item) {
let res = '';
for (let i = 0; i < item.length; i++) {
if(i === 0)
res += item[i].toUpperCase();
else
res += item[i].toLowerCase();
}
return res;
}
</script>
JS
Risultato:
ListItem.vue
...
<span v-bind:class="{ completed: item.completed }">
{{ item.food | capitalize }}</span>
</template>
HTML
<script>
...
filters: {
capitalize(item) {
let res = '';
for (let i = 0; i < item.length; i++) {
if(i === 0)
res += item[i].toUpperCase();
else
res += item[i].toLowerCase();
}
return res;
}
</script>
JS
Risultato:
ListItem.vue
La direttiva V-if
<template>
...
<div v-if="showAll || element.completed">
<list-item v-bind:item="element"></list-item>
</div>
<div id="button">
<button v-on:click="showAll = true">
Tutti</button>
<button v-on:click="showAll=false">
Completati</button>
</div>
</template>
<script>
data() {
return {
showAll: true
}
...
<script>
JS HTML
App.vue
Risultato:
<template>
...
<div v-if="showAll || element.completed">
<list-item v-bind:item="element"></list-item>
</div>
<div id="button">
<button v-on:click="showAll = true">
Tutti</button>
<button v-on:click="showAll=false">
Completati</button>
</div>
</template>
<script>
data() {
return {
showAll: true
}
...
<script>
JS HTML
App.vue
Risultato:
V-if vs v-show
<div v-show="showAll || element.completed">
HTML
Risultato con v-showRisultato con v-if
<div v-show="showAll || element.completed">
HTML
Risultato con v-showRisultato con v-if
Style
CSS <style>
.completed {
text-decoration: line-through;
}
</style>
ListItem.vue
<template>
...
<button class="completed" v-on:click="showAll=false">
Completati</button>
<template>
HTML
Risultato:
App.vue
CSS <style>
.completed {
text-decoration: line-through;
}
</style>
ListItem.vue
<template>
...
<button class="completed" v-on:click="showAll=false">
Completati</button>
<template>
HTML
Risultato:
App.vue
Style scoped
CSS <style scoped>
.completed {
text-decoration: line-through;
}
</style>
ListItem.vue
Quando un tag <style> ha l'attributo scoped, il suo CSS si applica solo agli elementi
del componente corrente.
<template>
...
<button class="completed" v-on:click="showAll=false">
Completati</button>
<template>
HTML
Risultato:
Risultato finale:
App.vue
CSS <style scoped>
.completed {
text-decoration: line-through;
}
</style>
ListItem.vue
Quando un tag <style> ha l'attributo scoped, il suo CSS si applica solo agli elementi
del componente corrente.
<template>
...
<button class="completed" v-on:click="showAll=false">
Completati</button>
<template>
HTML
Risultato:
Risultato finale:
App.vue
Conclusioni
❏Vue è un framework con un’architettura concisa che lo rende semplice da comprendere e
facile da sviluppare.
❏La community per Vue è ancora piuttosto piccola. Ha un singolo creatore e molti dei
plug-in sono scritti in cinese. Mancano alcune funzionalità.
❏Vue è la soluzione ideale per progetti semplici che richiedono alte prestazioni, interattività e
facilità di manutenzione.
❏Vue è un framework con un’architettura concisa che lo rende semplice da comprendere e
facile da sviluppare.
❏La community per Vue è ancora piuttosto piccola. Ha un singolo creatore e molti dei
plug-in sono scritti in cinese. Mancano alcune funzionalità.
❏Vue è la soluzione ideale per progetti semplici che richiedono alte prestazioni, interattività e
facilità di manutenzione.
Conclusioni
Stars
188
1178
Contributors
PRINCIPALI
FRAMEWORKS
JAVASCRIPT
Creator
90932
619 35112
93603
Google
Facebook
Evan You
Size
20.9 KB
111 KB
40 KB
dati tratti da: http://github.com
Stars
188
1178
Contributors
PRINCIPALI
FRAMEWORKS
JAVASCRIPT
Creator
90932
619 35112
93603
Evan You
Size
20.9 KB
111 KB
40 KB
dati tratti da: http://github.com
Conclusioni
Fonte: http://www.npmtrends.com
Fonte: http://www.npmtrends.com
Grazie per
l’attenzione
l’attenzione
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 225
- Slides 30
- Age 2787 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
32 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
33 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
31 views
14
Fertility awareness methods for women in the society
Isaiah47
30 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
27 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
29 views