Кодик
Начать бесплатно

Vue.js — легкий и мощный фреймворк для создания интерфейсов! 💡

Vue.js — это современный фреймворк JavaScript для разработки удобных и динамичных интерфейсов. В этой статье ты узнаешь, как подключить Vue через CDN, создать свой первый компонент и написать простые проекты. Всё просто и доступно даже для начинающих! 🚀

ОсновыРазработкаWeb

Что такое 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! 😊