Aide mémoire VueJS 2.0

Remarque Décembre 2020

Nous sommes actuellement à une periode charnière de VueJS. La version 3.0 bien que stable n'est pas encore la version « par defaut ».

Le document présent ainsi que les supports de cours et TP sont actuellement écrits pour VueJS 2.0

Débuter en Françaisopen in new window

VueCLI (Recommandé pour les débutants)

Installation

$ npm install -g vue-cli

Créer un projet «application » depuis le template officiel

$ vue init webpack my-project

Utilisation en mode « standalone »

Ajout de VueJS dans un projet classique, usage en mode « déclaratif »

Ajouter la librairie

<script src="https://unpkg.com/vue"></script>

Exemple de HTML existant dans la page :

<div id="monMessage">
  <h1>{{ titre }}<h1>
</div>

Code Javascript à ajouter :

var app = new Vue({ el: '#monMessage', data: { message: 'Bonjour Monde' } })

Les évènements

  • v-on:click.stop (stop la propagation du click)
  • v-on:click.prevent (Exemple : v-on:submit.prevent="onSubmit")
  • v-on:click.capture (Évènement interne, appelé avant)
  • v-on:click.self (Évènement uniquement si lui-même)
  • v-on:click.once (Évènement déclenché une seule fois)

Cycle de vie

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • detroyed

Les cycles de vieopen in new window

Les directives

Les directives sont des attributs html propres à VueJS

  • v-text
  • v-html
  • v-show
  • v-if
  • v-else
  • v-else-if
  • v-for
  • v-on
  • v-bind
  • v-model
  • v-pre
  • v-cloak
  • v-once
Mis à jour le:
Contributeurs: Valentin Brosseau