Aide mémoire VueJS 3.0

Table des matières

• Vite (Recommandé pour les débutants)
• Utilisation en mode « standalone »
• Les évènements
• Cycle de vie
• Les directives

Débuter en Français

Options API et Composition API

Cette fiche utilise l'Options API. Vue 3 propose également la Composition API avec <script setup>, très utilisée dans les projets récents. Voir la documentation officielle.

Vite (Recommandé pour les débutants)

Installation

$ npm create vue@latest
$ cd my-project
$ npm install
$ npm run dev

Alternative : npm create vite@latest mon-projet -- --template vue pour un projet Vite minimal.

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@3"></script>

Exemple de HTML existant dans la page :

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

Code Javascript à ajouter :

const app = Vue.createApp({
  data() {
    return {
      message: 'Bonjour Monde'
    }
  }
}).mount('#monMessage')

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
• beforeUnmount
• unmounted

Les cycles de vie (documentation officielle)

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