Vue.js, retrouver le goût des choses simples

Transcript

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