Что такое Vue

Добро пожаловать в Vue! Vue (произносится как «вью») — это фреймворк на JavaScript для создания веб-приложений, то есть страниц, которые реагируют на ваши действия. Фреймворк — это готовый код, на котором строится приложение: он делает работу, нужную любому приложению, а вы пишете то, что делает ваше приложение особенным. Vue используют многие компании, и он известен тем, что с ним легко начать. На этом курсе вы шаг за шагом создадите приложение для заказа в кафе «Уголок»: его меню, заказ покупателя и итоговую сумму.

В редакторе уже есть небольшое приложение на Vue. Нажмите «Запустить»: в предпросмотре появится меню кафе. Нажмите «Добавить» рядом с несколькими напитками и следите за числами под меню.

Вспомните, как вы меняли страницу на курсе JavaScript: находили элемент через querySelector(), меняли его textContent и создавали новые элементы через createElement(). Вы шаг за шагом говорили странице, что менять.

Vue работает наоборот. Вы пишете шаблон: HTML, который описывает, что показывает страница, с местами для ваших данных. Vue собирает страницу из шаблона и данных, а когда данные меняются, сам обновляет страницу. Загляните в App.vue: напитки лежат в массиве menu, и список на странице строится из него. Ни querySelector(), ни textContent там нет. Функция addToOrder лишь меняет два числа, count и total, а Vue показывает их новые значения.

Не переживайте, если пока не понимаете каждую строку App.vue. Список, собранный с помощью v-for, вы разберёте в уроке «Условия и списки», а кнопку с @click — в уроке «Состояние и события». К концу курса вы напишете всё приложение сами, и не только его.