Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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...
Sommaire
Entrevue avec Vue.js
1. Pourquoi Vue ?
2. Architecture d’une application Vue
a. Les composants
b. La syntaxe de t...
Histoire
Pourquoi Vue ?
En février 2014, Evan You publie la première version de Vue.js
"I figured, what if I could just ex...
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 m...
Introduction
Architecture d’une application Vue
Pour bootstrapper une application Vue.js :
11
index.html main.js
<div id="...
Introduction
Architecture d’une application Vue
Pour bootstrapper une application Vue.js :
● Un élément html
● Une instanc...
Les composants
Architecture d’une application Vue
Un composant Vue est défini par un objet JS qui se
décompose selon la st...
const MyHeader = {
template: `<h1>
My application at {{ date }}
</h1>`,
data() {
return {
date: new Date().toString()
};
}...
const MyHeader = {
template: `<h1>
My application at {{ date }} -
{{ hello() }}</h1>`,
data() {
return {
date: new Date()....
Valoriser une propriété d’un composant :
● Passer un objet
Les composants
Architecture d’une application Vue
Un composant ...
Les composants
Architecture d’une application Vue
Un composant Vue est défini par un objet JS qui se
décompose selon la st...
Les propriétés avancées
Architecture d’une application Vue
• watch : méthodes qui permettent d’être notifié lors de la mod...
Les propriétés avancées
Architecture d’une application Vue
• computed : propriété qui est recalculé à chaque fois qu’une p...
Communication composants
Architecture d’une application Vue
Un composant peut posséder des entrées-sorties.
● Les entrées ...
Communication composants
Architecture d’une application Vue
Composant parent Composant enfant
const MyNotebook = {
templat...
Le cycle de vie
Architecture d’une application Vue
Un composant peut aussi posséder des “hooks” pour être notifié de son c...
Les fichiers Vue
Architecture d’une application Vue
23
Un fichier vue est composé comme suit :
<template>
<h1>{{ title }} ...
Les composants globaux
Architecture d’une application Vue
24
● Par défaut les composants utilisés doivent être importés (v...
25
Les bindings
La syntaxe de templating
26
<a href="https://vuejs.org/">link</a>
<a v-bind:href="myLink">link</a>
<a :href="...
Les conditions
La syntaxe de templating
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-...
Les boucles
La syntaxe de templating
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
<my-component v-for="item...
Les événements
La syntaxe de templating
<button v-on:click="method()"></button>
<button @click="method($event)"></button>
...
Modèle binding
La syntaxe de templating
30
<template>
<div>
<p>Your name : <input v-model="name" /></p>
<p>Hello {{ name }...
Modèle binding : les modifiers
31
Les modifiers servent à modifier les valeurs associés à un modèle avant de mettre à jour...
32
Les plugins
Extensions de Vue
33
● Les plugins ajoutent des fonctionnalités globales à Vue
● Il n'y a pas de portée strict...
Vue Router
Extensions de Vue
34
Vue.js permet de créer des applications single page performantes. Pour cela, la gestion de...
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éat...
39
Quelques liens
Ressources
● La documentation officielle : https://vuejs.org/v2/guide/
● Cheatsheet : https://vuejs-tips.gi...
Astuce
Hand’s On
● Pour utiliser SASS : npm install sass-loader node-sass webpack --save-dev
○ puis au niveau de la balise...
Prochain SlideShare
Chargement dans…5
×

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

96 vues

Publié le

Venez découvrir Vue.js, le challenger de React et Angular, au travers d’une présentation endiablée.
Elle sera suivie d’un Hands-on qui vous plongera au cœur de la technique à travers différents exercices. Débutant ou confirmé, ils vous permettront d’acquérir les bonnes pratiques et de peaufiner vos connaissances. Vous serez alors en mesure de créer une application web en quelques minutes.
La connaissance du JavaScript est indispensable.

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

  1. 1. par Ludovic Ladeu et Thomas Champion 1
  2. 2. Nous Pourquoi Vue ? 2 Ludovic Ladeu Développeur Fullstack Thomas Champion Développeur Fullstack #Back #Cloud #Web #Web #JS #CSS
  3. 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. 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. 5. En trois mots Pourquoi Vue ? « Approchable » 5
  6. 6. En trois mots Pourquoi Vue ? « Versatile » 6
  7. 7. En trois mots Pourquoi Vue ? « Performant » 7
  8. 8. Une application en 30 secondes Pourquoi Vue ? 8
  9. 9. 9
  10. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 25
  26. 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. 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. 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. 29. Les événements La syntaxe de templating <button v-on:click="method()"></button> <button @click="method($event)"></button> 29
  30. 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. 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. 32
  33. 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. 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. 35. Vue Router Extensions de Vue 35 6) Template du composant Racine Pour aller plus loin : https://router.vuejs.org/en/
  36. 36. 36
  37. 37. 37
  38. 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. 39
  40. 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. 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>

×