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