LINUX.ORG.RU
← Как сконвертировать svg CSS inline style в CSS style attribute?
Нетривиальная регулярка →
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Ответ на: комментарий от anonymous 
По теме уже все сказали, это очередная попытка фронтэнд макак сделать свою работу удобнее и продуктивнее и приятнее, не более.

Спасибо. То есть это своего рода обрезанный jq?

miltorg
() автор топика

Зачем Vue?

Ты хотел сказать svelte

Что в нём есть такого что нельзя сделать на js?

Тоже самое, только на порядки быстрее/проще/лучше.

ddidwyll ★★★★
()
Ответ на: комментарий от anonymous 
сортировать список, искать по сложным динамическим фильтрам (например, страна - город (в выбранной стране) - улица (в городе)), открывать данные выбранного клиента, сравнивать пару и больше выбранных клиентов,

В друпале - это всё есть в админке

miltorg
() автор топика
Ответ на: комментарий от static_lab 
Вы отдадите конечному пользователю универсальный интерфейс для работы с БД? Чтобы он сам прописывал SQL? А бизнес-логику куда цеплять? Например, сформировать отчёт или сделать рассылку выбранным клиентам?

Друпал - из коробки

miltorg
() автор топика
Последнее исправление: miltorg (всего исправлений: 1)
Ответ на: комментарий от miltorg

Для работы с БД есть специальные языки. Они формируют-сортируют-кешируют любые запросы - это и есть их работа.

Зачем вручную писать сортировку пользователей?

miltorg
() автор топика
Ответ на: комментарий от anonymous 
Ты же когда лабаешь очередной сайт тоже затягиваешь какие-то чужие и свои решения, то что они у тебя не имеют общей концепции и не оформлены во фреймворк погоды не делает, суть такая же.

спасибо. То есть в этом Vue ничего такого особенного и нет? Можно спокойно откликаться на вакансии

miltorg
() автор топика
Ответ на: комментарий от miltorg

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

Бутстрап — это про визуальный стиль. JS-фреймворки — про фронтовую логику и компонентизацию. Позже вышел Bootstrap 4 на основе Flexbox. В целом же можно взять и любой другой стилевой фреймворк. Для js-фреймворков есть и свои библиотеки компонентов со своими стилями.

Спасибо. То есть это своего рода обрезанный jq?

Нет. Архитектурно JQ не обеспечивает разделение разметки и логики. Кроме того, самое важное — это манипуляция DOM. Фреймворки делают её полностью самостоятельно наиболее оптимальным образом, позволяя разработчикам думать на уровне компонентов. В jQuery, как и нативном DOM API, манипуляция DOM производится разработчиком вручную.

Друпал - из коробки

А если API доступа к данным вам предоставлен извне? Предположим, как я уже писал выше, для сервиса планируется как веб-приложение, так и мобильные клиенты.

Для работы с БД есть специальные языки. Они формируют-сортируют-кешируют любые запросы - это и есть их работа. Зачем вручную писать сортировку пользователей?

Вручную незачем, но таблицы в БД — это низкоуровневое представление данных.

static_lab ★★★★★
()
Ответ на: комментарий от miltorg

Сказать, что «Drupal - кошмар» это не сказать ничего. Редкостный legacy-ублюдок без намеков на адекватную документацию

Ford_Focus ★★★★★
()
Ответ на: комментарий от miltorg

спасибо. То есть в этом Vue ничего такого особенного и нет? Можно спокойно откликаться на вакансии

Если заказчик требует Vue, значит:

  1. он рассчитывает на поддерживаемость кода в дальнейшем, возможно, другим разработчиком;

  2. у него уже есть готовая часть решения на Vue;

  3. он собрал команду программистов на Vue.

В любом случае заказчик рассчитывает, что вы умеете работать с этим фреймворком и не готов рассматривать никакие альтернативы.

static_lab ★★★★★
()

А что в JS такого, что нельзя сделать на Vue?

anonymous
()
Ответ на: комментарий от miltorg

Это ты умер как программист и возродился в виде большоого зелёного тролля по имени Шрек… а у Bootstrap уже пятая версия потихоньку пилится и да он чисто про вёрстку, по-человечески.

Twissel ★★★★★
()
Ответ на: комментарий от miltorg

ну можно и так воспринимать, это больше чем jq, но области применения перекрываются.

anonymous
()
Ответ на: комментарий от miltorg

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

anonymous
()
Ответ на: комментарий от miltorg

Всё ясно. Спасибо. Это очередной jq.

По-моему, вы просто ищете оправдание только лишь бы ничего нового не учить. Впрочем, каждому своё. Продолжайте писать за 3 евро в час.

static_lab ★★★★★
()
Ответ на: комментарий от static_lab

Да это какой-то тролль унылый, который пытается сказать, что SPA не нужны, а Дрюпальчик нужен всем. Даже не смешно

menangen ★★★★★
()
Ответ на: комментарий от menangen

Да он не тролль. Просто старый пхпшник, который роется в поисках еды на всяких помойках. Ну и претензии уровня «Зачем нужен этот ваш экскаватор? Баловство. Руками ковыряться в мусоре намного удобнее!»

crutch_master ★★★★★
()
Последнее исправление: crutch_master (всего исправлений: 2)

У вью есть такие штуки как, EventBus (говна кусок, но макаки не умеют иначе), маршрутизация, возможность подключить вьютифай.
Больше там ничего интересного или полезного.

system-root ★★★★★
()
Ответ на: комментарий от menangen

Да это какой-то тролль унылый, который пытается сказать, что SPA не нужны

Это противовес хипсторам, для которых существует только SPA и хайлоад. Они бы и лор переписали на vue.

bread ★
()
Ответ на: комментарий от bread

У SPA-«хипсторов» уже 3-я жена, две ипотеки, внуки и геморрой с арбуз. Просто ТС - уже древний дед с деменцией.

crutch_master ★★★★★
()
Последнее исправление: crutch_master (всего исправлений: 1)
Ответ на: комментарий от anonymous

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

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

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

Ну и далее формошлепство в сочетании с запросами на сервер.

И все это - не покидая страницу типа аякс и всё такое

В общем, исходя из примера, можно предположить от Vue облегчения написания форм.

На JS фреймворке это просто это если идеи, заложенные в фреймворк совпадают с ожидаемым поведением нужной нам компоненты. Иначе все превратится в противоборство с фреймворком.

Psilocybe ★★★★
()
Ответ на: комментарий от menangen

Может и не тролль, но просто туповат малость и хочет, чтобы ЛОРовцы оправдали его выбор из 2000-х

Twissel ★★★★★
()
Последнее исправление: Twissel (всего исправлений: 1)

ТС, тебе на скуле плохо, что ты сюда пришел? Так тут будет еще хуже. А потом тебя забанят.

crutch_master ★★★★★
()
Последнее исправление: crutch_master (всего исправлений: 2)

Собирайся. Там ангулярщика ищут за 80 тыр. Я тебя прорекламировал, с тебя 500 рублей. Выучи уже сраный ангуляр, человеком станешь, не надо будет по фриланс-помойкам с неадекватами шастать.

crutch_master ★★★★★
()
Ответ на: комментарий от Psilocybe 
Иначе все превратится в противоборство с фреймворком.

Во-во. Сейчас я на php борюсь с yii - мы побеждаем всегда. Я уже практически, yii пользуюсь только для перевода. Функция перевода там как на Друпале.

miltorg
() автор топика
Последнее исправление: miltorg (всего исправлений: 1)
Ответ на: комментарий от miltorg

Я бы резюмировал таким образом:

Если вы не бачили Друпал - то вам всё кажется ужасно сложным. Поэтому вы начинаете выдумывать всякие Veu

Кстати Вьюхи в Друпале - года так с 2009 вроде. Модуль для визуального отображения БД. Я не пользуюсь практически - Я умею делать запросы к базе и так.

miltorg
() автор топика
Ответ на: комментарий от miltorg

Я бы резюмировал таким образом:

Если вы не бачили Друпал - то вам всё кажется ужасно сложным. Поэтому вы начинаете выдумывать всякие Veu

Хорошо, ты победил, твой троллинг тупостью высочайшего уровня

anonymous
()
Ответ на: комментарий от miltorg 
<!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
() автор топика
Ответ на: комментарий от miltorg

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

miltorg
() автор топика
Ответ на: комментарий от miltorg

Там вакансия висит за 80 тыр, но хотят mvc. Ты умеешь в mvc?

crutch_master ★★★★★
()
Ответ на: комментарий от miltorg 
<?php
$kn[0] = 'Home';
$cont[0] = 'Home component';

$kn[1] = 'Posts';
$cont[1] = 'Posts component';

$kn[2] = 'Archive';
$cont[2] = 'Archive component';

$taby = new Taby;

?>
<!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>

<?php $taby->display($kn, $cont)?>

<p>111111111 =========== ==================== ================= =================</p>

    <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>

  </body>
</html>

<?php
class taby{
  function display($kn, $kont){
    ?>
    <button id="homeKn" class="tab-button  active" onclick="otrTab(0)"><?=$kn[0]?></button>
<button id="postsKn" class="tab-button" onclick="otrTab(1)"><?=$kn[1]?></button>
<button id="arhivKn" class="tab-button" onclick="otrTab(2)"><?=$kn[2]?></button>

<div id="home" class="tab"><?=$kont[0]?></div>
<div id="posts" class="tab" style="display:none"><?=$kont[1]?></div>
<div id="arhiv" class="tab" style="display:none"><?=$kont[2]?></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>
    
  <?php
    }
  
  }
miltorg
() автор топика
Ответ на: Буэээ от anonymous

Менее наглядно, но более компактно и с перспективой на неограниченное количество Табов:

<?php
class taby{
  function display($kn, $kont){
    ?>
    <button id="kn0" class="tab-button  active" onclick="otrTab(0)"><?=$kn[0]?></button>
<button id="kn1" class="tab-button" onclick="otrTab(1)"><?=$kn[1]?></button>
<button id="kn2" class="tab-button" onclick="otrTab(2)"><?=$kn[2]?></button>

<div id="tab0" class="tab"><?=$kont[0]?></div>
<div id="tab1" class="tab" style="display:none"><?=$kont[1]?></div>
<div id="tab2" class="tab" style="display:none"><?=$kont[2]?></div>
    
<script>
function otrTab(t){
  let u = [];
  let cv =[];
  
  for(let i=0; i<3; i++){
    u[i] = 'none';
    u[t] = 'block';
    
    cv[i] = '#f0f0f0';
    cv[t] = '#e0e0e0';
    
    globalThis['tab'+i].style.display = u[i];
    globalThis['kn'+i].style.background = cv[i];
    }

}
</script>
    
  <?php
    }
  
  }
miltorg
() автор топика
Последнее исправление: miltorg (всего исправлений: 1)
Ответ на: комментарий от miltorg

А почему не Django? На Django в три строчки делается, благо питон - для людей

menangen ★★★★★
()
Ответ на: комментарий от miltorg

И окончательно. Для неограниченного числа Табов. Рабочий Пример здесь:

http://chajnik.ru/vue-js

<?php
$kn[0] = 'Home';
$cont[0] = 'Home component';

$kn[1] = 'Posts';
$cont[1] = 'Posts component';

$kn[2] = 'Archive';
$cont[2] = 'Archive component';

$kn[3] = 'ещё Таб1';
$cont[3] = 'my Таб первый';

$kn[4] = 'Таб n-ый';
$cont[4] = 'Количество Табов неограничено';

$taby = new Taby;

?>
<!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>

<?php $taby->display($kn, $cont)?>

<p>=========== ==================== ================= =================</p>

    <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>

  </body>
</html>

<?php
class taby{
  function display($kn, $kont){
    $kol_kn = count($kn);
    
    for($i=0;$i<$kol_kn;++$i){
      ?>
      <button id="kn<?=$i?>" class="tab-button<?php if($i==0) print ' active';?>"
        onclick="otrTab(<?=$i?>,<?=$kol_kn?>)"><?=$kn[$i]?></button>      
      <?php      
      }
    for($i=0;$i<$kol_kn;++$i){
      ?>
      <div id="tab<?=$i?>" class="tab"<?php if($i!=0) print ' style="display:none"';?>><?=$kont[$i]?></div>
      <?php
      }?>

    
<script>
function otrTab(t, kol_kn){
  let u = [];
  let cv =[];
  
  for(let i=0; i < kol_kn; i++){
    u[i] = 'none';
    u[t] = 'block';
    
    cv[i] = '#f0f0f0';
    cv[t] = '#e0e0e0';
    
    globalThis['tab'+i].style.display = u[i];
    globalThis['kn'+i].style.background = cv[i];
    }

}
</script>
    
  <?php
    }
  
  }
miltorg
() автор топика
Ответ на: комментарий от miltorg

Код мой. меняю - «только на водку» :-)

miltorg
() автор топика
Ответ на: комментарий от miltorg

Это жо...

Пиздец, названия переменных… kn, taby, kol_kn… Это вообще о чем? Иди грузилой в пятерочку, там тебе самое место.

anonymous
()
Ответ на: комментарий от miltorg

Кстати. Вживление Vue в Друпал прошло успешно. Друпал не слал пинать салагу Vue. Друпал просто не обратил на него внимания вообще:

http://chajnik.ru/vue-js

miltorg
() автор топика
Ответ на: Это жо... от anonymous

А ещё нет комментов каждой строки. - Это вообще ужасно.

Ребята. Вы чего? Там 5 переменных или меньше.

$kn - кнопка

$taby - Табы

$kol_kn - Количество Кнопок

miltorg
() автор топика
Последнее исправление: miltorg (всего исправлений: 1)
Ответ на: комментарий от miltorg

Действительно, зачем этот vue c с разделением логики и кода, с готовыми компонентами для больших проектов, если можно наколбасить лапшекода на 1000 строк а больших проектов не существует. Вы наверное лет 15 назад спорили, зачем нужен шаблонизатор в ПХП, и зачем нужен JS.

goingUp ★★★★★
()
Ответ на: комментарий от miltorg

И всё. Вместо всей вашей Vue

Чувак, ты пишешь на пхп за объедки, пока фронтэнд господа на вуе зарабатывают $200kk в секунду. Кому и что ты хочешь доказать?

crutch_master ★★★★★
()
Последнее исправление: crutch_master (всего исправлений: 1)
Ответ на: комментарий от goingUp

Выше я разобрал именно готовый компонент Vue

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

miltorg
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
← Как сконвертировать svg CSS inline style в CSS style attribute?
Web-development
Нетривиальная регулярка →