Vue.js для форм

[Vlad]

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

В качестве примера сделал вот такую штуку, хочу прикрутить к справочнику CSS к большинству стилевых свойств.

https://jsfiddle.net/webref/b3abxg5h/

Интересует следующее: 

• насколько правильно сделал, можно ли проще и лучше?
• нужно ли использовать компоненты?

Ну и вообще, приветствуются всякие советы и подсказки.

[DivMan]

А это же табы, почему не чистом js? 

[Vlad]

Возможно вы правы, и никакой Vue тут и не нужен.

[andrey7287]

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

this.selectValue = newValue;

наверное лучше будет. По остальным вопросам не знаю, с vie  вообще не знаком.

Edited August 26, 2017 by andrey7287

[nerv]

работаю со Vue с 2015 года. Когда он еще в первой версии был и хайпа не было. Впечатление исключительно положительное: низкий порог входа (в отличии от ангуляра или реакта), простые вещи делаются просто, декларативность в шаблонах по мне так огромный плюс (т.е. императивного кода на той же jQuery будет в разы больше и он будет менее понятным). Я когда с докладом выступал по этой либе, отметил, что на мой взгляд, это следующий швейцарский нож для веба (как когда-то была jQuery). Иными словами, получит очень широкое распространение и будет стандартом дефакто.

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

к предыдущему комментарию могу добавить, что:
1. в целом подход правильный, ты не изобретаешь велосипед
2. `new Vue({` будет достаточно (чем меньше глобальных переменных, тем меньше вероятность выстрелить себе в ногу)
3. названия методов, обычно, начинаются с глаголов или просто глаголы. В твоем случае подойдет `setValue()`. Но это уже если совсем по правильному

[andrey7287]

Спасибо за авторитетное мнение, давно не было от тебя  постов !

[Vlad]

Спасибо всем за советы и особенно @nerv. Пока сделал на ванильном JS всё что хотел, в будущем планировал вообще на Vue.js перейти вместо jQuery. Пока нет, слишком много завязано на него, переписывать долго придётся.