Javascript-форум - Зачем Vue? Что в нём есть такого что нельзя сделать на js?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Зачем Vue? Что в нём есть такого что нельзя сделать на js? (https://javascript.ru/forum/misc/80635-zachem-vue-chto-v-njom-est-takogo-chto-nelzya-sdelat-na-js.html)

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

Желание ваше понятно - запрыгнуть "в айти".
Но проблема что ваши знания по сути остались какой то 10-ти летней давности. Основы пхп, js, немного yii, устаревший друпал.
А мир уже не такой, мне самому приходится сейчас подтягивать современный фронт, с vue, вижу насколько это все изменилось от того когда простыми файликами.

Цитата:

Для примера. - Я не использую jq. - Весь необходимый мне функционал есть в js

Сейчас то ладно, когда браузеры стали современные.
Но в вашем случает надо говорить - я все это время не использовал jq.
А не использовали потому что вы в реальности никогда ничего не делали на практике, ваши вот эти портфолио видеороликами кричущее тому подтверждение.

Цитата:

Сообщение от miltorg

Ведь совсем недавно был чудо фреймворк Бутсап3 Он чё всё? Умер?

Вас гугл забанил?
Bootstrap развивается, сейчас актуальная его версия - 4.5.
Сайт - https://getbootstrap.com

Цитата:

Сообщение от Rise (Сообщение 526817)

Это реактивный фреймворк. Есть такое понятие как реактивность (react - реагировать). Другой его коллега, прямо так и называется, React.

Реактивное программирование:

let a = 1;
let b = 2;
let c = a + b;
console.log(c); // 3
a = 2;
console.log(c); // 4 - с реагирует на изменения a и b

Реактивный подход это следствие сложных пользовательских интерфейсов.

О. Первый нормальный ответ. Спасибо.
А где это применить? Где содержимое одного поля зависит от другого?

Цитата:

Сообщение от miltorg

А где это применить? Где содержимое одного поля зависит от другого?

Цитата:

Сообщение от Rise

Реактивный подход это следствие сложных пользовательских интерфейсов.

:-?

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Components Example</title>
    <script src="https://unpkg.com/vue"></script>
    <style>
      .tab-button {
        padding: 6px 10px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        background: #f0f0f0;
        margin-bottom: -1px;
        margin-right: -1px;
      }
      .tab-button:hover {
        background: #e0e0e0;
      }
      .tab-button.active {
        background: #e0e0e0;
      }
      .tab {
        border: 1px solid #ccc;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div id="dynamic-component-demo" class="demo">
      <button
        v-for="tab in tabs"
        v-bind:key="tab"
        v-bind:class="['tab-button', { active: currentTab === tab }]"
        v-on:click="currentTab = tab"
      >
        {{ tab }}
      </button>

      <component v-bind:is="currentTabComponent" class="tab"></component>
    </div>

    <script>
      Vue.component("tab-home", {
        template: "<div>Home component</div>"
      });
      Vue.component("tab-posts", {
        template: "<div>Posts component</div>"
      });
      Vue.component("tab-archive", {
        template: "<div>Archive component</div>"
      });

      new Vue({
        el: "#dynamic-component-demo",
        data: {
          currentTab: "Home",
          tabs: ["Home", "Posts", "Archive"]
        },
        computed: {
          currentTabComponent: function() {
            return "tab-" + this.currentTab.toLowerCase();
          }
        }
      });
    </script>
    
    
<p>=========== ==================== ================= =================</p>

<button id="homeKn" class="tab-button  active" onclick="otrTab(0)">Home</button>
<button id="postsKn" class="tab-button" onclick="otrTab(1)">Posts</button>
<button id="arhivKn" class="tab-button" onclick="otrTab(2)">Archive</button>

<div id="home" class="tab">Home component</div>
<div id="posts" class="tab" style="display:none">Posts component</div>
<div id="arhiv" class="tab" style="display:none">Archive component</div>
    
<script>
function otrTab(tab){
  let u = ['none', 'none', 'none'];
  u[tab] = 'block';
  home.style.display = u[0];
  posts.style.display = u[1];  
  arhiv.style.display = u[2];
  
  let cv = ['#f0f0f0','#f0f0f0','#f0f0f0'];
  cv[tab] = '#e0e0e0';
  homeKn.style.background = cv[0];
  postsKn.style.background = cv[1];  
  arhivKn.style.background = cv[2];  

}
</script>

  </body>
</html>

Внизу моё. Сегодня написал. Как мне кажется - у меня проще и понятней. И не нужно ничего лишнего подключать.

miltorg,
параметр run в теге форматирования делает код запускаемым.

Цитата:

Сообщение от miltorg

Как мне кажется - у меня проще и понятней.

Это только кажется, а на самом деле и подход, и код ужасен.

Цитата:

Сообщение от laimas (Сообщение 526853)

Это только кажется, а на самом деле и подход, и код ужасен.

Как можно "ужасно" заменить один стиль на другой?

Как?

Цитата:

Сообщение от рони (Сообщение 526850)

miltorg,
параметр run в теге форматирования делает код запускаемым.

Подменил. Работает. Спасибо.