TL;DR
+Vue.JS — это мощная структура на основе состояний, упрощающая веб-разработку
+Используйте привязку классов для чистых адаптивных вкладок
+~v-bind:class=“{'tab-selected ':currentTab=='credCard'}”~
+Ресурс: https://vuejs.org/v2/guide/class-and-style.html

Любой, кто провел какое-то время в мире веб-разработки с использованием HTML, CSS и JavaScript, понимает, что я имею в виду, когда говорю, что это «Дикий Запад» разработки, и без современных фреймворков было легко сделать некоторые из самых взломанных вместе, запутанный, код возможен. Однако с появлением современных фреймворков JS это (в основном) изменилось.

Теперь я знаю, что сторонники React или Angular могут сказать, что Vue — это дикий запад среди фреймворков, но я нашел его довольно освежающим для разработки, с достаточной структурой, чтобы попасть в мою золотую середину. На данный момент я не разбираюсь в других фреймворках JS, поэтому не могу сказать, насколько они близки к тому, что я собираюсь описать. Но я обнаружил, что Vue сделал некоторые компоненты элегантными и приятными для разработки, которые в противном случае были бы кошмаром.

Я разрабатываю этот пользовательский компонент транзакции для клиента, который будет управлять несколькими различными типами транзакций. Мы вошли в него, не задавая вопросов о необходимости разных вкладок, содержащих разные типы. Первоначально я думал, что потребуется какая-то глупая группировка идентификаторов элементов таким образом, чтобы я мог запрашивать их и манипулировать ими. Тем не менее, большая часть моего опыта и исследований была проведена до Vue, и я вспомнил, что у Vue есть несколько хитрых инструментов для упрощения этого. Теперь я мог заставить каждый элемент реагировать сам по себе, индивидуально обновляя базовую переменную состояния и изменяя их стиль с помощью привязки, связанной с этой переменной.

Конкретная функция, за которую я выступаю сегодня, — это привязка HTML-класса Vue. И это особенно эффективно, когда вы работаете с группой зависимо реагирующих элементов, таких как эти вкладки. Сначала давайте поговорим о том, как я мог изначально сделать это с помощью базового JavaScript. (Отказ от ответственности: я не являюсь «мастером JavaScript»). Вероятно, есть лучшие способы сделать это, о которых я не знаю, но в базовом JS я, вероятно, сделал бы свою функцию щелчка (прикрепленную к каждой вкладке) принимающей цель события и измените его стиль, чтобы он соответствовал выбранной вкладке, а затем получите список всех вкладок по идентификатору, который будет циклически обновляться для обновления стиля на других вкладках. Это может выглядеть примерно так (в формате метода Vue):

Это может выглядеть довольно просто, но помните, что этот дополнительный код загромождает действие клика (которое должно управлять только событиями и изменениями состояния). Кроме того, не забывайте, что вам нужно будет вести список различных идентификаторов вкладок и следить за тем, чтобы вы не отставали от стиля, который находится за пределами вашего CSS. Лично я считаю, что это больше похоже на молоток, чем на гаечный ключ.

Теперь, что вы можете сделать с Vue? Если вы не знакомы с Vue или реактивными фреймворками в целом, вы можете прочитать введение в руководство по Vue: https://vuejs.org/v2/guide/index.html. В противном случае я предлагаю вам просмотреть раздел Привязки классов и стилей: https://vuejs.org/v2/guide/class-and-style.html, чтобы ознакомиться с этими конкретными концепциями. Я специально буду использовать привязки классов, чтобы сделать мои вкладки простыми и реактивными. Короче говоря, эти привязки позволяют применять классы CSS на основе переменной компонента или вычисляемого свойства. В этом примере мы бы написали элементы примерно так:

Ключевой частью является ~v-bind:class="{**style** : **logic**}" ~ часть. Внутри этого объявления мы можем манипулировать классами, которые можно добавить к нашему элементу. Разрешение манипулирования стилем ограничиваться самим элементом.

Наш базовый класс вкладок может иметь обычный стиль как таковой, и нам не нужно напрямую манипулировать стилем, специфичным для элемента, извне. Затем нам просто нужно добавить класс «выбранный с помощью табуляции», которым привязка управляет в зависимости от состояния приложения. Этот выбранный класс будет содержать только манипуляции со стилем, характерные для выбранной вкладки. Добавьте это к привязке перед двоеточием (одинарные кавычки, если это kebab-case): ~v-bind:class="{'tab-selected':**logic**}"~.

Когда все стили определены, последняя часть добавляет основную логику, необходимую для управления состоянием вкладок. Для этого мы сначала вернемся к событию клика. Поскольку Vue основан на состоянии, мы хотим иметь переменную, которая содержит идентификатор текущей выбранной вкладки. Я назвал эту переменную состояния «currentTab». Когда вкладка нажата, нам просто нужно событие щелчка, чтобы обновить эту переменную, чтобы отразить изменение состояния. Это должно выглядеть примерно так:

Как и в универсальном JS, мы можем использовать события для получения идентификатора вкладки, на которую нажали, но теперь мы сохраняем его в состоянии. Как только это состояние обновляется в событии клика, реактивность Vue обновляет все привязки, которые включают переменную «currentTab». Поскольку теперь мы знаем идентификатор текущей вкладки, мы можем проверить привязку каждого элемента, если он владеет этим идентификатором. Делаем нашу привязку похожей на приведенную выше ~v-bind:class=“{‘tab-selected’:currentTab==’credCard’}”~, где Vue видит изменение состояния и добавляет/удаляет класс на основе логики привязки. Приятно то, что Vue устанавливает связанный класс после статического класса, что позволяет интуитивно переопределять его в подобных ситуациях.

Таким образом, используя Vue.JS в качестве нашего веб-фреймворка и пользуясь преимуществами функции привязки классов, мы можем сделать более сложный элемент пользовательского интерфейса довольно простым и хорошо организованным, чего раньше было не так. Являюсь ли я сторонником Vue? Конечно, и я надеюсь, что буду публиковать гораздо больше о своем опыте работы с Vue, так как я использую его для большей части своей разработки. Однако, учитывая отсутствие у меня знаний о других фреймворках, я не буду говорить, что он лучший или что это не могут сделать другие. Что я скажу, так это то, что если вы еще не думали о переходе на современный веб-фреймворк, я настоятельно рекомендую вам подумать об этом. Это сделало разработку намного проще и веселее, и я обнаружил, что Vue довольно легко быстро освоить.

Если вы с самого начала обнаружили, что концепции сбивают с толку, это нормально. Я чувствовал то же самое, особенно с более сложной логикой, основанной на состоянии, которую предлагает Vue. Тем не менее, это действительно элегантный способ управления реактивными страницами, обеспечивающий молниеносную работу пользователей. Надеюсь, вы найдете его таким же хорошим опытом, как и я после некоторого времени разработки во Vue. Простите меня, если бы я мог представить концепции лучше, я новичок в документировании своего обучения и опыта. Пожалуйста, не стесняйтесь сказать что-нибудь, и, надеюсь, я смогу продолжать совершенствоваться по мере продвижения вперед.

Спасибо, что нашли время, чтобы прочитать это; -Маркус