What is Vue.js? 💡
Vue.js is a progressive JavaScript framework that helps you create dynamic interfaces and single-page applications. Vue is easy to learn, but powerful. 🚀
Why study Vue.js? 🎯
Lightness: simple setup via CDN.
Reactivity: data automatically updates the interface.
Flexibility: can be used both in small projects and in complex applications.
Large ecosystem: Vue supports routing and state management.
How to connect Vue.js via CDN? 💻
The easiest way to use Vue.js is to connect it via CDN. Add this code to the HTML file:
📄 File 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>📄 File app.js
const { createApp } = Vue;
const app = createApp({
data() {
return {
message: "Vue.js"
};
},
methods: {
changeMessage() {
this.message = "Hello Vue!";
}
}
});
app.mount("#app");How does it work? 🧐
We connected Vue via
CDN.Created a Vue object with
data()that contains the variablemessage.We use
{{ message }}for dynamic data display.Added a button that changes the message when clicked.
Simple projects on Vue.js 💡
1. Click counter 🖱️
A simple Vue application that increases the counter when you click on the button.
📄 File index.html
<div id="counter">
<p>Счетчик: {{ count }}</p>
<button @click="count++">+1</button>
<button @click="count--">-1</button>
</div>📄 File app.js
const counterApp = createApp({
data() {
return {
count: 0
};
}
});
counterApp.mount("#counter");2. Dynamic task list ✅
An application that allows you to add and remove tasks.
📄 File 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>📄 File 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. Random number generator 🎲
An application that generates a random number.
📄 File index.html
<div id="random-number">
<p>Случайное число: {{ number }}</p>
<button @click="generateNumber">Сгенерировать</button>
</div>📄 File 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 is a convenient tool for creating interactive interfaces. We have analyzed its basics: reactive data, events, and dynamic updating of elements. Now you can develop your first Vue applications! 🚀
The more you practice, the better your code becomes. Experiment, try new tasks and master programming! Good luck learning Vue.js! 😊