Qu'est-ce que Vue.js ? 💡
Vue.js est un framework JavaScript progressif qui aide à créer interfaces dynamiques et applications d'une seule page. Vue est facile à apprendre, mais puissant. 🚀
Pourquoi apprendre Vue.js ? 🎯
Facilité : configuration simple via CDN.
Réactivité : les données mettent automatiquement à jour l'interface.
Flexibilité : peut être utilisé aussi bien dans de petits projets que dans des applications complexes.
Grand écosystème : Vue prend en charge le routage et la gestion des états.
Comment connecter Vue.js via CDN ? 💻
La façon la plus simple d'utiliser Vue.js est de le connecter via CDN. Ajoutez ce code au fichier HTML :
📄 Fichier index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой первый проект на Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script src="app.js" defer></script>
</head>
<body>
<div id="app">
<h1>Привет, {{ message }}!</h1>
<button @click="changeMessage">Сменить сообщение</button>
</div>
</body>
</html>📄 Fichier app.js
const { createApp } = Vue;
const app = createApp({
data() {
return {
message: "Vue.js"
};
},
methods: {
changeMessage() {
this.message = "Hello Vue!";
}
}
});
app.mount("#app");Comment ça marche ? 🧐
Nous avons connecté Vue via
CDN.Création d'un objet Vue avec
data(), qui contient la variablemessage.Nous utilisons
{{ message }}pour l'affichage dynamique des données.Ajout d'un bouton qui change le message lorsque vous cliquez dessus.
Projets simples sur Vue.js 💡
1. Compteur de clics 🖱️
Une application Vue simple qui augmente le compteur lorsque vous cliquez sur le bouton.
📄 Fichier index.html
<div id="counter">
<p>Счетчик: {{ count }}</p>
<button @click="count++">+1</button>
<button @click="count--">-1</button>
</div>📄 Fichier app.js
const counterApp = createApp({
data() {
return {
count: 0
};
}
});
counterApp.mount("#counter");2. Liste dynamique des tâches ✅
Une application qui vous permet d'ajouter et de supprimer des tâches.
📄 Fichier index.html
<div id="todo-app">
<input v-model="newTask" placeholder="Enter a task">
<button @click="addTask">Добавить</button>
<ul>
<li v-for="(task, index) in tasks" :key="index">
{{ task }}
<button @click="removeTask(index)">Удалить</button>
</li>
</ul>
</div>📄 Fichier app.js
const todoApp = createApp({
data() {
return {
newTask: "",
tasks: []
};
},
methods: {
addTask() {
if (this.newTask.trim() !== "") {
this.tasks.push(this.newTask);
this.newTask = "";
}
},
removeTask(index) {
this.tasks.splice(index, 1);
}
}
});
todoApp.mount("#todo-app");3. Générateur de nombres aléatoires 🎲
Une application qui génère un nombre aléatoire.
📄 Fichier index.html
<div id="random-number">
<p>Случайное число: {{ number }}</p>
<button @click="generateNumber">Сгенерировать</button>
</div>📄 Fichier app.js
const randomNumberApp = createApp({
data() {
return {
number: 0
};
},
methods: {
generateNumber() {
this.number = Math.floor(Math.random() * 100) + 1;
}
}
});
randomNumberApp.mount("#random-number");Conclusion 🎉
Vue.js est un outil pratique pour créer des interfaces interactives. Nous avons analysé ses bases : données réactives, événements et mise à jour dynamique des éléments. Vous pouvez maintenant développer vos premières applications Vue ! 🚀
Plus tu t'entraînes, meilleur devient ton code. Expérimentez, essayez de nouvelles tâches et maîtrisez la programmation ! Bonne chance pour apprendre Vue.js ! 😊