Что такое Vue.js? 💡
Vue.js — это прогрессивный фреймворк JavaScript, который помогает создавать динамичные интерфейсы и одностраничные приложения. Vue прост в освоении, но при этом мощен. 🚀
Почему стоит изучать Vue.js? 🎯
Легкость: простая настройка через CDN.
Реактивность: данные автоматически обновляют интерфейс.
Гибкость: можно использовать как в небольших проектах, так и в сложных приложениях.
Большая экосистема: Vue поддерживает маршрутизацию и управление состоянием.
Как подключить Vue.js через CDN? 💻
Самый простой способ использовать Vue.js — подключить его через CDN. Добавь этот код в HTML-файл:
📄 Файл 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>📄 Файл app.js
const { createApp } = Vue;
const app = createApp({
data() {
return {
message: "Vue.js"
};
},
methods: {
changeMessage() {
this.message = "Мир Vue!";
}
}
});
app.mount("#app");Как это работает? 🧐
Мы подключили Vue через
CDN.Создали объект Vue с
data(), который содержит переменнуюmessage.Используем
{{ message }}для динамического отображения данных.Добавили кнопку, которая меняет сообщение при клике.
Простые проекты на Vue.js 💡
1. Счетчик кликов 🖱️
Простой Vue-приложение, которое увеличивает счетчик при клике на кнопку.
📄 Файл index.html
<div id="counter">
<p>Счетчик: {{ count }}</p>
<button @click="count++">+1</button>
<button @click="count--">-1</button>
</div>📄 Файл app.js
const counterApp = createApp({
data() {
return {
count: 0
};
}
});
counterApp.mount("#counter");2. Динамический список задач ✅
Приложение, которое позволяет добавлять и удалять задачи.
📄 Файл index.html
<div id="todo-app">
<input v-model="newTask" placeholder="Введите задачу">
<button @click="addTask">Добавить</button>
<ul>
<li v-for="(task, index) in tasks" :key="index">
{{ task }}
<button @click="removeTask(index)">Удалить</button>
</li>
</ul>
</div>📄 Файл 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. Генератор случайных чисел 🎲
Приложение, которое генерирует случайное число.
📄 Файл index.html
<div id="random-number">
<p>Случайное число: {{ number }}</p>
<button @click="generateNumber">Сгенерировать</button>
</div>📄 Файл app.js
const randomNumberApp = createApp({
data() {
return {
number: 0
};
},
methods: {
generateNumber() {
this.number = Math.floor(Math.random() * 100) + 1;
}
}
});
randomNumberApp.mount("#random-number");Заключение 🎉
Vue.js — это удобный инструмент для создания интерактивных интерфейсов. Мы разобрали его основы: реактивные данные, события и динамическое обновление элементов. Теперь ты можешь разрабатывать свои первые Vue-приложения! 🚀
Чем больше ты практикуешься, тем лучше становится твой код. Экспериментируй, пробуй новые задачи и осваивай программирование! Удачи в изучении Vue.js! 😊
Проходи практические уроки!
Получи сертификат!
Не нашли нужной статьи?
Напишите нам и ее сделаем!
Проходи практические уроки!
Получи сертификат!