Вернуться




Vue JS: функции, события и жизненный цикл. Базовая терминология



В 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:

  1. Идет вызов конструктора new Vue().

  2. Перед тем как создается объект, происходит вызов метода beforeCreate().

  3. Объект Vue JS проходит инициализацию, также происходит установка его данных и методов.

  4. После того как объект создан, происходит вызов метода created().

  5. Компилируется шаблон.

  6. Происходит вызов метода beforeMount().

  7. Происходит замена html-элемента, за которым закреплен объект Vue, на скомпилированный шаблон.

  8. Происходит вызов метода mounted(), это провоцирует прикрепление шаблона к DOM, а значит, можно работать с этим шаблоном.

  9. Происходят обновления данных объекта Vue, если это необходимо.

  10. Вызывается метод beforeDestroy(), чтобы завершить работу программы.

  11. Вызывается метод destroyed(), что провоцирует удаление объекта Vue из памяти, а это означает, что больше с ним нет возможности взаимодействовать.

 

Заключение

Вы познакомились с такими терминами, как «функции», «события» и «жизненный цикл» в Vue JS. Более подробно на работе с этим фреймворком мы будет останавливаться в следующих наших статьях.



Если вам понравилась эта статья поделитесь ею с друзьями, тем самым вы помогаете нам развиваться и добавлять всё больше интересного и полезного контента!




Cхожие статьи





Учебный курс по React, часть 1: обзор курса, причины популярности React, ReactDOM и JSX

Учебный курс по React, часть 1: обзор курса, причины популярности React, ReactDOM и JSX

Представляем вашему вниманию первое занятие учебного курса по React для нач ...

21 Февраля 2021    JavaScript

Учебный курс по React, часть 2: функциональные компоненты

Учебный курс по React, часть 2: функциональные компоненты

 Cегодня мы представляем вашему внимание продолжение курса. Здесь мы погово ...

21 Февраля 2021    JavaScript

Учебный курс по React, часть 3: файлы компонентов, структура проектов

Учебный курс по React, часть 3: файлы компонентов, структура проектов

В этом материале мы поговорим о файлах компонентов и о структуре React-прое ...

21 Февраля 2021    JavaScript



Напишем