Крупные компании используют Vue.js для своих платформ, так почему бы вам не попробовать?
В нашем отделе разработки интерфейсов первое, о чем я постоянно слышал, это Angular, очень сложный фреймворк, созданный Google и, честно говоря, довольно сложный для изучения.
Следующим большим достижением стала React, библиотека JavaScript, разработанная Facebook, которая оказалась сильным кандидатом в борьбе за популярность.
А с 2014 года у нас есть Vue. Он был создан бывшим сотрудником Google, и его часто описывают как «дитя любви» между двумя предыдущими: React и Angular.
Крупные компании используют Vue.js для своих платформ, так почему бы вам не попробовать? Вот некоторые примеры:
Так что же такое Vue.js?
Vue - это прогрессивный фреймворк для создания пользовательских интерфейсов.
Это означает, что он реализован как дополнительная разметка HTML. Проще говоря, если модель меняется, то HTML тоже изменится.
Он имеет те же преимущества, что и Angular, а именно интерполяция, двусторонняя привязка данных, директивы и многое другое.
Его легко принять и интегрировать с другими библиотеками или существующими проектами. Vue также отлично поддерживает сложные одностраничные приложения.
React + Angular = Vue
Есть несколько веских причин, по которым многие люди называют Vue ребенком любви:
Предпосылки
Я начну с того, что Vue - лучший вариант для младшего фронтенд-разработчика. У Vue самая быстрая кривая обучения из всех трех больших технологий, поскольку для этого не требуется много предварительных условий.
Если вы знаете, как использовать HTML, CSS и имеете базовые знания JavaScript, вы можете приступить к изучению Vue. Angular использует Typescript, который является надмножеством JavaScript, и кривая обучения довольно крутая.
Вы должны знать, что вам нужно потратить много времени на изучение Angular. Мне потребовалось 1-2 месяца, 6 часов в день, чтобы выучить его таким образом, чтобы я чувствовал себя уверенно, выполняя работу без особого надзора со стороны старших коллег. Тем не менее, за временем, потраченным на изучение Angular, есть скрытое преимущество.
На мой взгляд, если вы знаете Angular, вы легко освоите Vue. Мне потребовалось меньше недели, чтобы почувствовать себя комфортно с Vue, и я даже использовал некоторые продвинутые концепции.
Компоненты
Если вы посмотрите на изображение ниже, вы увидите большого человека, представляющего Vue Instance, и маленькие дочерние компоненты рядом с ним.
Аналогия довольно проста: экземпляр Vue похож на модуль приложения из Angular. Обычно вы будете использовать только один модуль в своем приложении, и то же самое касается экземпляров Vue.
Компоненты - это многоразовые части Vue, которые могут быть зарегистрированы глобально или локально. Как видите, компонент 3 отображается дважды.
Экземпляры Vue указывают элемент DOM, в котором будет отображаться приложение (находится в «свойстве el»). Экземпляр Vue имеет несколько свойств: имя, данные, методы, жизненный цикл и т. Д.
• Имя требуется для ссылки на компонент.
• Данные - это функция, в которой вы храните переменные вашего компонента.
• Раздел "Методы" содержит все функции, необходимые для доступа к данным и управления ими. Другие методы предназначены для управления жизненным циклом.
Регистрация компонентов
Компонент может быть зарегистрирован локально или глобально.
На предыдущем изображении мы видели глобально зарегистрированные компоненты.
Чтобы иметь локальную регистрацию, синтаксис меняется, и вам нужно будет импортировать его и указать в разделе компонентов родительского элемента, как на изображении.
Другой пример локальной регистрации - использование синтаксиса ES2015, который мы будем использовать в следующем разделе.
Передача аргументов
Одно свойство функции называется реквизит. Props представляет собой аргументы, переданные компоненту.
Обратите внимание, что объекты и массивы в JavaScript передаются по ссылке, поэтому, если свойство является массивом или объектом, изменение самого объекта или массива внутри дочернего компонента повлияет на родительское состояние.
В этом случае родительский компонент (компонент приложения) объявляется с синтаксисом ES2015, а дочерний компонент указывается в разделе «компоненты».
В HTML-коде родительского элемента вы просто указываете имя параметра (в данном случае msg) и его значение («Добро пожаловать»).
В дочернем компоненте у вас есть раздел «props» с типом и именем аргумента.
В конце концов, на экране появится «Добро пожаловать».
Более подробно будет обсуждаться в разделе Директивы.
События дочерних компонентов
В процессе разработки вам может потребоваться обмен данными от дочернего компонента к родительскому.
Это возможно в Vue.js, отправив событие из дочернего компонента в обработчик события в родительском компоненте.
@ - это сокращение от v-on: и мы обсудим это подробнее в главе «Условные выражения, циклы и события».
Методы жизненного цикла
Как разработчик Angular, я думаю, вы много раз использовали OnInit, OnDestroy, OnChange и многие другие, но как нам использовать Методы жизненного цикла во Vue?
Первый метод, о котором мы поговорим, - это beforeCreate, который будет вызываться перед рендерингом, поэтому имейте в виду, что элементы, события и данные DOM в этой части недоступны.
Близким эквивалентом является первый вызов OnChanges, который происходит до OnInit.
Далее мы рассмотрим несколько примеров этих методов, и я надеюсь, вы лучше поймете, к каким данным вы можете получить доступ, а к каким - нет.
Итак, начнем с первого примера!
Здесь вы можете видеть, что мы хотим получить доступ к опоре msg, но это вызовет ошибку, потому что данные еще не доступны.
Созданный метод может получить доступ к данным и событиям, но элементы DOM по-прежнему недоступны.
Близким эквивалентом created в Angular является OnInit.
Следующий вызываемый метод - это beforeMount, где все функции шаблона или рендеринга были скомпилированы, но мы по-прежнему не можем получить доступ к элементам DOM.
Близким эквивалентом в Angular является AfterContentInit. У нас нет эквивалента для AfterContentChecked.
Следующий вызываемый метод - это смонтированный, где мы наконец можем получить доступ к элементам DOM.
Эквивалент этого метода в Angular - AfterViewInit.
Этот метод является наиболее часто используемым крючком жизненного цикла во Vue.
Когда в приложении происходит обновление, вызывается метод beforeUpdate (). Здесь мы можем получить доступ к обновленным данным до того, как DOM будет повторно отрисован.
Метод обновления вызывается только после внесения изменений в DOM. В Angular вы можете получить доступ к предыдущему значению и текущему значению после того, как обновление было выполнено с помощью OnChanges.
Наконец-то мы достигли двух последних методов, которые используются для очистки вашего компонента.
В методе beforeDestroy () мы будем отменять подписку или откреплять события. Эквивалент OnDestroy. В методе destroy () ничего не останется от вашего компонента, и у нас нет эквивалента для этого в Angular
Укладка
Стили можно поместить в тег стиля или встроить. Если вы выбрали встроенный стиль, вы можете использовать v-bind, когда вам нужно получить доступ к переменным из вашего тега скрипта.
Вы можете указать, что стиль компонента может применяться только к этому компоненту, указав «scoped» в открытом теге.
Если у нас нет встроенного стиля, цвет текста будет красным, но если мы добавим встроенный, цвет будет синим, даже если в разделе стилей мы указали, что он красный.
Запросы
Цель запросов - установить связь между интерфейсом и сервером с целью извлечения данных и управления ими. Запросы можно делать во Vue с помощью Axios, что можно получить, написав в интерфейсе командной строки npm install - save axios.
Axios - не единственный способ делать запросы. Альтернатива, например, экспресс.
Создайте в своем приложении новую папку с именем services и внутри нее создайте файл JavaScript, называемый так, как вы хотите, но убедитесь, что имя соответствует его поведению.
Сначала вам нужно импортировать Axios и создать компонент с желаемыми запросами.
В моем примере у меня есть запросы get и post, которые рассматриваются как обещания.
Вы просто указываете тип запроса, URL и, если необходимо, параметры.
В компоненте, в котором вам нужно вызывать эти запросы, импортируйте только что созданный файл JavaScript.
Запрос - это обещание, в котором вы найдете данные из серверной части, обратившись к «result.data».
Вам не нужно вызывать метод json (), как в React.
Директивы
Директивы во Vue аналогичны таковым в Angular.
Вы заменяете * ngIf на v-if, * ngFor на v-for, ngModel на v-model и так далее.
В этом примере мы увидим абзац, который будет содержать значение ввода, используемая переменная - «message».
Условные выражения, циклы и события
V-if: проверяет, будет ли элемент отображаться на основе логического выражения.
V-else: отображает другой элемент, если v-if не работает.
V-else-if: аналогично случаю использования вложенных операторов.
V-for: перебирает список.
V-on: отслеживает события в DOM, такие как щелчок, отправка, нажатие и т. д.
Привязки
V-bind: динамически привязывает один или несколько атрибутов или свойство компонента к выражению.
V-bind также требуется, если вам нужно передать число, потому что, если вы не укажете его тип, он будет рассматриваться как строка.
Чтобы динамически передать аргумент компоненту, вам необходимо использовать его с v-bind.
Некоторые вкусности
Теперь, когда вы знаете все основные концепции, необходимые для создания приложения Vue, мы уже можем погрузиться в более сложные части, такие как Vuex.
Ура, вы добрались до этого места!
Vuex
Vuex - это шаблон и библиотека управления состоянием для приложений Vue.js.
Он служит централизованным хранилищем для всех компонентов в приложении с правилами, гарантирующими, что состояние может изменяться только предсказуемым образом.
Он также интегрируется с официальным расширением Vue DevTools для обеспечения расширенных функций, таких как отладка с нулевой конфигурацией во времени и экспорт / импорт снимков состояния.
Так что же это за модель управления состоянием?
Проще говоря, вы пытаетесь разбить свое приложение на следующие разделы:
Состояние - это данные, которыми манипулируют, и к кому применяются действия.
View отвечает за отображение данных, найденных в состоянии.
Действия - это операция, производимая государством.
Прежде чем мы начнем изучать, как использовать Vuex, нам сначала нужно установить его, открыв консоль и написав npm install vuex –save.
После этого вам явно нужно импортировать Vuex из Vuex.
Кроме того, вы должны указать Vue использовать Vuex.
В следующем примере мы определили хранилище с состоянием как count, инициализированное значением 2. В разделе мутации мы определили действия, которые будут применяться к состоянию, в этом случае, уменьшение count на единицу.
В компоненте мы вызвали и отобразили результат действия. Обычно уровень представления представлен в HTML, но для простоты примера я выбрал консоль.
Я надеюсь, что теперь вас больше не ошеломляет термин «шаблон управления состоянием», и вы понимаете, что это такое и как реализовать его в своем приложении Vue с помощью Vuex.
Все готовы к Vue?
Хотя это руководство длинное, я хотел собрать всю информацию в одном месте, чтобы вам было легче изучить Vue.
Если вы хотите расширить свой стек, вы также можете ознакомиться с другим моим руководством по началу работы с React.
Как всегда, здесь есть еще несколько материалов, которые помогут вам изучить Vue:
Вы недавно изучали Vue.js? Каким был ваш опыт обучения по сравнению с изучением других языков программирования?
Хотелось бы услышать ваши мысли в комментариях!
