Skip to content

Instantly share code, notes, and snippets.

@Symfomany

Symfomany/atelier4.md

Created April 20, 2017 07:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Symfomany/c58da3ae62ea8cfd7de42383a57fa3b5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Symfomany/c58da3ae62ea8cfd7de42383a57fa3b5 to your computer and use it in GitHub Desktop.
Download ZIP
Atelier 4
Raw
atelier4.md

Atelier Component VueJS

enter image description here

Documentation

Materialize CSS

*[News] Le Framework MaterializeCSS fera partis du Hackathon *

Etape 0 Rappel de cours :

Ces rappels ne sont pas facultatifs...

Etape 1 Architecture

1./ Créer un dossier et deployé à l'intérieur une Architecture Vue-CLI

2./ Charger en CDN MaterializeCSS dans le head du fichier index.html http://materializecss.com/getting-started.html

3./ Créer un composant Navbar qui affichera une Navbar avec un titre par défaut "GOT App" http://materializecss.com/navbar.html

4./ Créer un composant Footer http://materializecss.com/footer.html qui affichera des liens et un titre "Game Of Throne App"

5./ Créer un Breadscrumbs fictif qui affichera ses liens en rose
Breadscrumbs: http://materializecss.com/breadcrumbs.html

Etape 2 Communication de Composant Parent -> Enfant

0./ Visualiser les cours suivants:

1./ Créer un composant Liste qui chargera en AJAX la liste des personnages URL AJAX: https://github.com/Symfomany/angu/blob/master/datas/got.json

Voir comment charger Vue-Ressource dans Vue-CLI

2./ Créer un composant Card pour chacun personnage, puis appeler le composant Card pour chaque personnages dans le composant Liste http://materializecss.com/cards.html

Bonus: L'affichage du sexe peut se faire via un filtre qui retournera "C'est un homme" ou "C'est une femme"

3./ Ajouter la classe "amber" dans la Card à coté de la classe .card si dans la description du personnage le mot "Baratheon" apparaît. http://materializecss.com/color.html

4./ Créer un composant Preloader qui s'affichera uniquement quand il n'y aura aucun personnage http://materializecss.com/preloader.html

5./ Créer un Composant Chips qui reçoit en propriété le nombre de personnages et l'afficher dans le composant Liste

6./ Créer un Composant Collections qui affiche seulement les noms de familles et leurs sexe sous forme d'icones http://materializecss.com/collections.html

Etape 3 [Bonus, à Lire] Communication de Composant Enfant -> Parent

0./ Visualiser les cours suivants:

4./ Créer le composant Form qui sera inclus dans le composant Liste qui permettra d'ajouter un personnage de GOT

  • nom
  • prenom
  • photo
  • sexe
  • ville
  • description

NB: Le composant enfant Form communiquera au composant parent Liste qu'un personnage a été ajouté

5/ Ajouter la possibilité de supprimer un personnage avec un boutton "Supprimer" par personnage. Le composant enfant Card communiquera au composant parent Liste qu'un personnage a été supprimé

TP Components à faire à la maison

TP Components Maison: https://www.udemy.com/vuejs-2-the-complete-guide/learn/v4/t/practice/70/introduction

Vue-CLI https://blog.elao.com/fr/dev/realisez-une-application-vue-js-avec-vue-cli/

Vue Composant Grafikart https://www.grafikart.fr/formations/vuejs/components

Vue-CLI Grafikart https://www.grafikart.fr/formations/vuejs/vue-cli

Vue-CLI Article https://blog.jscrambler.com/build-app-vue-js/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment