VueJS_Avancé.md

VueJS Avancé (avec VirtualDom)

EN COURS D'ECRITURE

Séparer la partie template de la partie css/js

VueCli va initialiser un projet avec VueJS ainsi que tous les templates de base qui vont nous servir dans un projet

Prérequis

installer Vue Cli de manière globale sur son mac :

npm install -g @vue/cli

Création d'un projet avec VueJS

vue init webpack-simple NomDuProjet

Ensuite, sur le projet, installer les packages nécessaires :

npm install

Puis lancer l'application locale :

npm run dev

Packages utiles

• Vue Ressource : Permet de faire des requêtes Ajax simplement
• Vue Router : Permet de gérer le router
• VueX : Permet de gérer un système de state management

Animer un élément avec la balise transition

Vue offre la possibilité d'utiliser un attribut transition qui va permettre d'animer un élément avec du css.
La balise se présente comme ceci :

<transition name="fade">
  <div class="ui message success" v-if="visible">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
</transition>
<button @click="toggle">Toggle</button>

Nous allons pouvoir intéragir avec la balise transition directement dans le style :

<style>
  .fade-enter-active, .fade-leave-active {
    transition: opacity 1s, transform 1s;
  }

  .fade-enter, .fade-leave-active {
    opacity: 0;
    transform: translateX(20px);
  }
</style>

Quelques exemples d'attributs possibles : .nom-enter, .nom-leave, .nom-out, .nom-enter-active, .nom-leave-active, etc