Всё, что нужно для начала работы с Vue.js

Автор оригинала: Dan Vega
  • Перевод
Скорее всего, вы, читая эти строки, уже слышали о JavaScript-фреймворке, который называется Vue. Если вы собирались его опробовать, но не очень хорошо представляли себе то, с чего вам стоит начать, значит — этот материал написан специально для вас. Его автор говорит, что хочет рассказать о том, почему ему очень нравится Vue. Кроме того, он собирается представить всем желающим 4 способа написания первого приложения на Vue.



Обзор материала


Обычно я стараюсь не рассказывать о слишком многих способах решения одних и тех же задач тем, кто только начинает осваивать некий фреймворк. Но в данном случае я полагаю, что показать несколько способов разработки первого приложения на Vue — это очень важно. Возможно, вам нравится работать с командной строкой, а возможно — с инструментами, оснащёнными графическим интерфейсом. Для Vue-разработки подходит и то и другое. Кроме того, Vue-приложения можно писать и не прибегая к командной строке. Для этого достаточно добавить на HTML-страницу тег для загрузки соответствующего скрипта. И, наконец, возможно, вам не хочется заботиться о настройке окружения разработки. Вместо этого вы стремитесь к тому, чтобы как можно скорее, без лишних движений, попробовать Vue. На самом деле, какой бы стратегии вы ни придерживались бы, здесь вы найдёте то, что поможет вам приступить к освоению Vue.

В процессе чтения этого материала вы будете встречать ссылки на полезные ресурсы. А когда вы прочтёте всю эту статью — я расскажу вам о том, на что вам стоит обратить внимание для дальнейшего изучения Vue. Надо отметить, что здесь мы не будем погружаться в тонкости Vue, не будем рассматривать все возможные механизмы этого фреймворка. Мы собираемся разобраться с основами и выйти на первое работающее приложение.

Для начала поговорим о некоторых интересных особенностях Vue.

Сильные стороны Vue


Сила Vue, на мой взгляд, заключается в том, насколько дружелюбно этот фреймворк относится к новичкам. Команда разработчиков Vue проделала замечательную работу, стремясь к тому, чтобы разработчики различной квалификации могли бы быстро приступить к продуктивной работе с фреймворком. Если вы знаете HTML, CSS и JavaScript — это означает, что вы буквально в шаге от того, чтобы разрабатывать довольно мощные приложений на Vue.

Я так же полагаю, что Vue, среди трёх ведущих инструментов для фронтенд-разработки (это — Angular, React и Vue), обладает самыми низкими входными барьерами. Это так по нескольким причинам, но для меня всё сводится к трём основным особенностям Vue:

  • Отличная документация.
  • Замечательное сообщество.
  • Это — прогрессивный фреймворк.

▍Документация


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

  • Руководство. Здесь можно найти всё то, что нужно для того, чтобы начать работу с Vue.js. Этот раздел разбит на удобные для восприятия подразделы, которые знакомят читателя с концепциями, нужными для того, чтобы приступить к разработке приложений, основанных на компонентах.
  • API. В этом разделе приводится детальное описание API Vue. Например, если вам когда-нибудь попадётся какой-нибудь метод, в предназначении которого вы не вполне уверены, прояснить ситуацию поможет посещение этого раздела.
  • Рекомендации. Тут можно найти замечательные рекомендации, следуя которым можно избежать появления ошибок. Эти рекомендации способны предостеречь разработчика от использования анти-паттернов. Важно то, что здесь приведены скорее не жёсткие правила, а нечто вроде руководства. После того, как вы немного освоитесь с Vue, напишете несколько приложений, я порекомендовал бы вам почитать материалы этого раздела. Я полагаю, что это — очень ценный источник знаний по Vue.
  • Примеры. Здесь можно найти примеры приложений, разработанных средствами Vue. На вашем месте я пока не заглядывал бы сюда до тех пор, пока не освоился бы немного с разработкой компонентов. Но немного позже, когда вы будете готовы к тому, чтобы узнать о том, как устроены полноценные Vue-приложения, вам стоит изучить этот раздел.
  • Книга рецептов. В данном разделе можно найти ответы на часто задаваемые вопросы о Vue. Например — на такие: «Как выполнить валидацию формы?», «Как провести модульное тестирование компонента?». Это, опять же, ценный ресурс, но освоение его материалов стоит отложить до того момента, когда у вас появятся вопросы, подобные тем, что приведены выше.
  • Инструменты и основные библиотеки. На сайте Vue есть отличные материалы по инструментам и основным библиотекам. В особые подробности об этом мы тут вдаваться не будем, так как нам нужно поскорее приступить к написанию кода. Я приведу тут несколько ссылок на материалы, о существовании которых полезно знать. Итак, среди инструментов Vue я отметил бы следующие: инструменты разработчика, Vue CLI, Vue Loader. Вот ссылки на материалы по официальным библиотекам: Vue Router, Vuex, Vue Server Renderer.

▍Сообщество


Я, работая программистом, чувствую себя причастным к нескольким замечательным сообществам. Одно из них — это сообщество Vue. Его члены доброжелательны, дружелюбны, они более чем готовы оказать помощь тому, кто в ней нуждается. Рекомендую подписаться на Twitter-аккаунты следующих членов сообщества Vue. Так вам легче всего будет понять то, чем они занимаются, и узнать о том, чем они живут. Вот ссылки:


▍Vue — это прогрессивный фреймворк


Если посетить домашнюю страницу сайта Vue.js, то можно увидеть, что там его называют так: «Прогрессивный JavaScript-фреймворк». На первый взгляд это может показаться обычным маркетинговым ходом, но, немного вникнув в суть Vue, можно понять, что это не так. Для начала давайте определимся со значением слова «прогрессивное». Это — нечто, происходящее или развивающееся постепенно или поэтапно; это что-то такое, что выполняется пошагово.

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

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

Как уже было сказано, Vue — это доступный фреймворк. Если вы уже знаете HTML, CSS и JavaScript, это значит, что вы готовы к тому, чтобы начать работу с Vue. Собственно говоря, если вы и правда стремитесь приступить к написанию Vue-приложений, тогда предлагаю этим и заняться.

Вариант №1: скрипт Vue, подключённый к странице


Первый способ использования Vue, который мы исследуем, заключается в подключении к странице скрипта Vue с помощью тега <script>. Если вы уже работали с JavaScript, то тут для вас не будет ничего нового. А именно, речь идёт о том, что имеется HTML-страница, которую надо оснастить неким функционалом, реализованным в какой-то JS-библиотеке. Для этого библиотеку подключают к странице с помощью тега <script>. При этом надо отметить, что рассматриваемый здесь метод использования Vue подходит не только для разработки учебного приложения. Он находит применение и в реальных проектах.

Обычно довольно сложно вводить новые инструменты, библиотеки или фреймворки в реальные проекты, скажем, в организации, где работает программист. Например, вам очень нравится работать с Vue. Вы идёте к начальству и спрашиваете — можно ли вам переписать весь проект на Vue. В ответ на такой вопрос вам, почти без вариантов, тут же ответят отказом. Если же вы предложите использовать Vue на некоей странице, разработкой которой вы в данный момент занимаетесь, то такое предложение уже вполне может быть принято.

В следующем примере мы разработаем весьма примитивное приложение, которое хорошо тем, что на нём будет очень удобно рассмотреть некоторые концепции Vue.

▍«Hello, Vue!»


В этом приложении мы собираемся вывести на экран текст «Hello, Vue!», а ниже текста — текущие время и дату. Затем мы напишем код, который поддерживает дату и время в актуальном состоянии. В результате пользователь приложения сможет пользоваться им как обычными часами, наблюдая течение времени. Создадим новую папку, в ней создадим файл index.html, а в этот файл добавим следующий код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hello, Vue.js</title>
</head>
<body>

</body>
</html>

Теперь у нас есть каркас страницы, основа будущего приложения. Поэтому нашим следующим шагом будет подключение к этой странице скрипта Vue.js. Добавим в код страницы, прямо над закрывающим тегом </body>, следующее:

<!-- Версия для разработки включает в себя возможность вывода в консоль полезных уведомлений -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

</script>

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

Теперь, после подключения скрипта, нам, в первую очередь, нужно добавить на страницу корневой элемент, к которому будет подключён экземпляр Vue:

<div id="app">

</div>

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

<script>
  const app = new Vue({
    el: '#app'
  })
</script>

Теперь создадим пару переменных. Они будут хранить значения, которые мы используем для вывода информации на страницу. Делается это путём объявления свойств объекта data:

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!',
      now: new Date()
    
  })
</script>

Сейчас, когда данные готовы, мы готовы прибегнуть к возможностям Vue по выводу их на страницу. Делается это с использованием простых, удобных для восприятия конструкций:

<div id="app">
  <h1>{{ message }}</h1>
  <p>{{ now }}</p>
</div>

Сейчас вы можете поздравить себя с тем, что вы только что создали своё первое Vue.js-приложение. Если открыть index.html в браузере, то в нём должна вывестись страница, на которой крупными буквами написано «Hello, Vue!». Ниже этой надписи должна находиться строка, выводящая текущие дату и время. В ходе разработки и исследования моего варианта примера я пользовался Visual Studio Code и расширением Live Server.

То, что мы тут сделали, не выглядит как особенно продвинутый проект. Но в недрах Vue происходит много всего такого, что позволяет этому проекту работать так, как нам нужно. Фреймворк наладил связь между DOM и данными, после чего приложение стало реактивным. Как нам это проверить? Очень просто — достаточно открыть JS-консоль (прямо на странице приложения) и что-нибудь записать в app.message. Это должно привести к изменению надписи, выводимой на странице. Ниже показано то, как это может выглядеть.


Исследование приложения

Vue так же даёт разработчику возможность создавать обработчики для событий жизненного цикла компонентов. Это означает, что мы можем прослушивать события вроде created, mounted и destroyed. При возникновении события можно организовать выполнение некоего кода. Я не буду вдаваться в подробности, так как основная цель этого материала — продемонстрировать различные методы создания Vue-приложений, а не разбирать все тонкости фреймворка. Однако сейчас мы всё же посмотрим на то, как выглядит обработка событий жизненного цикла компонентов и завершим работу над нашим первым приложением.

Благодаря следующему коду значение переменной now будет обновляться каждую секунду. В ходе монтирования Vue мы, с помощью setInterval, настраиваем ежесекундный вызов функции, обновляющей дату и время. Создавать обработчики событий жизненного цикла можно, добавляя соответствующие методы в объект methods. Это очень похоже на то, как мы работали с объектом data. Вот этот код:

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!',
      now: new Date()
    },
    methods: {
      updateDate() {
        this.now = new Date();
      
    },
    mounted() {
      setInterval(() => {
        this.updateDate();
      }, 1000);
    
  })
</script>

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

Вариант №2: Vue CLI


Хотя мы и создали приложение, просто подключив скрипт Vue к странице, такой подход не отличается хорошей масштабируемостью. Если нужно разработать полноценное одностраничное приложение (Single Page Application, SPA) и при этом хочется воспользоваться вспомогательными инструментами Vue, тогда лучше всего будет прибегнуть к Vue CLI.

Если вы из тех, кто не очень любит работать в командной строке, тогда вы вполне можете воспользоваться инструментом с аналогичными возможностями, имеющим графический интерфейс (Vue UI).

▍Установка Vue CLI


Для начала нам нужно установить Vue CLI. Прежде чем это сделать — нужно обзавестись Node.js и npm. Если вы раньше не работали с Node.js и npm — уделите некоторое время на то, чтобы с ними познакомиться и немного в них разобраться. Вот команда, с помощью которой можно установить Vue CLI:

npm install -g @vue/cli

Для создания нового приложения можно воспользоваться командой vue create. Узнать список команд, которые поддерживает vue, можно с помощью команды vue -h.


Список команд, поддерживаемых утилитой vue

Команда create принимает имя приложения. Создадим новое Vue-приложение, выполнив следующую команду:

vue create hello-vue

В ходе выполнения этой команды в текущей директории будет создана новая папка hello-vue. Подробное описание процесса создания приложения с помощью vue create достойно отдельной статьи.

Сейчас же нам достаточно согласиться с предлагаемыми по умолчанию параметрами. Это приведёт к созданию нового приложения.


Создание нового приложения с помощью Vue CLI

Теперь перейдём в папку hello-vue, откроем файл, который находится по адресу src/components/HelloWorld.vue, и заменим всё его содержимое на следующий код:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>{{ now }}</p>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      now: new Date()
    };
  },
  methods: {
    updateDate() {
      this.now = new Date();
    
  },
  mounted() {
    setInterval(() => {
      this.updateDate();
    }, 1000);
  
};
</script>

Обратите внимание на то, что значение текста, который оказывается в msg, задаётся в файле src/App.vue.

Теперь, в командной строке или во встроенном в ваш редактор терминале, выполните следующую команду:

npm run serve

Она запустит сервер, после чего выдаст сведения о том, как открыть начальную страницу приложения. А именно, это http://localhost:8080/.


Vue-приложение в браузере

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

Вариант №3: Vue UI


Вместе с Vue CLI, с инструментом командной строки, устанавливается и инструмент Vue UI. Для того чтобы его запустить — воспользуйтесь следующей командой:

vue ui

В ходе её выполнения будет открыта страница нового приложения, находящаяся по адресу http://localhost:8000/dashboard.


Страница Vue UI

С помощью Vue UI можно создать новый проект, который будет обладать теми же возможностями, что и проект, созданный средствами командной строки.


Создание нового проекта в Vue UI

После того как настройка проекта будет завершена, запустить его можно прямо из Vue UI, перейдя в раздел Project tasks и нажав на соответствующую кнопку.


Запуск приложения в Vue UI

Вариант №4: CodeSandbox


Хотя вышерассмотренные варианты создания первого Vue-приложения и позволили нам достичь поставленной цели, они требуют некоторой настройки окружения разработки. Возможно, вам это не подходит и вы до сих пор не создали своё первое Vue-приложение. Если так — тогда сейчас мы рассмотрим ещё один способ работы с Vue. Он заключается в использовании онлайновых сред разработки, одной из которых является CodeSandbox.

Прежде чем создавать проекты на CodeSandbox, вам понадобится зарегистрироваться на сайте или войти в систему с использованием GitHub-аккаунта. После этого нужно создать новую «песочницу» (в рамках проекта это называется «sandbox») и найти Vue среди доступных шаблонов (на закладке Popular templates или Client templates).


Создание нового проекта, основанного на Vue, в CodeSandbox

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


Работа над приложением в CodeSandbox

Откройте в редакторе файл src/components/HelloWorld.vue и замените его содержимое на следующий код:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>{{ now }}</p>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      now: new Date()
    };
  },
  methods: {
    updateDate() {
      this.now = new Date();
    
  },
  mounted() {
    setInterval(() => {
      this.updateDate();
    }, 1000);
  
};
</script>

После этого вы увидите то же приложение, которым мы уже занимались. В ходе работы над проектом может возникнуть необходимость в том, чтобы кому-то его показать. Например — для того, чтобы о чём-то посоветоваться. CodeSandbox позволяет сделать это с помощью специальной ссылки.


Работа над приложением в CodeSandbox

Полезные ресурсы


Вот ссылки на некоторые из моих любимых ресурсов по Vue. Они помогут вам продвигаться в деле освоения этого фреймворка. Например — вот страница Awesome Vue, посетив которую можно получить представление о масштабах экосистемы Vue. Здесь можно найти репозитории Vue. Вот официальный блог проекта. Вот сайт сообщества Vue-разработчиков. Вот и вот — подкасты по Vue. Вот — страницы нескольких проектов, основанных на Vue: VuePress, Nuxt, Gridsome.

Что дальше?


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

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

В процессе работы с документацией стоит обратить особое внимание на следующие базовые концепции Vue:

  • Компоненты.
  • Связывание данных.
  • Обработка событий.
  • Директивы.
  • Методы.
  • Вычисляемые свойства.
  • Жизненный цикл компонентов.
  • Свойства, передаваемые компонентам.

Не стремитесь пока к созданию больших приложений. Сосредоточьтесь на освоении базовых вещей, а всё остальное придёт со временем.

Итоги


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

Уважаемые читатели! Если вам приходилось недавно изучать свой первый клиентский фреймворк — просим рассказать о том, как это было.

RUVDS.com
821,62
RUVDS – хостинг VDS/VPS серверов
Поделиться публикацией

Комментарии 31

    +1
    Я не понимаю какая разница между react.js и vue, пожалуйста, поясните ;)
      0
      Изучая React вы теоретически(!) быстрее найдёте себе работу (больше спрос) чем изучая Vue.

      А вообще и тот и другой в этом году резко "меняют шкуру":

      React -> React 16.8 with Hooks — уже не React, а что-то другое.
      Vue -> Vue 3 — уже не Vue, а что-то другое.

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

      Всё что писали про React и Vue в прошлом году, можно выкинуть на свалку истории. На свалку.
        +2
        Нет, vue 3 не так страшен.
          0
          Vue -> Vue 3 — уже не Vue, а что-то другое.
          Кто вам такое сказал? В официальном roadmap написано: «High level API remains as close to 2.x as possible.»
            +4
            Что, React Hooks прям отменяет и lifecycle, и JSX, и HOC? Создатели сами пишут, что внедрять рекомендуется неспешно, основная парадигма программирования на React не меняется. И, естественно, нужно поддерживать тонны старого кода на классах. Кроме того, можно продолжать писать новый код на тех же классах.
            На свалку, ага, facepalmjpg
              0

              Ни хуки в реакте, ни новый синтаксис Vue не обязательны к использованию. Старый синтаксис как работал, так и работает, и будет работать как минимум до следующего мажорного релиза.

                0
                Хуки лишь более удобный способ реализации one-directional data flow на практике. С чего бы вдруг суть шкуры реакта изменится?
                  0
                  Тем, что уже понеслась — свои хуки начали лепить все подряд. К чему это приводит — см. woocommerce.
                +4
                Ну на пальцах основные отличия для новичка, который не знает, что «потрогать» первым.

                1. Vue не требует вообще никакой инфраструктуры, его можно воткнуть в существующий сайт с вордпрессом на шаред php хостинге, особенно если вы в курсе, что ослик сдох. Для реакта и ангуляра надо где-то поднимать ноду, npm/yarn, webpack/parcel, а потом два дня разбираться, чем babel/core отличается от babel/core и почему на первом create-app не заводится. Ну то есть какой-нибудь бандлер потом, перед выпуском в прод, настроить придётся, но это будет потом, и для vue достаточно будет parcel с нулевой конфигурацией.

                2. Vue не требует изучать новые языки, работая на чистом HTML и JS. Гипотетически реакт тоже так может, но по факту 99% примеров и готовых react компонентов используют JSX и ~50% — Typescript. Это всё заметно увеличивает порог входа.

                3. Vue не настаивает на функциональной парадигме, его вполне устраивает ООП. Если вас пугают выражения типа
                let b = f => g => h => x => f(g(x))(h(x))
                
                в реакте будет сложновато. При этом, если вам нравятся god object-ы на 100500 полей и методов, которые отвечают за всё, включая состояния кнопок, то vuex (аналог redux/flux/...) вполне себе есть, берите и пользуйтесь.

                4. Следствие п. 3 — двусторонние биндинги. Они просто работают. Вам не надо, как в 90-ых, писать handleChange/handleKeyUp/… для каждого html элемента, а потом городить UNSAFE_ComponentWillRecieveProps и делать прочие приседания в скафандре. В результате наличию этой и других мелких сладких плюшек (например, стандартного роутера из коробки) кода на vue получается стабильно раза в 2-3 меньше, чем в таком же проекте на реакте, а пишется он быстрее.

                При всём при этом реакт, конечно, дико распиарен.
                  +3

                  Полностью согласен
                  Хорошо разложили по полочкам

                  +1

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


                  Хотя для такого варианта я бы посоветовал рассмотреть Preact.

                    –1
                    Теоретически с реактом так можно, практически — jsx сам себя не скомпилирует. Использовать реакт без jsx — ну, такое. Обычный vanilla js современных версий привычнее, понятнее и проще.
                    0
                    В документации реакта сказано, что это только в качестве песочницы. Реальное приложение так не пишут. А вот в Vue Это вполне работающий вариант.
                      +2

                      Реальное приложение на Вью тоже так никто не пишет. Как средство миграции — может быть, но не более.

                        0
                        Это следует читать так так?
                        Реальное приложение где Vue подключается через скрипт никто не пишет
                        .Не уверен в этом. Скорее правильно сказать так?
                        Новое приложение с где Vue подключается через скрипт никто не пишет.
                        Тут согласен. Хотя дело еще в квалификации разработчиков.
                    0
                    Вот есть сайт, там есть страница, на странице допустим есть селект, выбор значения в этом селекте будет влиять на компоненты, которые отображаются на странице, и их содержимое, например может появится еще один селект с списком, который зависит от выбора в первом селекте, и который так же будет влиять на компоненты на странице.
                    Есть ли смысл переписывать такое с чистого js на vue? Будет ли итоговый код меньше, быстрее и удобнее в поддержке?
                      0
                      ну, зависит. Современный js тоже не стоял на месте. Если у вас на странице два селекта, ни одна библиотека какого-либо существенного выигрыша не даст. Если 20 — уже есть о чём говорить.
                        0

                        При понимании фреймворка выйгрыш в поддержке всё же будет

                        0

                        Как выше написали, зависит от объема функциональности, которую хочется перетащить на vue. Но в любом случае упростится поддержка, если знаком с фреймворком

                        0

                        Почти со всем согласен, кроме высказывания про vuex и god-object'ы на 100500 полей) Если правильно разбивать функциональность приложения, то таких объектов не будет. Можно подумать, что при разбитии может критично увеличиться количество связей, но это как раз происходит из-за неправильного определения границ этой функциональности (либо неправильно реализованного общения между частями приложения).
                        Однако, если god-object'ы действительно нравятся, то на**кодить их легче лёгкого: vuex, с виду, прям сам подталкивает к их написанию)) Так что тут вы тоже частично правы)

                      0
                      Год назад мне нужно было научиться быстро набрасывать web frontend для разнообразных задач (сам я в основном пишу backend и иногда мобилки).
                      React с ходу мне не зашел. Посмотрел в сторону vue. Очень помог курс «Vue JS 2 — The Complete Guide (incl. Vue Router & Vuex)», автор Maximilian Schwarzmüller. Он есть на Udemy и на coursehunters. Очень хороший стиль изложения, добротный понятный английский. На 352 видео у меня ушло около месяца, после чего я начал сносно ориентироваться в тонкостях vue и сопутствующих библиотек.
                      Ну а дальше, конечно, постоянное использование всех источников, о которых написал автор.
                        0
                        Хорошая статья
                          0
                          Ожидал увидеть здесь настройку webpack-a.

                          В свое время изрядно пришлось поковыряться с вебпаком, когда только знакомился с Vue, в контексте однофайловых компонентов.
                            –2
                            В официальном roadmap написано: «High level API remains as close to 2.x as possible.»

                            Что, React Hooks прям отменяет и lifecycle, и JSX, и HOC? Создатели сами пишут, что внедрять рекомендуется неспешно, основная парадигма программирования на React не меняется. И, естественно, нужно поддерживать тонны старого кода на классах. Кроме того, можно продолжать писать новый код на тех же классах.


                            Ни хуки в реакте, ни новый синтаксис Vue не обязательны к использованию. Старый синтаксис как работал, так и работает, и будет работать как минимум до следующего мажорного релиза.


                            Хуки лишь более удобный способ реализации one-directional data flow на практике. С чего бы вдруг суть шкуры реакта изменится?


                            Вы все правы!

                            Но «новая шкура» — а фактически новый синтаксис — это фактически новый фреймворк.

                            Тут аналогия проста — если вы умеете «танцевать вальс» писать на простом JS, то конечно вы научитесь запросто(?) «танцевать брейк-данс» использовать любой фрейворк. Не? ;-)

                            Но если заказчику нужен знающий React with Hooks — он может(!) не ждать пока вы его освоите. А сразу взять на рынке программиста имеющего опыт программирования на React with Hooks. Ведь так! Не?

                            Что касаемо классов и то «что работает, то будет работать» и «нужно поддерживать тонны старого кода на классах» — кому нужно? Вам? — Поддерживайте.

                            Те кто НЕ знает про классы ничего — тому не нужно, он изучит React with Hooks и устроится на работу, опередив вас, пока вы будете поддерживать «тонны старого кода на классах» — того кода, который FB не будет развивать вовсе. — Вы хотите себя успокоить этим? Не? — У вас большой опыт работы с классами, опыт, который сейчас нужен чтобы «поддерживать тонны старого кода на классах», но который не будет стоить ни копейки через год, другой. — Вам это нужно? Не?

                            Кого вы хотите успокоить тем, что ваши знания через год другой будут никому не нужны (ну, только тем кто отстанет и останется на старом синтаксисе, на классах и прочем хламе истории)?

                            Все — эти «успокаивающие мантры» типа — «Хуки лишь более удобный способ» (а они меняют всё!) или «будет работать как минимум до следующего мажорного релиза» (это сколько? — год? месяц? — а потом?) или "«High level API remains as close to 2.x as possible.»" (как только возможно, мы постараемся, только не уходите от нас?) Не?

                            Все — эти "успокаивающие мантры" — не более чем призыв — мы резко изменились, но оставайтесь с нами!

                            P.S.
                            Все европейские языки происходят из санскрита.

                            Знания санскрита поможет вам читать на английском?

                            Английский язык — наиболее изменившийся язык, который почти всё утратил от санскрита.

                            Литовский язык — наиболее сохранивший хоть какие-то связи с санскритом.

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

                            Языки растут не как дерево (ветки и веточки) — а как осока — все из одного корня — это новая парадигма языковедения, чтобы НЕ обидеть никого, никакой язык.

                            А вообще, санскрит прост. ;-)

                            P.P.S.
                            А те кто говорят — «ничего не изменилось» — вы просто возмите код программы написанный по старому и по новому и сравните, просто сравните. Чисто зрительно — вы можете это прочесть? — Прочесть и понять?

                              +2
                              Для меня, фронтовика с 20-летним стажем, произошла революция. Появилась прекрасная возможность разрабатывать в стиле data-driven programming. Данные — это то, что я хочу держать в абсолютном порядке, все остальное уже не так важно. В данный момент я использую Vue+Vuex. Не было бы Vue, пользовался бы React+Redux или любое другое сочетание, где данные стоят во главе всего.
                                0
                                Ребята, что скажете насчет Angluar?
                                  0
                                  Ребята, что скажете насчет Angluar?

                                  Какой версии? ;-)

                                  Это монстр.
                                  Всё из коробки.
                                  Не взлетает и уже не взлетит — вангую.
                                  Нишевый продукт — и чем дальше тем его ниша будет глубже и меньше (в %).
                                  Кто повёлся на него — тому жалко терять свои знания и он продолжает…
                                  Не хайповый.
                                  Будет не раз переписан заново — вангую.
                                    +1
                                    Какой версии? ;-)

                                    8

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

                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                  Самое читаемое