Какую задачу нужно попытаться реализовать, чтобы понять необходимость VUE в проекте?

Question

[Антон Шульц]

В чём заключается смысл заполнения контента таким образом через JS?
Всё пытаюсь понять зачем же нужен vue или реакт и не могу найти смысла.
Подскажите какую-нибудь задачу, где в полной мере можно ощутить удобство и незаменимость VUE.

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Привет, Vue!'
  }
})

Comments

[Antonio Solo]

калькуляторы,
сложные формы
онлайн валидация
корзина

Answer 1

[Alex]

Фишка Vue — реактивность.
Чтобы это прочувствовать, попробуйте реализовать какой-либо динамический интерфейст, на чистом JS или хотя бы на JQ. А потом сделать то же самое на Vue.
Ну, например простейший калькулятор: два текстовых поля в которые нужно вводить цифры. И рядом "на лету" вычисляется их сумма. Без необходимости кликать в кикие-то кнопки и тп. Чтобы интерфейс обновлялся сам.
Или что-то посложнее, скажем какой-то пошаговый тест с вопросами, вариантами ответов, с отображением прогресса, и отображением результата в баллах.

Answer 2

[Константин Б.]

Попробуйте реализовать Livesearch компонент на Vue и точно такой же компонент на JS/jQuery. Разницу вы поймете сразу

Answer 3

[Александр]

У вас плохой пример. Посмотрите лучше этот: https://vuejs.org/v2/examples/svg.html

Почти любая интерактивная web-форма. Вот в чём вы разбираетесь? В компах? В автомобилях? В кройке одежды?

Попробуйте создать форму-конфигуратор. Где от выбора одного компонента есть зависимость доступности и стоимости других компонентов.

Естественно с автоматическим пересчётом стоимости.

Да, можно сделать на голом JS, но очень скоро получается адский говнокод. А в vue.js это просто. И бонусом сразу готовый JSON с конфигурацией.

Answer 4

[0xD34F]

Никакую.

Если непонятно, зачем вам vue - значит, он вам не нужен.

Comments

[Александр]

Имхо, сначала надо понять, что они вообще умеют. Я вот поздно узнал что такое vue.js. Не знал, что есть такое элегантное решение, когда данные связываются с отображением и обратно.

[Андрей Пике]

Надо, это безусловно.

Да, на Vue мозги должны работать по-другому.
Особенно если раньше всё делал через jQuery/vanilla, но в проекте нельзя.
Довольно не просто переучиваться с линейных алгоритмов.
А дзен обычно сам приходит, со временем.

[Андрей Пике]

Да, и соглашусь с Александр - для мелочи в 5-10 строк кода это особо не надо.

А вот для такого кода в проекте, написанного года три назад непонятно кем - надо.

var $addressFieldset = $(".address-fieldset"),
      $addressSwitcher = $(".dealer-override-switcher").find('span.switchery'),
      $manualFieldSet = $('.manual-fieldset'),
      $manualSwitcher = $('#id_is_manual'),
      $manualSettings = $('#manual-settings'),
      $isBulk = $('#id_is_bulk'),
      $layout = $('#id_layout'),
      $st_1 = $('#id_is_carrier_image_1_static'),
      $st_2 = $('#id_is_carrier_image_2_static'),
      $st_3 = $('#id_is_carrier_image_3_static'),
      $st_4 = $('#id_is_carrier_image_4_static'),
      st_1 = $('#id_is_carrier_image_1_static').data('switcheryObject'),
      st_2 = $('#id_is_carrier_image_2_static').data('switcheryObject'),
      st_3 = $('#id_is_carrier_image_3_static').data('switcheryObject'),
      st_4 = $('#id_is_carrier_image_4_static').data('switcheryObject'),
      st_5 = $('#id_is_card_image_1_static').data('switcheryObject'),
      statics = [st_1, st_2, st_3, st_4, st_5],
    ...
  }

Такой стиль кода называется "лапша".