Exercices Introduction Vue 3

Tâche : Crée une application Vue 3 avec createApp() montée sur #app. Elle doit afficher un message "Bonjour Vue 3 !" via interpolation.

<!-- Écris ici ton code HTML + Vue --> <div id="app"> <!-- Affiche le message ici avec {{ }} --> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> const { createApp } = Vue; // Crée ton app ici </script>

Tâche : Crée une app Vue et monte-la sur un élément avec un sélecteur CSS. Utilise .mount('#mon-composant') ou un autre sélecteur valide.

const { createApp } = Vue; const app = createApp({ data() { return { texte: 'Hello depuis Vue !' }; } }); // Monte l'app sur l'élément voulu // app.mount(???)

Tâche : Dans createApp(), définis l'option data() comme une fonction qui retourne un objet avec au moins 3 propriétés (prenom, age, estConnecte).

createApp({ // Définis data() ici // data() doit être une FONCTION qui retourne un objet }).mount('#app');

Tâche : Dans le template HTML, utilise {{ }} pour afficher une variable, une expression arithmétique et une expression ternaire.

<div id="app"> <!-- Affiche la variable titre avec {{ }} --> <!-- Affiche une expression : age >= 18 ? 'Majeur' : 'Mineur' --> <!-- Affiche prenom en majuscules avec .toUpperCase() --> </div> <script> createApp({ data() { return { titre: 'Mon titre', prenom: 'Alice', age: 28 }; } }).mount('#app'); </script>

Tâche : Utilise :src, :href et :disabled pour lier des attributs HTML à des données Vue.

<div id="app"> <!-- Lie l'attribut src de l'image à la variable urlImage --> <img src="..." alt="Image"> <!-- Lie href à lienUrl --> <a href="...">Lien</a> <!-- Lie disabled à la variable chargement --> <button disabled>Envoyer</button> </div>

Tâche : Crée un compteur avec un bouton @click. Le clic doit appeler une méthode qui incrémente le compteur.

<div id="app"> <p>Compteur : {{ compteur }}</p> <!-- Ajoute @click sur le bouton --> <button>+1</button> </div> <script> createApp({ data() { return { compteur: 0 }; }, methods: { // Définis une méthode incrementer() } }).mount('#app'); </script>

Tâche : Crée un <input> avec v-model="prenom" et affiche en temps réel "Bonjour {{ prenom }} !" sous l'input.

<div id="app"> <!-- Input avec v-model --> <input placeholder="Votre prénom"> <!-- Affiche le prénom en temps réel --> </div> <script> createApp({ data() { return { prenom: '' }; } }).mount('#app'); </script>

Tâche : Définis dans methods une fonction ajouter(valeur) qui accepte un argument. Appelle-la depuis deux boutons avec @click="ajouter(1)" et @click="ajouter(5)".

<div id="app"> <p>Compteur : {{ compteur }}</p> <button @click="ajouter(1)">+1</button> <button @click="ajouter(5)">+5</button> </div> <script> createApp({ data() { return { compteur: 0 }; }, methods: { // Définis ajouter(valeur) ici } }).mount('#app'); </script>

Tâche : À partir d'un prixHT (input), définis deux computed properties : tva (20%) et prixTTC. Affiche les trois valeurs.

<div id="app"> <input v-model.number="prixHT" type="number" placeholder="Prix HT"> <p>Prix TTC : {{ prixTTC }} €</p> </div> <script> createApp({ data() { return { prixHT: 100 }; }, computed: { // Définis tva() et prixTTC() ici } }).mount('#app'); </script>

Tâche : Crée une app complète avec : data (prenom, age), methods (incrementerAge, reinitialiser), computed (estMajeur, messageStatut). Utilise v-model, @click et {{ }} dans le template.

<div id="app"> <input v-model="prenom" placeholder="Prénom"> <input v-model.number="age" type="number" placeholder="Âge"> <button @click="incrementerAge">+1 an</button> <button @click="reinitialiser">Reset</button> <p>{{ messageStatut }}</p> </div> <script> const { createApp } = Vue; createApp({ data() { return { prenom: '', age: 0 }; }, methods: { // incrementerAge() et reinitialiser() }, computed: { // estMajeur et messageStatut } }).mount('#app'); </script>