Save 37% off PRO during our Black Friday Sale! »

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

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

Ee938a042678a27c04ce01aef47b8e6f?s=128

FranckAbgrall

May 22, 2018
Tweet

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