SlideShare une entreprise Scribd logo
1  sur  41
Télécharger pour lire hors ligne
par Ludovic Ladeu et Thomas Champion
1
Nous
Pourquoi Vue ?
2
Ludovic Ladeu
Développeur Fullstack
Thomas Champion
Développeur Fullstack
#Back
#Cloud
#Web #Web
#JS
#CSS
Sommaire
Entrevue avec Vue.js
1. Pourquoi Vue ?
2. Architecture d’une application Vue
a. Les composants
b. La syntaxe de templating
3. Extensions de Vue
a. Les plugins
b. Vue router
4. Hand’s On
3
Histoire
Pourquoi Vue ?
En février 2014, Evan You publie la première version de Vue.js
"I figured, what if I could just extract the part that I really liked about Angular and build something really
lightweight without all the extra concepts involved?"
4
En trois mots
Pourquoi Vue ?
« Approchable »
5
En trois mots
Pourquoi Vue ?
« Versatile »
6
En trois mots
Pourquoi Vue ?
« Performant »
7
Une application en 30 secondes
Pourquoi Vue ?
8
9
Disclaimer
Architecture d’une application Vue
Les exemples de code sont en EcmaScript 6 (ES2015)
10
var myVar = 1; const myVar = 2;
let myVar = 2;
var object = {
hello: function() {
}
};
const object = {
hello() {
}
};
var name = "bob";
var object = {
name : name
};
const name = "bob";
const object = {
name
};
Déclaration de variable
Shorthand method
Shorthand property
Introduction
Architecture d’une application Vue
Pour bootstrapper une application Vue.js :
11
index.html main.js
<div id="app">
<h1>{{ title }}</h1>
</div>
new Vue({
el: '#app',
data: {
title: 'My application'
}
})
Et c’est parti ?
● Un élément html
● Une instance de Vue lié à cet élément
Introduction
Architecture d’une application Vue
Pour bootstrapper une application Vue.js :
● Un élément html
● Une instance de Vue lié à cet élément
Une bonne pratique :
● Mettre en place un composant racine
12
<div id="app"></div>
index.html
main.js
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
Les composants
Architecture d’une application Vue
Un composant Vue est défini par un objet JS qui se
décompose selon la structure suivante :
• template : template HTML du composant
13
const MyHeader = {
template: `<h1>My application</h1>`
};
const MyHeader = {
template: `<h1>
My application at {{ date }}
</h1>`,
data() {
return {
date: new Date().toString()
};
}
};
Les composants
Architecture d’une application Vue
Un composant Vue est défini par un objet JS qui se
décompose selon la structure suivante :
• template : template HTML du composant
• data : attributs internes au composant
14
const MyHeader = {
template: `<h1>
My application at {{ date }} -
{{ hello() }}</h1>`,
data() {
return {
date: new Date().toString()
};
},
methods : {
hello() {
return 'hello world';
}
}
};
Les composants
Architecture d’une application Vue
Un composant Vue est défini par un objet JS qui se
décompose selon la structure suivante :
• template : template HTML du composant
• data : attributs internes au composant
• methods : fonctions définies dans le composant
15
Valoriser une propriété d’un composant :
● Passer un objet
Les composants
Architecture d’une application Vue
Un composant Vue est défini par un objet JS qui se
décompose selon la structure suivante :
• template : template HTML du composant
• data : attributs internes au composant
• methods : fonctions définies dans le composant
• props : attributs passés par le composant appelant
16
const MyHeader = {
props: ['name'],
template: `<h1>
My application at {{ date }} -
{{ hello() }}</h1>`,
data() {
return {
date: new Date().toString()
};
},
methods : {
hello() {
return `hello ${this.name}`;
}
}
};
<my-header name="Bob"></my-header>
<my-header :name="username"></my-header>
<my-header :name="'Bob'"></my-header>
● Passer une chaîne
équivalent à
Les composants
Architecture d’une application Vue
Un composant Vue est défini par un objet JS qui se
décompose selon la structure suivante :
• template : template HTML du composant (pas pour
les fichiers Vue)
• data : attributs internes au composant
• methods : fonctions définies dans le composant
• props : attributs passés par le composant appelant
• components : enregistrer localement des composants
17
const MyTime = {
template: `<span>{{ date }}</span>`,
data() {
return {
date: new Date().toString()
};
}
};
const MyHeader = {
template: `<h1>
My application at <my-time /> -
{{ hello() }}</h1>`,
props: ['name'],
methods : {
hello() {
return `hello ${this.name}`;
}
},
components : { MyTime }
};
Les propriétés avancées
Architecture d’une application Vue
• watch : méthodes qui permettent d’être notifié lors de la modification d’une propriété
18
const App = {
template: `
<div>
Your name : <input v-model="firstname" />
</div>`,
data() {
return {
firstname: 'bob'
}
},
watch: {
firstname(value, oldValue) {
console.log('watch: firstname changed', value, oldValue);
}
}
};
Les propriétés avancées
Architecture d’une application Vue
• computed : propriété qui est recalculé à chaque fois qu’une propriété dont elle dépend est
modifiée. La valeur de la propriété est alors mise en cache
19
const App = {
template: `<div>{{ computedFullName }} - {{ computedFullName }}</div>`,
data() {
return {
firstname: 'bob',
lastname: 'dupont'
}
},
computed: {
computedFullName() {
return this.firstname + ' ' + this.lastname;
}
},
};
Communication composants
Architecture d’une application Vue
Un composant peut posséder des entrées-sorties.
● Les entrées sont les propriétés (props)
● Les sorties correspondent à des événements émisent
par le composant enfant
20
Communication composants
Architecture d’une application Vue
Composant parent Composant enfant
const MyNotebook = {
template: `
<div>
<p>My name : <input v-model="name" /></p>
<my-text :text="name" @textChanged="nameChanged" />
</div>`,
data() {
return {
name: 'foobar',
}
},
methods: {
nameChanged(content) {
this.name = content;
}
},
components: {
MyText
}
};
const MyText = {
template: `
<div>
<input v-model="content" />
</div>`,
props: ['text'],
data() {
return {
content: this.text
}
},
watch: {
content() {
this.$emit('textChanged', this.content);
}
}
};
21
Le cycle de vie
Architecture d’une application Vue
Un composant peut aussi posséder des “hooks” pour être notifié de son cycle de vie :
Création du composant
● beforeCreated
● created
Ajout au DOM
● beforeMount
● mounted
Mise à jour du DOM
● beforeUpdate
● updated
Destruction du composant
● beforeDestroy
● destroyed 22
const MyContent = {
template: `<main>{{ content }}</main>`,
data() {
return {
content: ''
}
},
created() {
restService.getContent()
.then(content => {
this.content = content;
})
}
};
Les fichiers Vue
Architecture d’une application Vue
23
Un fichier vue est composé comme suit :
<template>
<h1>{{ title }} - {{ date }}</h1>
</template>
<style scoped>
h1 {
color: blue;
}
</style>
<script>
export default {
props: ['title'],
data() {
return {
date: new Date().toString()
};
},
};
</script>
Pris en charge par vue-cli
● template
● script
● style (scoped ou non)
Les composants globaux
Architecture d’une application Vue
24
● Par défaut les composants utilisés doivent être importés (via la propriété components)
● Mais il est possible de créer des composants globaux :
Vue.component('box', {
template: `<div class="box">{{ content }}</div>`,
props: ['content']
});
import Box from './components/Box.vue'
Vue.component('box', Box);
En déclarant le composant dans un fichier Vue :
25
Les bindings
La syntaxe de templating
26
<a href="https://vuejs.org/">link</a>
<a v-bind:href="myLink">link</a>
<a :href="myLink">link</a>
Comment lier une propriété de mon composant à un attribut html ?
Comment afficher une propriété dans mon template ?
<h1>{{ title }}</h1>
Les conditions
La syntaxe de templating
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else>
Not A/B
</div>
27
Les boucles
La syntaxe de templating
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
<my-component v-for="item in items" :key=”item.id”></my-component>
Boucler sur une liste de composants
Depuis Vue 2.2.0 + la propriété key est obligatoire quand on utilise v-for avec les composants.
28
Les événements
La syntaxe de templating
<button v-on:click="method()"></button>
<button @click="method($event)"></button>
29
Modèle binding
La syntaxe de templating
30
<template>
<div>
<p>Your name : <input v-model="name" /></p>
<p>Hello {{ name }}</p>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Bob'
}
}
}
</script>
Modèle binding : les modifiers
31
Les modifiers servent à modifier les valeurs associés à un modèle avant de mettre à jour le modèle
<input v-model.trim="msg" />
<input v-model.lazy="msg" />
<input v-model.number="age" type="number" />
<input v-model.trim.lazy="msg" />
Il est aussi possible de combiner les modifiers :
32
Les plugins
Extensions de Vue
33
● Les plugins ajoutent des fonctionnalités globales à Vue
● Il n'y a pas de portée strictement définie pour un plugin
● il existe plusieurs types de plugins:
○ Ajout de méthodes ou propriétés globales ex. vue-element
○ Ajout d’un ou plusieurs assets: directives/filters/transitions etc. ex. vue-touch
○ Ajout d’options aux components by global mixin. ex. vuex
○ Ajout de méthodes aux instances de Vue en passant par Vue.prototype
○ Une combinaison des méthodes ci-dessus. ex. vue-router.
● Pour utiliser un plugin :
Vue Router
Extensions de Vue
34
Vue.js permet de créer des applications single page performantes. Pour cela, la gestion des
routes est possible via « vue-router »
1) Déclarer le plugin VueRouter
2) Création des composants
3) Définition des routes
4) Création d’une instance du vue Router
5) Création de l'instance Racine Vue
avec le router
Vue Router
Extensions de Vue
35
6) Template du composant Racine
Pour aller plus loin : https://router.vuejs.org/en/
36
37
Sujet
Hand’s On
Nous souhaitons développer le site web SuperCook qui permet de partager ses recettes de cuisines.
La création de cette application se fera en plusieurs étapes :
1. Création d’un composant affichant une recette
2. Création d’un composant afficher une liste de recette
3. Création d’un composant de détail d’une recette et mise en place du routage
4. Permettre l’ajout d’une nouvelle recette
5. Pouvoir enregistrer en favoris des recettes
Récupération des sources :
https://github.com/xebia-france/xebicon17-vuejs
38
39
Quelques liens
Ressources
● La documentation officielle : https://vuejs.org/v2/guide/
● Cheatsheet : https://vuejs-tips.github.io/cheatsheet/
● Bibliothèque de composants : https://vuetifyjs.com/
● Ultime page de ressources : https://github.com/vuejs/awesome-vue
● Bonnes pratiques : https://github.com/pablohpsilva/vuejs-component-style-guide
40
Astuce
Hand’s On
● Pour utiliser SASS : npm install sass-loader node-sass webpack --save-dev
○ puis au niveau de la balise style ajouter : lang=”scss”
41
<style lang="scss">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
header {
text-align: center;
}
}
</style>

Contenu connexe

Tendances

Symposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme MeteorSymposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme MeteorArthurMaroulier
 
XebiCon'17 : Comment recréer AWS dans votre Data Center - Pablo Lopez et Aur...
XebiCon'17 : Comment recréer AWS dans votre Data Center - Pablo Lopez et Aur...XebiCon'17 : Comment recréer AWS dans votre Data Center - Pablo Lopez et Aur...
XebiCon'17 : Comment recréer AWS dans votre Data Center - Pablo Lopez et Aur...Publicis Sapient Engineering
 
XebiCon'17 : Construire des applications résilientes en multi-cloud - Bastien...
XebiCon'17 : Construire des applications résilientes en multi-cloud - Bastien...XebiCon'17 : Construire des applications résilientes en multi-cloud - Bastien...
XebiCon'17 : Construire des applications résilientes en multi-cloud - Bastien...Publicis Sapient Engineering
 
XebiCon'17 : Serverless is the new back - Jérémy Pinsolle et Gérôme Egron
XebiCon'17 : Serverless is the new back - Jérémy Pinsolle et Gérôme EgronXebiCon'17 : Serverless is the new back - Jérémy Pinsolle et Gérôme Egron
XebiCon'17 : Serverless is the new back - Jérémy Pinsolle et Gérôme EgronPublicis Sapient Engineering
 
XebiCon'17 : Rex Akka dans une architecture microservice - Joachim Rousseau
XebiCon'17 : Rex Akka dans une architecture microservice - Joachim RousseauXebiCon'17 : Rex Akka dans une architecture microservice - Joachim Rousseau
XebiCon'17 : Rex Akka dans une architecture microservice - Joachim RousseauPublicis Sapient Engineering
 
Entity Framework 7 : nouvelle version majeure d’Entity Framework
Entity Framework 7 : nouvelle version majeure d’Entity FrameworkEntity Framework 7 : nouvelle version majeure d’Entity Framework
Entity Framework 7 : nouvelle version majeure d’Entity FrameworkMicrosoft
 
Javascript pour les développeurs C#
Javascript pour les développeurs C#Javascript pour les développeurs C#
Javascript pour les développeurs C#Microsoft
 
5- [ASP.NET Core] Devops : VSTS, Git, Azure, Docker, Linux
5- [ASP.NET Core] Devops : VSTS, Git, Azure, Docker, Linux5- [ASP.NET Core] Devops : VSTS, Git, Azure, Docker, Linux
5- [ASP.NET Core] Devops : VSTS, Git, Azure, Docker, LinuxYasmine Amrani
 
Techdays 2011 : Développez en Java avec la plateforme Team Foundation Server ...
Techdays 2011 : Développez en Java avec la plateforme Team Foundation Server ...Techdays 2011 : Développez en Java avec la plateforme Team Foundation Server ...
Techdays 2011 : Développez en Java avec la plateforme Team Foundation Server ...vlabatut
 
Qualité & Industrialisation des développements mobiles sur iOS & Android
Qualité & Industrialisation des développements mobiles sur iOS & AndroidQualité & Industrialisation des développements mobiles sur iOS & Android
Qualité & Industrialisation des développements mobiles sur iOS & AndroidThibaud CAVIN
 
L'integration continue pour tous
L'integration continue pour tousL'integration continue pour tous
L'integration continue pour tousAurelien Navarre
 
Chaine de production pipeline
Chaine de production   pipelineChaine de production   pipeline
Chaine de production pipelineNicolas wallerand
 
Suivi de qualité PIC afup2010
Suivi de qualité PIC afup2010Suivi de qualité PIC afup2010
Suivi de qualité PIC afup2010Gabriele Santini
 
Devoteam REX OpenShift DevOps - Red Hat Roadshow Paris - avril 2018
Devoteam REX OpenShift DevOps - Red Hat Roadshow Paris - avril 2018Devoteam REX OpenShift DevOps - Red Hat Roadshow Paris - avril 2018
Devoteam REX OpenShift DevOps - Red Hat Roadshow Paris - avril 2018Cedric Girard
 
Soirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVCSoirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVCSOAT
 
ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)SOAT
 

Tendances (19)

Symposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme MeteorSymposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme Meteor
 
XebiCon'17 : Comment recréer AWS dans votre Data Center - Pablo Lopez et Aur...
XebiCon'17 : Comment recréer AWS dans votre Data Center - Pablo Lopez et Aur...XebiCon'17 : Comment recréer AWS dans votre Data Center - Pablo Lopez et Aur...
XebiCon'17 : Comment recréer AWS dans votre Data Center - Pablo Lopez et Aur...
 
XebiCon'17 : Construire des applications résilientes en multi-cloud - Bastien...
XebiCon'17 : Construire des applications résilientes en multi-cloud - Bastien...XebiCon'17 : Construire des applications résilientes en multi-cloud - Bastien...
XebiCon'17 : Construire des applications résilientes en multi-cloud - Bastien...
 
XebiCon'17 : Serverless is the new back - Jérémy Pinsolle et Gérôme Egron
XebiCon'17 : Serverless is the new back - Jérémy Pinsolle et Gérôme EgronXebiCon'17 : Serverless is the new back - Jérémy Pinsolle et Gérôme Egron
XebiCon'17 : Serverless is the new back - Jérémy Pinsolle et Gérôme Egron
 
XebiCon'17 : Rex Akka dans une architecture microservice - Joachim Rousseau
XebiCon'17 : Rex Akka dans une architecture microservice - Joachim RousseauXebiCon'17 : Rex Akka dans une architecture microservice - Joachim Rousseau
XebiCon'17 : Rex Akka dans une architecture microservice - Joachim Rousseau
 
Entity Framework 7 : nouvelle version majeure d’Entity Framework
Entity Framework 7 : nouvelle version majeure d’Entity FrameworkEntity Framework 7 : nouvelle version majeure d’Entity Framework
Entity Framework 7 : nouvelle version majeure d’Entity Framework
 
Javascript pour les développeurs C#
Javascript pour les développeurs C#Javascript pour les développeurs C#
Javascript pour les développeurs C#
 
Symposium TFS - DevOps avec Microsoft
Symposium TFS - DevOps avec MicrosoftSymposium TFS - DevOps avec Microsoft
Symposium TFS - DevOps avec Microsoft
 
5- [ASP.NET Core] Devops : VSTS, Git, Azure, Docker, Linux
5- [ASP.NET Core] Devops : VSTS, Git, Azure, Docker, Linux5- [ASP.NET Core] Devops : VSTS, Git, Azure, Docker, Linux
5- [ASP.NET Core] Devops : VSTS, Git, Azure, Docker, Linux
 
Techdays 2011 : Développez en Java avec la plateforme Team Foundation Server ...
Techdays 2011 : Développez en Java avec la plateforme Team Foundation Server ...Techdays 2011 : Développez en Java avec la plateforme Team Foundation Server ...
Techdays 2011 : Développez en Java avec la plateforme Team Foundation Server ...
 
Qualité & Industrialisation des développements mobiles sur iOS & Android
Qualité & Industrialisation des développements mobiles sur iOS & AndroidQualité & Industrialisation des développements mobiles sur iOS & Android
Qualité & Industrialisation des développements mobiles sur iOS & Android
 
L'integration continue pour tous
L'integration continue pour tousL'integration continue pour tous
L'integration continue pour tous
 
Chaine de production pipeline
Chaine de production   pipelineChaine de production   pipeline
Chaine de production pipeline
 
Suivi de qualité PIC afup2010
Suivi de qualité PIC afup2010Suivi de qualité PIC afup2010
Suivi de qualité PIC afup2010
 
Devoteam REX OpenShift DevOps - Red Hat Roadshow Paris - avril 2018
Devoteam REX OpenShift DevOps - Red Hat Roadshow Paris - avril 2018Devoteam REX OpenShift DevOps - Red Hat Roadshow Paris - avril 2018
Devoteam REX OpenShift DevOps - Red Hat Roadshow Paris - avril 2018
 
Soirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVCSoirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVC
 
ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)
 
Jenkins Workflow
Jenkins WorkflowJenkins Workflow
Jenkins Workflow
 
DevOps with OpenShift
DevOps with OpenShiftDevOps with OpenShift
DevOps with OpenShift
 

Similaire à XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu

Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016Tarik Zakaria Benmerar
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniterAtsé François-Xavier KOBON
 
Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013Philippe Sfeir
 
Prise en main de Jhipster
Prise en main de JhipsterPrise en main de Jhipster
Prise en main de JhipsterKokou Gaglo
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2dhugomallet
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.jsBruno Bonnin
 
Alphorm.com Formation React : Les fondamentaux
Alphorm.com Formation React : Les fondamentauxAlphorm.com Formation React : Les fondamentaux
Alphorm.com Formation React : Les fondamentauxAlphorm
 
Les méthodes agiles dans TFS
Les méthodes agiles dans TFSLes méthodes agiles dans TFS
Les méthodes agiles dans TFSDenis Voituron
 
Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"Nazih Heni
 
Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?Maxime Bernard
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfBoubakerMedanas
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfBoubakerMedanas
 
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !Bruno Bonnin
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !Bruno Bonnin
 

Similaire à XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu (20)

Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Cours 2 les composants
Cours 2 les composantsCours 2 les composants
Cours 2 les composants
 
Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013
 
Prise en main de Jhipster
Prise en main de JhipsterPrise en main de Jhipster
Prise en main de Jhipster
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.js
 
Alphorm.com Formation React : Les fondamentaux
Alphorm.com Formation React : Les fondamentauxAlphorm.com Formation React : Les fondamentaux
Alphorm.com Formation React : Les fondamentaux
 
Backbonejs presentation
Backbonejs presentationBackbonejs presentation
Backbonejs presentation
 
Les méthodes agiles dans TFS
Les méthodes agiles dans TFSLes méthodes agiles dans TFS
Les méthodes agiles dans TFS
 
Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"
 
Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
AngularJS
AngularJSAngularJS
AngularJS
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
 

Plus de Publicis Sapient Engineering

XebiCon'18 - L'algorithme de reconnaissance de formes par le cerveau humain
XebiCon'18 - L'algorithme de reconnaissance de formes par le cerveau humainXebiCon'18 - L'algorithme de reconnaissance de formes par le cerveau humain
XebiCon'18 - L'algorithme de reconnaissance de formes par le cerveau humainPublicis Sapient Engineering
 
Xebicon'18 - Spark in jail : conteneurisez vos traitements data sans serveur
Xebicon'18 - Spark in jail : conteneurisez vos traitements data sans serveurXebicon'18 - Spark in jail : conteneurisez vos traitements data sans serveur
Xebicon'18 - Spark in jail : conteneurisez vos traitements data sans serveurPublicis Sapient Engineering
 
XebiCon'18 - La Web App d'aujourd'hui et de demain : état de l'art et bleedin...
XebiCon'18 - La Web App d'aujourd'hui et de demain : état de l'art et bleedin...XebiCon'18 - La Web App d'aujourd'hui et de demain : état de l'art et bleedin...
XebiCon'18 - La Web App d'aujourd'hui et de demain : état de l'art et bleedin...Publicis Sapient Engineering
 
XebiCon'18 - Des notebook pour le monitoring avec Zeppelin
XebiCon'18 - Des notebook pour le monitoring avec Zeppelin XebiCon'18 - Des notebook pour le monitoring avec Zeppelin
XebiCon'18 - Des notebook pour le monitoring avec Zeppelin Publicis Sapient Engineering
 
XebiCon'18 - Event Sourcing et RGPD, incompatibles ?
XebiCon'18 - Event Sourcing et RGPD, incompatibles ?XebiCon'18 - Event Sourcing et RGPD, incompatibles ?
XebiCon'18 - Event Sourcing et RGPD, incompatibles ?Publicis Sapient Engineering
 
XebiCon'18 - Deno, le nouveau NodeJS qui inverse la tendance ?
XebiCon'18 - Deno, le nouveau NodeJS qui inverse la tendance ?XebiCon'18 - Deno, le nouveau NodeJS qui inverse la tendance ?
XebiCon'18 - Deno, le nouveau NodeJS qui inverse la tendance ?Publicis Sapient Engineering
 
XebiCon'18 - Boostez vos modèles avec du Deep Learning distribué
XebiCon'18 - Boostez vos modèles avec du Deep Learning distribuéXebiCon'18 - Boostez vos modèles avec du Deep Learning distribué
XebiCon'18 - Boostez vos modèles avec du Deep Learning distribuéPublicis Sapient Engineering
 
XebiCon'18 - Comment j'ai développé un jeu vidéo avec des outils de développe...
XebiCon'18 - Comment j'ai développé un jeu vidéo avec des outils de développe...XebiCon'18 - Comment j'ai développé un jeu vidéo avec des outils de développe...
XebiCon'18 - Comment j'ai développé un jeu vidéo avec des outils de développe...Publicis Sapient Engineering
 
XebiCon'18 - Les utilisateurs finaux, les oubliés de nos produits !
XebiCon'18 - Les utilisateurs finaux, les oubliés de nos produits !XebiCon'18 - Les utilisateurs finaux, les oubliés de nos produits !
XebiCon'18 - Les utilisateurs finaux, les oubliés de nos produits !Publicis Sapient Engineering
 
XebiCon'18 - Comment fausser l'interprétation de vos résultats avec des dataviz
XebiCon'18 - Comment fausser l'interprétation de vos résultats avec des datavizXebiCon'18 - Comment fausser l'interprétation de vos résultats avec des dataviz
XebiCon'18 - Comment fausser l'interprétation de vos résultats avec des datavizPublicis Sapient Engineering
 
XebiCon'18 - Architecturer son application mobile pour la durabilité
XebiCon'18 - Architecturer son application mobile pour la durabilitéXebiCon'18 - Architecturer son application mobile pour la durabilité
XebiCon'18 - Architecturer son application mobile pour la durabilitéPublicis Sapient Engineering
 
XebiCon'18 - Sécuriser son API avec OpenID Connect
XebiCon'18 - Sécuriser son API avec OpenID ConnectXebiCon'18 - Sécuriser son API avec OpenID Connect
XebiCon'18 - Sécuriser son API avec OpenID ConnectPublicis Sapient Engineering
 
XebiCon'18 - Structuration du Temps et Dynamique de Groupes, Théorie organisa...
XebiCon'18 - Structuration du Temps et Dynamique de Groupes, Théorie organisa...XebiCon'18 - Structuration du Temps et Dynamique de Groupes, Théorie organisa...
XebiCon'18 - Structuration du Temps et Dynamique de Groupes, Théorie organisa...Publicis Sapient Engineering
 
XebiCon'18 - La sécurité, douce illusion même en 2018
XebiCon'18 - La sécurité, douce illusion même en 2018XebiCon'18 - La sécurité, douce illusion même en 2018
XebiCon'18 - La sécurité, douce illusion même en 2018Publicis Sapient Engineering
 
XebiCon'18 - Utiliser Hyperledger Fabric pour la création d'une blockchain pr...
XebiCon'18 - Utiliser Hyperledger Fabric pour la création d'une blockchain pr...XebiCon'18 - Utiliser Hyperledger Fabric pour la création d'une blockchain pr...
XebiCon'18 - Utiliser Hyperledger Fabric pour la création d'une blockchain pr...Publicis Sapient Engineering
 
XebiCon'18 - Ce que l'histoire du métro Parisien m'a enseigné sur la création...
XebiCon'18 - Ce que l'histoire du métro Parisien m'a enseigné sur la création...XebiCon'18 - Ce que l'histoire du métro Parisien m'a enseigné sur la création...
XebiCon'18 - Ce que l'histoire du métro Parisien m'a enseigné sur la création...Publicis Sapient Engineering
 

Plus de Publicis Sapient Engineering (20)

XebiCon'18 - L'algorithme de reconnaissance de formes par le cerveau humain
XebiCon'18 - L'algorithme de reconnaissance de formes par le cerveau humainXebiCon'18 - L'algorithme de reconnaissance de formes par le cerveau humain
XebiCon'18 - L'algorithme de reconnaissance de formes par le cerveau humain
 
Xebicon'18 - IoT: From Edge to Cloud
Xebicon'18 - IoT: From Edge to CloudXebicon'18 - IoT: From Edge to Cloud
Xebicon'18 - IoT: From Edge to Cloud
 
Xebicon'18 - Spark in jail : conteneurisez vos traitements data sans serveur
Xebicon'18 - Spark in jail : conteneurisez vos traitements data sans serveurXebicon'18 - Spark in jail : conteneurisez vos traitements data sans serveur
Xebicon'18 - Spark in jail : conteneurisez vos traitements data sans serveur
 
XebiCon'18 - Modern Infrastructure
XebiCon'18 - Modern InfrastructureXebiCon'18 - Modern Infrastructure
XebiCon'18 - Modern Infrastructure
 
XebiCon'18 - La Web App d'aujourd'hui et de demain : état de l'art et bleedin...
XebiCon'18 - La Web App d'aujourd'hui et de demain : état de l'art et bleedin...XebiCon'18 - La Web App d'aujourd'hui et de demain : état de l'art et bleedin...
XebiCon'18 - La Web App d'aujourd'hui et de demain : état de l'art et bleedin...
 
XebiCon'18 - Des notebook pour le monitoring avec Zeppelin
XebiCon'18 - Des notebook pour le monitoring avec Zeppelin XebiCon'18 - Des notebook pour le monitoring avec Zeppelin
XebiCon'18 - Des notebook pour le monitoring avec Zeppelin
 
XebiCon'18 - Event Sourcing et RGPD, incompatibles ?
XebiCon'18 - Event Sourcing et RGPD, incompatibles ?XebiCon'18 - Event Sourcing et RGPD, incompatibles ?
XebiCon'18 - Event Sourcing et RGPD, incompatibles ?
 
XebiCon'18 - Deno, le nouveau NodeJS qui inverse la tendance ?
XebiCon'18 - Deno, le nouveau NodeJS qui inverse la tendance ?XebiCon'18 - Deno, le nouveau NodeJS qui inverse la tendance ?
XebiCon'18 - Deno, le nouveau NodeJS qui inverse la tendance ?
 
XebiCon'18 - Boostez vos modèles avec du Deep Learning distribué
XebiCon'18 - Boostez vos modèles avec du Deep Learning distribuéXebiCon'18 - Boostez vos modèles avec du Deep Learning distribué
XebiCon'18 - Boostez vos modèles avec du Deep Learning distribué
 
XebiCon'18 - Comment j'ai développé un jeu vidéo avec des outils de développe...
XebiCon'18 - Comment j'ai développé un jeu vidéo avec des outils de développe...XebiCon'18 - Comment j'ai développé un jeu vidéo avec des outils de développe...
XebiCon'18 - Comment j'ai développé un jeu vidéo avec des outils de développe...
 
XebiCon'18 - Les utilisateurs finaux, les oubliés de nos produits !
XebiCon'18 - Les utilisateurs finaux, les oubliés de nos produits !XebiCon'18 - Les utilisateurs finaux, les oubliés de nos produits !
XebiCon'18 - Les utilisateurs finaux, les oubliés de nos produits !
 
XebiCon'18 - Comment fausser l'interprétation de vos résultats avec des dataviz
XebiCon'18 - Comment fausser l'interprétation de vos résultats avec des datavizXebiCon'18 - Comment fausser l'interprétation de vos résultats avec des dataviz
XebiCon'18 - Comment fausser l'interprétation de vos résultats avec des dataviz
 
XebiCon'18 - Le développeur dans la Pop Culture
XebiCon'18 - Le développeur dans la Pop Culture XebiCon'18 - Le développeur dans la Pop Culture
XebiCon'18 - Le développeur dans la Pop Culture
 
XebiCon'18 - Architecturer son application mobile pour la durabilité
XebiCon'18 - Architecturer son application mobile pour la durabilitéXebiCon'18 - Architecturer son application mobile pour la durabilité
XebiCon'18 - Architecturer son application mobile pour la durabilité
 
XebiCon'18 - Sécuriser son API avec OpenID Connect
XebiCon'18 - Sécuriser son API avec OpenID ConnectXebiCon'18 - Sécuriser son API avec OpenID Connect
XebiCon'18 - Sécuriser son API avec OpenID Connect
 
XebiCon'18 - Structuration du Temps et Dynamique de Groupes, Théorie organisa...
XebiCon'18 - Structuration du Temps et Dynamique de Groupes, Théorie organisa...XebiCon'18 - Structuration du Temps et Dynamique de Groupes, Théorie organisa...
XebiCon'18 - Structuration du Temps et Dynamique de Groupes, Théorie organisa...
 
XebiCon'18 - Spark NLP, un an après
XebiCon'18 - Spark NLP, un an aprèsXebiCon'18 - Spark NLP, un an après
XebiCon'18 - Spark NLP, un an après
 
XebiCon'18 - La sécurité, douce illusion même en 2018
XebiCon'18 - La sécurité, douce illusion même en 2018XebiCon'18 - La sécurité, douce illusion même en 2018
XebiCon'18 - La sécurité, douce illusion même en 2018
 
XebiCon'18 - Utiliser Hyperledger Fabric pour la création d'une blockchain pr...
XebiCon'18 - Utiliser Hyperledger Fabric pour la création d'une blockchain pr...XebiCon'18 - Utiliser Hyperledger Fabric pour la création d'une blockchain pr...
XebiCon'18 - Utiliser Hyperledger Fabric pour la création d'une blockchain pr...
 
XebiCon'18 - Ce que l'histoire du métro Parisien m'a enseigné sur la création...
XebiCon'18 - Ce que l'histoire du métro Parisien m'a enseigné sur la création...XebiCon'18 - Ce que l'histoire du métro Parisien m'a enseigné sur la création...
XebiCon'18 - Ce que l'histoire du métro Parisien m'a enseigné sur la création...
 

XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu

  • 1. par Ludovic Ladeu et Thomas Champion 1
  • 2. Nous Pourquoi Vue ? 2 Ludovic Ladeu Développeur Fullstack Thomas Champion Développeur Fullstack #Back #Cloud #Web #Web #JS #CSS
  • 3. Sommaire Entrevue avec Vue.js 1. Pourquoi Vue ? 2. Architecture d’une application Vue a. Les composants b. La syntaxe de templating 3. Extensions de Vue a. Les plugins b. Vue router 4. Hand’s On 3
  • 4. Histoire Pourquoi Vue ? En février 2014, Evan You publie la première version de Vue.js "I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight without all the extra concepts involved?" 4
  • 5. En trois mots Pourquoi Vue ? « Approchable » 5
  • 6. En trois mots Pourquoi Vue ? « Versatile » 6
  • 7. En trois mots Pourquoi Vue ? « Performant » 7
  • 8. Une application en 30 secondes Pourquoi Vue ? 8
  • 9. 9
  • 10. Disclaimer Architecture d’une application Vue Les exemples de code sont en EcmaScript 6 (ES2015) 10 var myVar = 1; const myVar = 2; let myVar = 2; var object = { hello: function() { } }; const object = { hello() { } }; var name = "bob"; var object = { name : name }; const name = "bob"; const object = { name }; Déclaration de variable Shorthand method Shorthand property
  • 11. Introduction Architecture d’une application Vue Pour bootstrapper une application Vue.js : 11 index.html main.js <div id="app"> <h1>{{ title }}</h1> </div> new Vue({ el: '#app', data: { title: 'My application' } }) Et c’est parti ? ● Un élément html ● Une instance de Vue lié à cet élément
  • 12. Introduction Architecture d’une application Vue Pour bootstrapper une application Vue.js : ● Un élément html ● Une instance de Vue lié à cet élément Une bonne pratique : ● Mettre en place un composant racine 12 <div id="app"></div> index.html main.js new Vue({ el: '#app', template: '<App/>', components: { App } })
  • 13. Les composants Architecture d’une application Vue Un composant Vue est défini par un objet JS qui se décompose selon la structure suivante : • template : template HTML du composant 13 const MyHeader = { template: `<h1>My application</h1>` };
  • 14. const MyHeader = { template: `<h1> My application at {{ date }} </h1>`, data() { return { date: new Date().toString() }; } }; Les composants Architecture d’une application Vue Un composant Vue est défini par un objet JS qui se décompose selon la structure suivante : • template : template HTML du composant • data : attributs internes au composant 14
  • 15. const MyHeader = { template: `<h1> My application at {{ date }} - {{ hello() }}</h1>`, data() { return { date: new Date().toString() }; }, methods : { hello() { return 'hello world'; } } }; Les composants Architecture d’une application Vue Un composant Vue est défini par un objet JS qui se décompose selon la structure suivante : • template : template HTML du composant • data : attributs internes au composant • methods : fonctions définies dans le composant 15
  • 16. Valoriser une propriété d’un composant : ● Passer un objet Les composants Architecture d’une application Vue Un composant Vue est défini par un objet JS qui se décompose selon la structure suivante : • template : template HTML du composant • data : attributs internes au composant • methods : fonctions définies dans le composant • props : attributs passés par le composant appelant 16 const MyHeader = { props: ['name'], template: `<h1> My application at {{ date }} - {{ hello() }}</h1>`, data() { return { date: new Date().toString() }; }, methods : { hello() { return `hello ${this.name}`; } } }; <my-header name="Bob"></my-header> <my-header :name="username"></my-header> <my-header :name="'Bob'"></my-header> ● Passer une chaîne équivalent à
  • 17. Les composants Architecture d’une application Vue Un composant Vue est défini par un objet JS qui se décompose selon la structure suivante : • template : template HTML du composant (pas pour les fichiers Vue) • data : attributs internes au composant • methods : fonctions définies dans le composant • props : attributs passés par le composant appelant • components : enregistrer localement des composants 17 const MyTime = { template: `<span>{{ date }}</span>`, data() { return { date: new Date().toString() }; } }; const MyHeader = { template: `<h1> My application at <my-time /> - {{ hello() }}</h1>`, props: ['name'], methods : { hello() { return `hello ${this.name}`; } }, components : { MyTime } };
  • 18. Les propriétés avancées Architecture d’une application Vue • watch : méthodes qui permettent d’être notifié lors de la modification d’une propriété 18 const App = { template: ` <div> Your name : <input v-model="firstname" /> </div>`, data() { return { firstname: 'bob' } }, watch: { firstname(value, oldValue) { console.log('watch: firstname changed', value, oldValue); } } };
  • 19. Les propriétés avancées Architecture d’une application Vue • computed : propriété qui est recalculé à chaque fois qu’une propriété dont elle dépend est modifiée. La valeur de la propriété est alors mise en cache 19 const App = { template: `<div>{{ computedFullName }} - {{ computedFullName }}</div>`, data() { return { firstname: 'bob', lastname: 'dupont' } }, computed: { computedFullName() { return this.firstname + ' ' + this.lastname; } }, };
  • 20. Communication composants Architecture d’une application Vue Un composant peut posséder des entrées-sorties. ● Les entrées sont les propriétés (props) ● Les sorties correspondent à des événements émisent par le composant enfant 20
  • 21. Communication composants Architecture d’une application Vue Composant parent Composant enfant const MyNotebook = { template: ` <div> <p>My name : <input v-model="name" /></p> <my-text :text="name" @textChanged="nameChanged" /> </div>`, data() { return { name: 'foobar', } }, methods: { nameChanged(content) { this.name = content; } }, components: { MyText } }; const MyText = { template: ` <div> <input v-model="content" /> </div>`, props: ['text'], data() { return { content: this.text } }, watch: { content() { this.$emit('textChanged', this.content); } } }; 21
  • 22. Le cycle de vie Architecture d’une application Vue Un composant peut aussi posséder des “hooks” pour être notifié de son cycle de vie : Création du composant ● beforeCreated ● created Ajout au DOM ● beforeMount ● mounted Mise à jour du DOM ● beforeUpdate ● updated Destruction du composant ● beforeDestroy ● destroyed 22 const MyContent = { template: `<main>{{ content }}</main>`, data() { return { content: '' } }, created() { restService.getContent() .then(content => { this.content = content; }) } };
  • 23. Les fichiers Vue Architecture d’une application Vue 23 Un fichier vue est composé comme suit : <template> <h1>{{ title }} - {{ date }}</h1> </template> <style scoped> h1 { color: blue; } </style> <script> export default { props: ['title'], data() { return { date: new Date().toString() }; }, }; </script> Pris en charge par vue-cli ● template ● script ● style (scoped ou non)
  • 24. Les composants globaux Architecture d’une application Vue 24 ● Par défaut les composants utilisés doivent être importés (via la propriété components) ● Mais il est possible de créer des composants globaux : Vue.component('box', { template: `<div class="box">{{ content }}</div>`, props: ['content'] }); import Box from './components/Box.vue' Vue.component('box', Box); En déclarant le composant dans un fichier Vue :
  • 25. 25
  • 26. Les bindings La syntaxe de templating 26 <a href="https://vuejs.org/">link</a> <a v-bind:href="myLink">link</a> <a :href="myLink">link</a> Comment lier une propriété de mon composant à un attribut html ? Comment afficher une propriété dans mon template ? <h1>{{ title }}</h1>
  • 27. Les conditions La syntaxe de templating <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else> Not A/B </div> 27
  • 28. Les boucles La syntaxe de templating <ul> <li v-for="todo in todos"> {{ todo.text }} </li> </ul> <my-component v-for="item in items" :key=”item.id”></my-component> Boucler sur une liste de composants Depuis Vue 2.2.0 + la propriété key est obligatoire quand on utilise v-for avec les composants. 28
  • 29. Les événements La syntaxe de templating <button v-on:click="method()"></button> <button @click="method($event)"></button> 29
  • 30. Modèle binding La syntaxe de templating 30 <template> <div> <p>Your name : <input v-model="name" /></p> <p>Hello {{ name }}</p> </div> </template> <script> export default { data() { return { name: 'Bob' } } } </script>
  • 31. Modèle binding : les modifiers 31 Les modifiers servent à modifier les valeurs associés à un modèle avant de mettre à jour le modèle <input v-model.trim="msg" /> <input v-model.lazy="msg" /> <input v-model.number="age" type="number" /> <input v-model.trim.lazy="msg" /> Il est aussi possible de combiner les modifiers :
  • 32. 32
  • 33. Les plugins Extensions de Vue 33 ● Les plugins ajoutent des fonctionnalités globales à Vue ● Il n'y a pas de portée strictement définie pour un plugin ● il existe plusieurs types de plugins: ○ Ajout de méthodes ou propriétés globales ex. vue-element ○ Ajout d’un ou plusieurs assets: directives/filters/transitions etc. ex. vue-touch ○ Ajout d’options aux components by global mixin. ex. vuex ○ Ajout de méthodes aux instances de Vue en passant par Vue.prototype ○ Une combinaison des méthodes ci-dessus. ex. vue-router. ● Pour utiliser un plugin :
  • 34. Vue Router Extensions de Vue 34 Vue.js permet de créer des applications single page performantes. Pour cela, la gestion des routes est possible via « vue-router » 1) Déclarer le plugin VueRouter 2) Création des composants 3) Définition des routes 4) Création d’une instance du vue Router 5) Création de l'instance Racine Vue avec le router
  • 35. Vue Router Extensions de Vue 35 6) Template du composant Racine Pour aller plus loin : https://router.vuejs.org/en/
  • 36. 36
  • 37. 37
  • 38. Sujet Hand’s On Nous souhaitons développer le site web SuperCook qui permet de partager ses recettes de cuisines. La création de cette application se fera en plusieurs étapes : 1. Création d’un composant affichant une recette 2. Création d’un composant afficher une liste de recette 3. Création d’un composant de détail d’une recette et mise en place du routage 4. Permettre l’ajout d’une nouvelle recette 5. Pouvoir enregistrer en favoris des recettes Récupération des sources : https://github.com/xebia-france/xebicon17-vuejs 38
  • 39. 39
  • 40. Quelques liens Ressources ● La documentation officielle : https://vuejs.org/v2/guide/ ● Cheatsheet : https://vuejs-tips.github.io/cheatsheet/ ● Bibliothèque de composants : https://vuetifyjs.com/ ● Ultime page de ressources : https://github.com/vuejs/awesome-vue ● Bonnes pratiques : https://github.com/pablohpsilva/vuejs-component-style-guide 40
  • 41. Astuce Hand’s On ● Pour utiliser SASS : npm install sass-loader node-sass webpack --save-dev ○ puis au niveau de la balise style ajouter : lang=”scss” 41 <style lang="scss"> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; header { text-align: center; } } </style>