Aide-memoire

Vue 3

Les reperes essentiels pour creer des composants Vue avec reactivite, directives et cycle de vie.

Projet videReactiviteDirectivesComposants
new

Installation

npm create vite@latest mon-projet -- --template vue
cd mon-projet
npm install
npm run dev
npm run build
sfc

Structure de base

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('Bonjour Vue!')
</script>

<style scoped>
div { color: blue; }
</style>
ref

Reactivite

import { ref, reactive } from 'vue'

const compteur = ref(0)
compteur.value++

const utilisateur = reactive({ nom: 'Marie' })
utilisateur.nom = 'Alice'
v-

Directives

  • v-bindlier un attribut
  • v-modelliaison formulaire
  • v-ifcondition
  • v-forboucle
  • @clickevenement
  • :classclasse dynamique
life

Cycle de vie

onMounted(() => console.log('Monte'))
onUnmounted(() => console.log('Detruit'))
cmp

Composants

<Enfant :msg="message" @envoyer="recoitMsg" />

<script setup>
defineProps(['msg'])
defineEmits(['envoyer'])
</script>
cw

Computed & watch

const nom = ref('Alice')
const nomMaj = computed(() => nom.value.toUpperCase())

watch(nom, (nouv, anc) => {
  console.log(anc, '->', nouv)
})
ok

Outils utiles

  • Vue Devtools pour inspecter l'application.
  • Vite pour le serveur de dev.
  • Pinia pour le store.
  • Vue Router pour la navigation SPA.