В Vue JS, как и во многих языках программирования или фреймворках, есть своя терминология и свои понятия. Сегодня мы разберемся с такими терминами в Vue JS, как «функции», «события» и «жизненный цикл».
Функции в Vue JS
Функции в Vue JS налаживают отношения между компонентами кода. Отношение между компонентами означает, что когда в одном из компонентов происходит какое-то изменение, то это может повлечь изменение в другом компоненте или может повлечь выполнение какого-то действия на странице.
Функции в Vue JS — это специальный тип объектов, который позволяет силами фреймворка определять логику поведения компонентов HTML-страницы. По сути, функция — это небольшой фрагмент скрипта, который задается идентификатором, при помощи которого к данной функции можно обратиться из любого места программы. После вызова функции она вступает в управление и выполняет какие-то действия, а после его выполнения она возвращает программе «управление» с того места, где была вызвана.
Функции в Vue JS выполняют роль «кирпичиков», они позволяют применять один и тот же «кусок кода» во многих местах программы, при этом не дублируя сам код.
Функции в Vue JS:
должны быть правильным образом объявлены и определены;
могут быть вызванными в любом месте программы;
способны принимать любые значения;
должны возвращать какое-то значение;
могут определять собственную область видимости;
могут быть вызваны другими функциями.
События в Vue JS
События в Vue JS — это сигнал от обозревателя программы о том, что произошло какое-то действие.
Самые распространенные события в Vue JS:
«click» — данное событие означает, что по заданному элементу произошел левый «клик» мышью;
«contextmenu» — данное событие означает, что по заданному элементу произошел правый «клик» мышью;
«mouseover» или «mouseout» — события в Vue JS, которые означают, что курсор наводится или покидает заданный элемент;
«mousedown» или «mouseup» — события в Vue JS, которые означают, что на заданный элемент нажали или отжали мышью;
«submit» — событие, которое показывает, что произошла отправка формы;
и др.
Событий в Vue очень много. Каждому событию обычно назначается обработчик событий. Обработчик — это некая функция, которая сразу сработает, как только произойдет какое-то событие, связанное с конкретным элементом. В Vue JS для обработки событий часто применяется директива «v-on». По синтаксису после нее сразу идет двоеточие, а после него указывается событие, которое нужно обработать, и действие, что нужно сделать. Например:
v-on:submit=“какое-то действие“
Жизненный цикл в Vue JS
Когда идет разработка какого-то приложения на Vue JS, то весь процесс разработки проходит через определенные этапы жизненного цикла. Применяя различные инструменты, мы можем воздействовать на эти самые этапы.
Жизненный цикл приложения в Vue JS:
Идет вызов конструктора new Vue().
Перед тем как создается объект, происходит вызов метода beforeCreate().
Объект Vue JS проходит инициализацию, также происходит установка его данных и методов.
После того как объект создан, происходит вызов метода created().
Компилируется шаблон.
Происходит вызов метода beforeMount().
Происходит замена html-элемента, за которым закреплен объект Vue, на скомпилированный шаблон.
Происходит вызов метода mounted(), это провоцирует прикрепление шаблона к DOM, а значит, можно работать с этим шаблоном.
Происходят обновления данных объекта Vue, если это необходимо.
Вызывается метод beforeDestroy(), чтобы завершить работу программы.
Вызывается метод destroyed(), что провоцирует удаление объекта Vue из памяти, а это означает, что больше с ним нет возможности взаимодействовать.
Заключение
Вы познакомились с такими терминами, как «функции», «события» и «жизненный цикл» в Vue JS. Более подробно на работе с этим фреймворком мы будет останавливаться в следующих наших статьях.
JavaScript