Table of Contents
Sur nuxt 3 la composition API est activée par défaut, elle ne remplace en aucun cas l’option API.
La composition API import automatiquement les fonctions Réactive de vue 3.
Contrairement à Vuejs, il n’y a pas besoin d’exporter les constantes réactives.
Déclaration de variable
Option API
Comopsition API
<template>
<div>
<p>nom : {{nom}}</p>
<p>age : {{age}}</p>
<p>est ce que je touche les apl ? {{apl ? "oui" : "non"}}</p>
</div>
</template>
<script>
export default {
data() {
return {
nom: 'kael',
age: 35,
apl: false
}
}
}
</script> <template>
<div>
<p>nom : {{nom}}</p>
<p>age : {{age}}</p>
<p>est ce que je touche les apl ? {{apl ? "oui" : "non"}}</p>
</div>
</template>
<script setup>
const nom = ref('kael');
const age = ref(35);
const apl = false;
</script> Déclaration d'un objet
Option API
<template>
<div>
<p>nom : {{personne.nom}}</p>
<p>age : {{personne.age}}</p>
<p>est ce que je touche les apl ? {{personne.apl ? "oui" : "non"}}</p>
</div>
</template>
<script>
export default {
data() {
return {
personne: {
nom: 'kael',
age: 35,
apl: false
}
}
}
}
</script> Comopsition API
<template>
<div>
<p>nom : {{nom}}</p>
<p>age : {{age}}</p>
<p>est ce que je touche les apl ? {{apl ? "oui" : "non"}}</p>
</div>
</template>
<script setup>
const personne = reactive(
{
nom: "kael",
age: 35,
apl: false
}
)
</script> Méthode
Option API
<template>
<div>
<p>compteur : <button @click="decrementer" > - </button>{{compteur}} <button @click="incrementer" > + </button></p>
</div>
</template>
<script>
export default {
data() {
return{
compteur: 0
}
},
methods: {
decrementer(){
this.compteur--
},
incrementer(){
this.compteur++
}
},
}
</script> Comopsition API
<template>
<div>
<p>compteur : <button @click="decrementer" > - </button>{{compteur}} <button @click="incrementer" > + </button></p>
</div>
</template>
<script setup>
const compteur = ref(0)
const decrementer = () => compteur.value--
const incrementer = () => {compteur.value++}
</script> Computed
Option API
<template>
<div>
<input v-model="prenom" type="text" />
<p>{{ nomComplet }}</p>
</div>
</template>
<script>
export default {
data() {
return {
prenom: ''
}
},
computed: {
nomComplet() {
if (this.prenom)
return this.prenom + " RAYMONDE"
}
},
}
</script> Comopsition API
<template>
<div>
<input v-model="prenom" type="text">
<p>{{ nomComplet }}</p>
</div>
</template>
<script setup>
const prenom = ('')
const nomComplet =(()=> this.prenom + " RAYMONDE")
</script>