Введение в фреймворк Vue

Vue является одним из самых популярных JavaScript фреймворков. Фреймворк представляет собой заготовку, которая помогает вам писать код.

Как он это делает: фреймворк заставляет вас следовать определенным соглашениям по написанию кода, в результате этого все ваши проекты становится проще разрабатывать, а самое главное - проще поддерживать в дальнейшем.

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

Фреймворки типа Vue используются для так называемых SPA (single page application - одностраничное приложение). Одностраничное приложение - это сайт, все действия в котором происходят на одной странице, без ее полного обновления.

Примером SPA может служить социальная сеть, работа с почтой и так далее.

Подключение Vue
Подключение Vue описано тут ru.vuejs.org.

Как запустить Vue
Для запуска Vue нужно создать новый объект класса Vue. Этот класс доступен после подключения Vue.

Давайте создадим новый объект этого класса:

let app = new Vue;
Однако, просто создать объект мало - необходимо передать начальные настройки. Эти настройки передаются в виде объекта {}:

let app = new Vue({
настройка1: 'значение настройки',
настройка2: 'значение настройки',
настройка3: 'значение настройки',
});
Самой главной настройкой является настройка el - в нее мы должны передать селектор того элемента, в котором будет работать наш Vue:

let app = new Vue({
el: 'селектор элемента',
});
Пусть у нас есть элемент с #app (то есть элемент с таким id). Давайте передадим его в качестве настройки параметра el при создании нашего объекта Vue:

let app = new Vue({
el: '#app',
});
Создадим также наш див #app:

<div id="app"></div>
Соберем все вместе и получим минимально необходимые настройки для запуска Vue:

<div id="app"></div>
let app = new Vue({
el: '#app',
});
Если запустить этот код - он не сделает ничего полезного и ничего не выведет на экран. Чтобы сделать этот код более полезным, нужно добавить еще парочку настроек. Их мы разберем в следующем уроке.