# Введение
Примечание
Уже изучили Vue 2 и хотите узнать что нового во Vue 3? Посмотрите руководство по миграции!
# Что такое Vue.js?
Vue (произносится /vjuː/, примерно как view) — прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от фреймворков-монолитов, Vue создавался пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), упрощая интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для разработки сложных одностраничных приложений (SPA, Single-Page Applications), если использовать его в комбинации с современными инструментами и дополнительными библиотеками (opens new window).
Если хотите узнать больше о Vue перед тем как начать — посмотрите видео с рассказом об основных принципах работы на небольшом примере проекта.
# Начало работы
Совет
Руководство предполагает знания HTML, CSS и JavaScript на среднем уровне. Для новичков во фронтенд-разработке начинать изучение сразу с фреймворка может быть не лучшей идеей — возвращайтесь, разобравшись с основами! Наличие опыта работы с другими фреймворками может помочь, но не является обязательным.
Самый простой способ попробовать Vue.js — начать с примера Hello World (opens new window). Открывайте его в соседней вкладке и практикуйтесь, изменяя по ходу изучения руководства.
На странице установки есть несколько вариантов как можно устанавливать Vue. Примечание: не рекомендуется начинающим программистам стартовать с vue-cli
, особенно если ещё не знакомы с инструментами сборки на основе Node.js.
# Декларативная отрисовка
В ядре Vue.js находится система, которая позволяет декларативно отрисовывать данные в DOM с помощью простого синтаксиса шаблонов:
<div id="counter">
Счётчик: {{ counter }}
</div>
2
3
const Counter = {
data() {
return {
counter: 0
}
}
}
Vue.createApp(Counter).mount('#counter')
2
3
4
5
6
7
8
9
Вот и создано первое Vue-приложение! Хоть и выглядит как простая отрисовка строкового шаблона, но «под капотом» Vue выполнил немало работы. Данные и DOM теперь реактивно связаны. Как в этом убедиться? Посмотрите на пример ниже, где свойство counter
увеличивается каждую секунду и увидите, как изменяется DOM:
const CounterApp = {
data() {
return {
counter: 0
}
},
mounted() {
setInterval(() => {
this.counter++
}, 1000)
}
}
2
3
4
5
6
7
8
9
10
11
12
Counter: 0
Кроме интерполяции текста, можно также связывать данные с атрибутами элементов:
<div id="bind-attribute">
<span v-bind:title="message">
Наведи на меня курсор на пару секунд,
чтобы увидеть динамически связанное значение title!
</span>
</div>
2
3
4
5
6
const AttributeBinding = {
data() {
return {
message: 'Страница загружена ' + new Date().toLocaleString()
}
}
}
Vue.createApp(AttributeBinding).mount('#bind-attribute')
2
3
4
5
6
7
8
9
See the Pen Attribute dynamic binding by Vue (@Vue) on CodePen.
Здесь встречаемся с чем-то новым. Атрибут v-bind
называется директивой. Директивы имеют префикс v-
, обозначающий что это специальные атрибуты Vue, и как уже могли догадаться, они добавляют особое реактивное поведение отрисованному DOM. В данном примере директива говорит «сохраняй значение title
этого элемента актуальным при изменении свойства message
в текущем активном экземпляре».
# Работа с пользовательским вводом
Чтобы позволить пользователям взаимодействовать с приложением, можно использовать директиву v-on
для обработчиков событий, которые будут вызывать методы экземпляра:
<div id="event-handling">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Перевернуть сообщение</button>
</div>
2
3
4
const EventHandling = {
data() {
return {
message: 'Привет, Vue.js!'
}
},
methods: {
reverseMessage() {
this.message = this.message
.split('')
.reverse()
.join('')
}
}
}
Vue.createApp(EventHandling).mount('#event-handling')
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
See the Pen Event handling by Vue (@Vue) on CodePen.
Обратите внимание, в методе обновляем только состояние приложения и не трогаем DOM — всеми манипуляциями с DOM занимается Vue, а код фокусируется на логике работы.
Vue также предоставляет директиву v-model
, которая реализует двустороннюю привязку между элементом формы и состоянием приложения:
<div id="two-way-binding">
<p>{{ message }}</p>
<input v-model="message" />
</div>
2
3
4
const TwoWayBinding = {
data() {
return {
message: 'Привет, Vue!'
}
}
}
Vue.createApp(TwoWayBinding).mount('#two-way-binding')
2
3
4
5
6
7
8
9
See the Pen Two-way binding by Vue (@Vue) on CodePen.
# Условия и циклы
Управлять присутствием элемента в DOM тоже просто:
<div id="conditional-rendering">
<span v-if="seen">Сейчас меня видно</span>
</div>
2
3
const ConditionalRendering = {
data() {
return {
seen: true
}
}
}
Vue.createApp(ConditionalRendering).mount('#conditional-rendering')
2
3
4
5
6
7
8
9
Этот пример демонстрирует возможность связывания данных не только с текстом и атрибутами, но и со структурой DOM. Более того, Vue имеет мощную систему анимаций, которая может автоматически применять эффекты переходов при добавлении, обновлении или удалении элементов.
Можно изменить в примере ниже значение seen
с true
на false
чтобы увидеть эффект:
See the Pen Conditional rendering by Vue (@Vue) on CodePen.
Существует и некоторое количество других директив, каждая из которых обладает своей особой функциональностью. Например, директиву v-for
можно использовать для отображения списка элементов, используя данные из массива:
<div id="list-rendering">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
2
3
4
5
6
7
const ListRendering = {
data() {
return {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
}
}
Vue.createApp(ListRendering).mount('#list-rendering')
2
3
4
5
6
7
8
9
10
11
12
13
See the Pen List rendering by Vue (@Vue) on CodePen.
# Композиция приложения из компонентов
Компонентная система является ещё одной важной концепцией во Vue, потому что это абстракция, которая позволяет создавать большие приложения, состоящие из небольших, автономных и часто переиспользуемых компонентов. Если задуматься, то практически любой тип интерфейса приложения можно абстрактно представить деревом компонентов:
Компонент во Vue, по сути является экземпляром с предустановленными опциями. Его регистрация также проста: нужно создать объект компонента, как это делали с объектами App
, и указать его в родительской опции components
:
// Создаём приложение Vue
const app = Vue.createApp(...)
// Определяем новый компонент с именем todo-item
app.component('todo-item', {
template: `<li>Это одна из задача</li>`
})
// Монтируем приложение Vue
app.mount(...)
2
3
4
5
6
7
8
9
10
Теперь можно использовать его в шаблоне другого компонента:
<ol>
<!-- Создание экземпляра компонента todo-item -->
<todo-item></todo-item>
</ol>
2
3
4
Пока выходит так, что во всех элементах списка будет один и тот же текст, что не очень-то интересно. Должна быть возможность передать данные в дочерние компоненты из родительской области видимости. Доработаем определение компонента, чтобы он принимал входной параметр:
app.component('todo-item', {
props: ['todo'],
template: `<li>{{ todo.text }}</li>`
})
2
3
4
Теперь можно передавать свой текст для каждого из компонентов с помощью v-bind
:
<div id="todo-list-app">
<ol>
<!--
Теперь мы можем передать каждому компоненту todo-item объект
с информацией о задаче, который может динамически изменяться.
Также для каждого компонента определяем "key",
значение которого разберём далее в руководстве.
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const TodoList = {
data() {
return {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
}
}
const app = Vue.createApp(TodoList)
app.component('todo-item', {
props: ['todo'],
template: `<li>{{ todo.text }}</li>`
})
app.mount('#todo-list-app')
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
See the Pen Intro-Components-1 by Vue (@Vue) on CodePen.
Конечно, это слегка надуманный пример, но удалось разделить приложения на два блока поменьше. Дочерний компонент достаточно хорошо отделён от родительского с помощью интерфейса входных параметров. Теперь можно улучшать компонент <todo-item>
, усложняя его шаблон и логику и не затрагивать работу родительского приложения.
В больших приложениях разделение на компоненты становится необходимостью для сохранения управляемости разработки. Гораздо подробнее с компонентами продолжим разбираться далее в руководстве, но и сейчас можно взглянуть на (вымышленный) пример того, как может выглядеть шаблон приложения, использующего компоненты:
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
2
3
4
5
6
7
# Связь с пользовательскими элементами Web Components
Можно заметить, что компоненты Vue очень похожи на пользовательские элементы, которые являются частью спецификации Web Components (opens new window). Синтаксис компонентов Vue и правда намеренно следует этой спецификации. Например, компоненты Vue реализуют API слотов (opens new window) и специальный атрибут is
. Однако, есть несколько ключевых различий:
- Спецификация Web Components была завершена, но не реализована во всех браузерах. Safari 10.1+, Chrome 54+ и Firefox 63+ уже поддерживают веб-компоненты. В сравнении, компоненты Vue стабильно работают во всех поддерживаемых браузерах (IE11 со специальной совместимой сборкой и выше). При необходимости компоненты Vue могут быть «обёрнуты» в нативные пользовательские элементы.
- Компоненты Vue предоставляют возможности, недоступные в простых пользовательских элементах. Самые важные из них: межкомпонентная передача данных, коммуникация с использованием пользовательских событий и интеграция с инструментами сборок.
Хоть Vue и не использует пользовательские элементы внутри себя, но имеет отличную интероперабельность (opens new window) когда речь заходит об использовании или распространении в качестве пользовательских элементов. Vue CLI также поддерживает сборку компонентов Vue, которые будут регистрировать себя как нативные пользовательские элементы.
# Готовы к большему?
Пока лишь вкратце ознакомились с основными функциями ядра Vue.js — в следующих частях руководства разберём подробнее эти и другие возможности, поэтому не забудьте прочитать его целиком!