Компонент — это обособленная группа кода, которая является самодостаточной, и направлена на решение какой-либо одной задачи. Компоненты позволяют расширить базовый набор HTML-элементов, путем добавления новых, инкапсулируя при это их внутреннюю структуру. То есть, мы можем взять группу базовых HTML-тегов, добавить к ним необходимые CSS стили и логику на JavaScript, и упаковать все это в новый HTML-компонент для повторного использования в любом месте приложения.

Предыдущая статья: Знакомство с SCSS при работе с Vue.js

Создание компонентов очень важная тема при работе с одностраничными JavaScript приложениями, потому что они очень быстро разрастаются и становятся очень сложными. А основной принцип, которым мы должны руководствоваться при разработке приложения, это контроль сложности. Большую и сложную систему необходимо разделять на небольшие самостоятельные части, которые можно легко изменять независимо друг от друга. «Разделяй и властвуй». И с этой задачей прекрасно справляются компоненты.

Для начала создадим в папке App новую папку Components, в которую и будем помечать все отдельные файлы компонентов. В созданной папке добавим файл test-scss.vue со следующим содержимым.

В App.vue оставим только следующий код. Обратите внимание, что мы указали пока еще до конце не созданные компонент <test-scss>. Именно на это место будет подставлено содержимое, которое мы перенесли в отдельный файл.

Теперь идем в файл index.js, чтобы зарегистрировать созданный нами компонент и сделать его доступным для использования. Импортируем его с помощью команды import TestScss from ‘./Components/test-scss.vue’. Здесь мы указываем, что содержимое из созданного нами файла будет доступно под именем TestScss. И теперь непосредственно регистрируем компонент командой Vue.component(‘test-scss’, TestScss). Соответственно первый параметр это имя, по которому мы будем обращаться к компоненту (<test-scss>), а второй это сам компонент.

В итоге получаем ожидаемый результат.

Теперь перенесем в этот компонент все, что мы делали в предыдущем уроке, чтобы не загромождать App.vue, но при этом не потерять код. Обратите внимание, что необходимо изменить путь к файлам при импортировании (@import ‘../variables.scss’ и @import ‘../_h2partial’) , так как теперь путь ведется из другой папки.

test-scss.vue

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

Но давайте рассмотрим более серьезный компонент. Для начала подключим CSS-фреймворк Bootstrap 4 версии. Он уже включен в набор наших пакетов, и нам достаточно добавить ссылку на в фале _Layout.cshtml.

Теперь создадим еще один компонент question.vue в папке App/Components со следующим содержимым.

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

А вот так мы объявляем переменные в области данных:

Мы также можем сохранять значение из поля ввода в переменных, для этого мы должны указать связь переменной и элемента формы с помощью команды v-model=»», в качестве аргумента указывается имя переменной. При изменении данных в поле ввода, они будут автоматически синхронизироваться с переменной, и наоборот.

Ну и наконец мы можем объявлять методы и связывать их с событиями. Например, мы можем на добавить обработчик события на нажатие по ссылке с помощью команды @click=»». В качестве аргумента указывается имя метода и при необходимости параметры.

Сами же методы реализуются в блоке methods.

Аналогично тому, как мы ранее делали регистрируем новый компонент, а старый пока удалим за ненадобностью. Проверим результат работы приложения.

Исходный код доступен в репозитоии github.

P.S. Присоединяйся в любой удобной для тебя социальной сети. Для меня очень важно оставаться с тобой на связи, ведь у меня есть еще много полезной информации о программировании для тебя, которой я хочу с тобой поделиться.

Вконтакте
Telegram
Facebook
Twitter
Одноклассники
Дзен
Google+
 

shwan

Программист .NET

×
%d такие блоггеры, как: