Was ist Vue.js? 💡
Vue.js ist ein progressives JavaScript-Framework, das beim Erstellen von dynamische Schnittstellen und Einseitige Anwendungen. Vue ist einfach zu erlernen, aber dennoch leistungsstark. 🚀
Warum Vue.js lernen? 🎯
Leichtigkeit: einfache Einrichtung über CDN.
Reaktivität: Die Daten aktualisieren automatisch die Benutzeroberfläche.
Flexibilität: kann sowohl in kleinen Projekten als auch in komplexen Anwendungen eingesetzt werden.
Großes Ökosystem: Vue unterstützt Routing und Zustandsverwaltung.
Wie verbinde ich Vue.js über CDN? 💻
Der einfachste Weg, Vue.js zu verwenden, besteht darin, es über CDN zu verbinden. Füge diesen Code zu einer HTML-Datei hinzu:
📄 Datei 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>📄 Datei app.js
const { createApp } = Vue;
const app = createApp({
data() {
return {
message: "Vue.js"
};
},
methods: {
changeMessage() {
this.message = "Hello Vue!";
}
}
});
app.mount("#app");Wie funktioniert das? 🧐
Wir haben Vue über
CDNverbunden.Erstellen Sie ein Vue-Objekt mit
data(), das die Variablemessageenthält.Wir verwenden
{{ message }}für die dynamische Datenanzeige.Wir haben eine Schaltfläche hinzugefügt, die die Nachricht ändert, wenn Sie darauf klicken.
Einfache Projekte in Vue.js 💡
1. Klickzähler 🖱️
Eine einfache Vue-Anwendung, die den Zähler erhöht, wenn Sie auf die Schaltfläche klicken.
📄 Datei index.html
<div id="counter">
<p>Счетчик: {{ count }}</p>
<button @click="count++">+1</button>
<button @click="count--">-1</button>
</div>📄 Datei app.js
const counterApp = createApp({
data() {
return {
count: 0
};
}
});
counterApp.mount("#counter");2. Dynamische Aufgabenliste ✅
Eine Anwendung, mit der Sie Aufgaben hinzufügen und entfernen können.
📄 Datei 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>📄 Datei 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. Zufallszahlengenerator 🎲
Eine Anwendung, die eine Zufallszahl generiert.
📄 Datei index.html
<div id="random-number">
<p>Случайное число: {{ number }}</p>
<button @click="generateNumber">Сгенерировать</button>
</div>📄 Datei app.js
const randomNumberApp = createApp({
data() {
return {
number: 0
};
},
methods: {
generateNumber() {
this.number = Math.floor(Math.random() * 100) + 1;
}
}
});
randomNumberApp.mount("#random-number");Fazit 🎉
Vue.js ist ein praktisches Tool zum Erstellen interaktiver Benutzeroberflächen. Wir haben uns mit den Grundlagen befasst: reaktive Daten, Ereignisse und dynamische Aktualisierung von Elementen. Jetzt kannst du deine ersten Vue-Anwendungen entwickeln! 🚀
Je mehr du übst, desto besser wird dein Code. Experimentiere, probiere neue Aufgaben aus und lerne Programmieren! Viel Glück beim Erlernen von Vue.js! 😊