Русский

Учебник VueJS

Введение в VueJS

Здравствуйте, будущие веб-разработчики! Я рад стать вашим проводником в увлекательное путешествие в мир Vue.js. Как alguien, кто преподавал программирование более десяти лет, я могу сказать, что Vue.js является одним из самых удобных для начинающих фреймворков. Давайте окунемся и узнаем, почему Vue.js стал любимцем среди разработчиков по всему миру!

VueJS - Introduction

Что такое Vue.js?

Vue.js - это прогрессивный JavaScript-фреймворк, используемый для создания пользовательских интерфейсов. Я знаю, это может показаться немного пугающим, но представьте это как ящик с полезными приспособ, которые делают создание интерактивных веб-сайтов breeze.

Когда я впервые encountered Vue.js, он напомнил мне сборку LEGO-блоков. Вы начинаете с маленьких, управляемых частей и постепенно создаете что-то惊人的. В этом и заключается красота Vue.js - он доступен, универсален и мощен.

Why Choose Vue.js?

  1. Легко learn: Если JavaScript был бы языком, то Vue.js был бы его дружелюбным диалектом, который легко освоить.
  2. Гибкость: Он адаптируется к вашим потребностям, будь то создание простого виджета или сложного приложения.
  3. Производительность: Он легкий и быстрый, как спортивный автомобиль, но для веб-разработки.
  4. Поддержка сообщества: Always есть кто-то, кто готов помочь, когда вы застряли.

Теперь давайте脏 руки с кодом!

Ваше первое приложение Vue.js

Пример

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Vue App</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
</script>
</body>
</html>

Вывод

Когда вы откроете этот HTML-файл в браузере, вы увидите:

Hello, Vue!

Подробности консоли

Если вы откроете консоль браузера, вы не увидите никаких ошибок. Это хороший старт!

Разбор кода

Давайте разложим этот код, как будто мы на увлекательном занятии по анатомии:

  1. HTML Structure: У нас есть базовый HTML-документ. Ничегострашного здесь!

  2. Скрипт Vue.js:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

    Эта строка как будто мы зовем Vue.js на наш праздник. Она загружает библиотеку Vue.js с CDN.

  3. Контейнер приложения:

    <div id="app">
{{ message }}
</div>

    Этот <div> - это место, где будет жить наше приложение Vue. Двойные фигурные скобки {{ }} - это способ Vue сказать: "Эй, я собираюсь поместить здесь nějakой динамический контент!"

  4. Инстанс Vue:

    var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})

    Вот где happens магия! Давайте разберем это подробнее:

  • new Vue({...}) создает новый инстанс Vue.
  • el: '#app' говорит Vue подключиться к DOM-элементу с ID 'app'.
  • data: { message: 'Hello, Vue!' } как будто мы даем Vue рюкзак с данными, которые он будет носить с собой.

Делаем его интерактивным

Теперь давайте добавим немного остроты. Мы сделаем наше приложение реагировать на ввод пользователя:

Пример

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Vue App</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="message">
<p>The message is: {{ message }}</p>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
</script>
</body>
</html>

Вывод

Вы увидите поле ввода с预先 заполненным текстом "Hello, Vue!" и ниже:

The message is: Hello, Vue!

При вводе в поле ввода, сообщение ниже будет обновляться в реальном времени!

Подробности консоли

Опять же, ваша консоль должна быть свободна от ошибок. Если вы введете app.message в консоли, вы увидите текущее значение сообщения.

Что происходит здесь?

  1. v-model: Это директива Vue, которая создает двустороннюю привязку данных на полях ввода. Это как магическая нить, соединяющая поле ввода и是我们的 данные message.

  2. Реальные обновления: Vue автоматически обновляет DOM при изменении данных. Не нужно的手动 манипулировать DOM!

Методы в Vue

Давайте добавим немного поведения в наше приложение:

Пример

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue with Methods</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>

Вывод

Вы увидите:

Hello, Vue!
[Reverse Message]

Нажатие на кнопку изменит сообщение!

Подробности консоли

Попробуйте ввести app.reverseMessage() в консоли. Он изменит сообщение так же, как и при нажатии на кнопку!

Понимание методов

  1. Объект methods: Это место, где мы определяем функции, добавляющие поведение нашему приложению.

  2. v-on:click: Эта директива прикрепляет обработчик событий к кнопке. При нажатии она вызывает наш метод reverseMessage.

  3. this.message: Внутри метода Vue this ссылается на инстанс Vue, позволяя нам доступ к нашим данным и их изменению.

Реактивность Vue в действии

То, что мы только что видели, - это система реактивности Vue в действии. При изменении данных Vue автоматически обновляет DOM. Это как иметь diligente assistant, который сразу обновляет вашу доску, когда вы изменяете свои заметки.

Заключение

Поздравляю! Вы только что сделали свои первые шаги в чудесный мир Vue.js. Мы рассмотрели основы создания инстанса Vue, работы с данными и добавления интерактивности с помощью методов.

Запомните, обучение программированию похоже на обучение готовить. Вы начинаете с простых рецептов (как наши примеры), и перед вами знаете это, вы создаете сложные,美味的 приложения, которые удивляют всех!

В следующем уроке мы рассмотрим больше функций Vue, такие как вычисляемые свойства и хуки жизненного цикла. Пока что продолжайте экспериментировать с тем, что вы узнали. Попробуйте изменить сообщения, добавить больше свойств данных или создать новые методы. Чем больше вы играете, тем больше вы узнаете!

Счастливого кодирования, будущие мастера Vue! ??‍??‍?

Концепции Vue.js, рассмотренные Описание
Инстанс Vue Сердце приложения Vue, созданное с помощью new Vue({...})
el Подключает инстанс Vue к DOM-элементу
data Объект, содержащий реактивные свойства данных
{{ }} Mustache-синтаксис для текстовой интерполяции
v-model Директива для двусторонней привязки данных
methods Объект, содержащий методы для добавления поведения
v-on Директива для подключения обработчиков событий

Credits: Image by storyset

Предыдущий учебник:
VueJS - Настройка окружения
Следующий учебник:
VueJS - Инстансы