Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
vue.js “Retrouver le goût des choses simples”
Slide 2
Slide 2 text
FRANCK ABGRALL Consultant & Formateur Zenika Nantes GREGORY BEVAN Consultant & Formateur Zenika Nantes vue.js
Slide 3
Slide 3 text
vue.js vue.js Evan Popularité ≈ 90000 sur github
Slide 4
Slide 4 text
vue.js Alternatives ...
Slide 5
Slide 5 text
Vue.js en 3 mots ... SIMPLE PERFORMANT MINIMALISTE vue.js
Slide 6
Slide 6 text
Étape 1 Initialiser un projet Vue.js vue.js
Slide 7
Slide 7 text
Vue-cli vue.js
Slide 8
Slide 8 text
Étape 2 Créer un composant vue.js
Slide 9
Slide 9 text
Structure d’une application js en 2018 Navbar Sidebar List Item Item Item Input / Output vue.js
Slide 10
Slide 10 text
Architecture orientée composant Composition “classique” : - 1 fichier html (template) - 1 fichier js (controller) - 1 fichier css/scss... (style) Single File Component : - 1 fichier … (.vue) vue.js
Slide 11
Slide 11 text
vue.js Template (HTML) Controller (Javascript) Style (CSS)
Slide 12
Slide 12 text
Étape 3 Créer une route vue.js
Slide 13
Slide 13 text
Vue-router https://localhost:4200/map vue.js
Slide 14
Slide 14 text
Vue-router https://localhost:4200/stats vue.js
Slide 15
Slide 15 text
Étape 4 Naviguer entre les routes vue.js
Slide 16
Slide 16 text
vue.js
Slide 17
Slide 17 text
Étape 5 Préparer l'affichage d'une série vue.js
Slide 18
Slide 18 text
Étape 6 Récupérer les données vue.js
Slide 19
Slide 19 text
Client HTTP Service Http Home Tvmaze API Serie Serie Serie vue.js
Slide 20
Slide 20 text
Cycle de vie d’un composant Cycle de vie beforeCreated created beforeMount mounted beforeUpdate updated beforeDestroy destroyed vue.js
Slide 21
Slide 21 text
Étape 7 Afficher les séries vue.js
Slide 22
Slide 22 text
vue.js
Slide 23
Slide 23 text
vue.js
Slide 24
Slide 24 text
vue.js Passing props
Slide 25
Slide 25 text
Créer dynamiquement à partir d’une liste vue.js
Slide 26
Slide 26 text
vue.js
Slide 27
Slide 27 text
vue.js
Slide 28
Slide 28 text
Parent Component Child Component
Slide 29
Slide 29 text
Parent Component Child Component
Slide 30
Slide 30 text
Parent Component Child Component
Slide 31
Slide 31 text
Parent Component Child Component
Slide 32
Slide 32 text
Étape 8 Gestion des favoris vue.js
Slide 33
Slide 33 text
Les événements natifs ● click ● focus ● ... vue.js
Slide 34
Slide 34 text
Les événements personnalisés Home Serie Serie Événement émis avec de la donnée vue.js
Slide 35
Slide 35 text
vue.js Parent Child
Slide 36
Slide 36 text
Étape 9 Afficher en fonction d’un état vue.js
Slide 37
Slide 37 text
Computed property vue.js
Slide 38
Slide 38 text
Computed property vue.js
Slide 39
Slide 39 text
Computed property vue.js
Slide 40
Slide 40 text
Computed property vue.js
Slide 41
Slide 41 text
Computed property vue.js
Slide 42
Slide 42 text
Class binding vue.js
Slide 43
Slide 43 text
Étape 10 Rechercher une série vue.js
Slide 44
Slide 44 text
v-model data () { return { name: ‘’ } }
“Controller” Template Two way data binding vue.js
Slide 45
Slide 45 text
This is the end... ...but the beginning of your Vue.js experience vue.js
Slide 46
Slide 46 text
L'objet data d'un composant vue.js Two way data binding