Русский

Учебник VueJS

Учебник VueJS: Начало работы с Vue.js

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

VueJS - Home

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

Vue.js - это прогрессивный JavaScript-фреймворк для создания пользовательских интерфейсов. Но что это означает на простом языке? Представьте, что вы строите дом. Vue.js - это как наборprefabricated стен и комнат, которые можно легко собрать, чтобы создать свою мечту. Он делает создание сложных веб-приложений настолько простым, как собирание LEGO-кирпичиков!

Why Vue.js?

  1. Легко learn
  2. Гибкий и масштабируемый
  3. Отличная производительность
  4. Awesome community support

Предварительные требования

Прежде чем мы начнем, давайте убедимся, что у нас есть все необходимое:

  • Основное понимание HTML и CSS
  • Знакомство с JavaScript (не волнуйтесь, если вы не expert!)
  • Современный веб-браузер (я рекомендую Chrome или Firefox)
  • Текстовый редактор (VS Code - мой личный фаворит)

Настройка вашего первого проекта Vue.js

Давайте начнем с создания простой программы "Hello, Vue!". Сначала нам нужно включить Vue.js в наш проект. Мы можем сделать это, добавив тег скрипта в наш HTML-файл.

<!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>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
</script>
</body>
</html>

Давайте разберем это:

  1. Мы включаем библиотеку Vue.js с помощью CDN-ссылки.
  2. Мы создаем <div> с идентификатором "app". Это место, где будет жить наше приложение Vue.
  3. Внутри div мы используем {{ message }}. Это называется интерполяцией, и это то, как мы отображаем данные в Vue.
  4. В нашем теге <script> мы создаем новый экземпляр Vue,indicating к элементу с идентификатором "app".
  5. Мы определяем объект data с свойством message. Это данные, которые будет использовать Vue в нашем приложении.

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

Директивы Vue: Добавление интерактивности

Теперь, когда у нас есть базовые знания, давайте сделаем наше приложение немного более интерактивным. Vue предоставляет нам директивы - особые атрибуты, которые дают указания Vue, как себя вести. Давайте рассмотрим несколько распространенных:

v-model: Двусторонняя привязка данных

v-model создает двустороннюю привязку между формами ввода и состоянием приложения. Давайте обновим наше приложение, добавив поле ввода:

<div id="app">
<input v-model="message">
<p>The message is: {{ message }}</p>
</div>

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

Теперь, когда вы вводите текст в поле ввода, вы увидите, как сообщение обновляется в реальном времени. Это как магия, не так ли?

v-if и v-else: Условная отрисовка

Иногда мы хотим отображать или скрывать элементы в зависимости от условия. Вот где v-if и v-else могут помочь:

<div id="app">
<button @click="toggleVisibility">Toggle Message</button>
<p v-if="isVisible">Now you see me!</p>
<p v-else>Now you don't!</p>
</div>

<script>
new Vue({
el: '#app',
data: {
isVisible: true
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible
}
}
})
</script>

В этом примере мы используем v-if и v-else, чтобы переключаться между двумя сообщениями. Директива @click - это краткая запись для v-on:click, которая listens за событиями щелчка.

v-for: Отрисовка списков

Когда нам нужно отобразить список элементов, v-for - это наша goto директива:

<div id="app">
<ul>
<li v-for="fruit in fruits">{{ fruit }}</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
fruits: ['Apple', 'Banana', 'Cherry', 'Durian']
}
})
</script>

Это отобразит список фруктов. Это так просто!

Методы в Vue

Методы - это функции, которые мы можем использовать для добавления поведения нашим экземплярам Vue. Давайте создадим простой счетчик:

<div id="app">
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>

<script>
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
increment() {
this.count++
},
decrement() {
this.count--
}
}
})
</script>

Здесь мы определили два метода: increment и decrement. Эти методы вызываются при щелчке соответствующих кнопок, обновляя是我们的 property count.

Вычисляемые свойства: Умные вычисления

Вычисляемые свойства - это как super-powered данные свойства. Они могут выполнять сложные вычисления и кэшируются на основе своих зависимостей. Давайте посмотрим пример:

<div id="app">
<input v-model="firstName">
<input v-model="lastName">
<p>Full Name: {{ fullName }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
firstName: '',
lastName: ''
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
})
</script>

Здесь fullName - это вычисляемое свойство, которое combines firstName и lastName. Оно автоматически обновляется, когда изменяется любая из его зависимостей.

Итог методов Vue.js

Вот таблица, резюмирующая методы Vue.js, которые мы рассмотрели:

Method Description Example
data Holds the data for the Vue instance data: { message: 'Hello' }
methods Contains functions to add behavior methods: { greet() { alert('Hi!') } }
computed Cached properties that update when dependencies change computed: { fullName() { return this.firstName + ' ' + this.lastName } }
el Specifies the element to mount the Vue instance on el: '#app'

Заключение

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

Помните, что обучение кодированию похоже на обучение новому языку - это требует практики и терпения. Не отчаивайтесь, если все не срабатывает сразу. Продолжайте экспериментировать, продолжайте строить и, самое главное, продолжайте наслаждаться!

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

Credits: Image by storyset

 
Следующий учебник:
VueJS - Обзор