# Введение

Примечание

Уже изучили Vue 2 и хотите узнать что нового во Vue 3? Посмотрите руководство по миграции!

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

Vue (произносится /vjuː/, примерно как view) — прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от фреймворков-монолитов, Vue создавался пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), упрощая интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для разработки сложных одностраничных приложений (SPA, Single-Page Applications), если использовать его в комбинации с современными инструментами и дополнительными библиотеками (opens new window).

Если хотите узнать больше о Vue перед тем как начать — посмотрите видео с рассказом об основных принципах работы на небольшом примере проекта.

Посмотрите бесплатный видео-курс на Vue Mastery

# Начало работы

Установка

Совет

Руководство предполагает знания HTML, CSS и JavaScript на среднем уровне. Для новичков во фронтенд-разработке начинать изучение сразу с фреймворка может быть не лучшей идеей — возвращайтесь, разобравшись с основами! Наличие опыта работы с другими фреймворками может помочь, но не является обязательным.

Самый простой способ попробовать Vue.js — начать с примера Hello World (opens new window). Открывайте его в соседней вкладке и практикуйтесь, изменяя по ходу изучения руководства.

На странице установки есть несколько вариантов как можно устанавливать Vue. Примечание: не рекомендуется начинающим программистам стартовать с vue-cli, особенно если ещё не знакомы с инструментами сборки на основе Node.js.

# Декларативная отрисовка

В ядре Vue.js находится система, которая позволяет декларативно отрисовывать данные в DOM с помощью простого синтаксиса шаблонов:

<div id="counter">
  Счётчик: {{ counter }}
</div>
1
2
3
const Counter = {
  data() {
    return {
      counter: 0
    }
  }
}

Vue.createApp(Counter).mount('#counter')
1
2
3
4
5
6
7
8
9

Вот и создано первое Vue-приложение! Хоть и выглядит как простая отрисовка строкового шаблона, но «под капотом» Vue выполнил немало работы. Данные и DOM теперь реактивно связаны. Как в этом убедиться? Посмотрите на пример ниже, где свойство counter увеличивается каждую секунду и увидите, как изменяется DOM:








 
 
 



const CounterApp = {
  data() {
    return {
      counter: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.counter++
    }, 1000)
  }
}
1
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>
1
2
3
4
5
6
const AttributeBinding = {
  data() {
    return {
      message: 'Страница загружена ' + new Date().toLocaleString()
    }
  }
}

Vue.createApp(AttributeBinding).mount('#bind-attribute')
1
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>
1
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')
1
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>
1
2
3
4
const TwoWayBinding = {
  data() {
    return {
      message: 'Привет, Vue!'
    }
  }
}

Vue.createApp(TwoWayBinding).mount('#two-way-binding')
1
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>
1
2
3
const ConditionalRendering = {
  data() {
    return {
      seen: true
    }
  }
}

Vue.createApp(ConditionalRendering).mount('#conditional-rendering')
1
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>
1
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')
1
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(...)
1
2
3
4
5
6
7
8
9
10

Теперь можно использовать его в шаблоне другого компонента:

<ol>
  <!-- Создание экземпляра компонента todo-item -->
  <todo-item></todo-item>
</ol>
1
2
3
4

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

app.component('todo-item', {
  props: ['todo'],
  template: `<li>{{ todo.text }}</li>`
})
1
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>
1
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')
1
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>
1
2
3
4
5
6
7

# Связь с пользовательскими элементами Web Components

Можно заметить, что компоненты Vue очень похожи на пользовательские элементы, которые являются частью спецификации Web Components (opens new window). Синтаксис компонентов Vue и правда намеренно следует этой спецификации. Например, компоненты Vue реализуют API слотов (opens new window) и специальный атрибут is. Однако, есть несколько ключевых различий:

  1. Спецификация Web Components была завершена, но не реализована во всех браузерах. Safari 10.1+, Chrome 54+ и Firefox 63+ уже поддерживают веб-компоненты. В сравнении, компоненты Vue стабильно работают во всех поддерживаемых браузерах (IE11 со специальной совместимой сборкой и выше). При необходимости компоненты Vue могут быть «обёрнуты» в нативные пользовательские элементы.
  1. Компоненты Vue предоставляют возможности, недоступные в простых пользовательских элементах. Самые важные из них: межкомпонентная передача данных, коммуникация с использованием пользовательских событий и интеграция с инструментами сборок.

Хоть Vue и не использует пользовательские элементы внутри себя, но имеет отличную интероперабельность (opens new window) когда речь заходит об использовании или распространении в качестве пользовательских элементов. Vue CLI также поддерживает сборку компонентов Vue, которые будут регистрировать себя как нативные пользовательские элементы.

# Готовы к большему?

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

Deployed on Netlify.
Последнее обновление: 2021-03-03, 20:35:05 UTC