Введение в Vue.js для людей, которые знают достаточно jQuery, чтобы пройти

Логотип для Vue.js

У меня были отношения любви и ненависти с JavaScript в течение многих лет.

Я познакомился с языком благодаря любимому мальчику, занимающемуся дизайном и разработкой, jQuery. Видите ли, в то время, когда я начал изучать JavaScript как «Дизайнер, который кодирует», работа с jQuery была волшебным опытом. Я мог бы сделать модальные моды fadeIn и fadeOut. Имея стороннюю библиотеку, я мог бы добавить в свой портфель прокрутку параллакса всего одним вызовом функции. Почти все, о чем я мог мечтать, было заключено в один файл размером ~ 100 КБ…

И тут вышел Angular. У меня не было выбора, кроме как переделать весь мой портфель с рамкой. И тогда появился React. У меня не было выбора, кроме как переделать все мое портфолио с библиотекой. А потом вышел Vue.js. У меня не было выбора, кроме как переделать все мое портфолио с библиотекой ... Вы видите, куда это идет.

Если не считать всех шуток, я с большим удовольствием оттачивал свои возможности JavaScript, создавая вещи здесь и там с помощью этих различных фреймворков и библиотек. Я прочитал бесчисленные статьи и учебные пособия, но ни одна из них не увлекла меня больше, чем статья Шу Уэсуги «Введение в React.js для людей, которые достаточно хорошо знают jQuery, чтобы обойтись».

Шу приглашает читателей, которые, как предполагается, имеют некоторый уровень владения основами JavaScript и jQuery, в путешествие по миру React, когда они создают клон компонента Twitter «составить твит».

Эта концептуальная структура была очень полезна для меня, как человека, который учится лучше всего. Действительно, всякий раз, когда выходит новая библиотека JavaScript, я возвращаюсь к примеру из этой статьи, чтобы проверить воды. Итак, я хотел бы позаимствовать эту рамку, поскольку я проведу вас через весь мой недавний опыт изучения Vue.

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

Что мы строим

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

Окно «Создать твит» в Твиттере

Верьте или нет, этот компонент пользовательского интерфейса является отличным примером того, как Vue (и React, в соответствии с Shu) может улучшить вашу жизнь как разработчика JavaScript / jQuery. Элементы этого компонента, которые мы сосредоточимся на создании сегодня: