Твиттер на Vue.js: руководство для начинающих

Мы построим свой твиттер с лайками и комментариями! Присоединяйся, заодно разберешься с крутым JavaScript-фреймворком Vue.js.

Твиттер на Vue.js: руководство для начинающих

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

У него есть одно очень важное преимущество перед прочими фронтенд-инструментами: низкая кривая обучения. Правда-правда, для работы достаточно знать только HTML, CSS и JavaScript основы.

Все хорошие JavaScript фреймворки, и Vue в том числе, структурируют приложение в духе лучших практик, позволяя легко и просто расширять его по мере необходимости. К услугам разработчика также внушительный набор полезных утилит для интерфейса, чтобы не изобретать собственные колеса по поводу и без.

Фреймворк Vue.js имеет по-настоящему крутую экосистему. В нее прямо из коробки входит то, что вы привыкли искать в различных дополнительных библиотеках, – Vue Router и Vuex.

Кажется, похвал достаточно. Вам наверняка уже не терпится начать работать с этим замечательным инструментом. Не будем медлить – создадим на Vue свой твиттер!

Заготовка

Вот так это будет выглядеть:

See the Pen VueVixens Tutorial by Ali Spittel (@aspittel) on https://codepen.io‘>CodePen.0

Тут есть все, что нужно:

  • готовый пост Hello World;
  • сердечко, чтобы его лайкнуть;
  • и поле для ввода комментария.

Пост нужно просто вывести на страницу. Сердечко будет реагировать на нажатия и становиться красным, если твит вам понравится. Кроме того, как в заправском твиттере, мы будем отслеживать размер комментария.

Итак, HTML и CSS уже есть, осталось самое простое – JavaScript-код 🙂 Vue.js нам в этом поможет.

Настройка

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

Codepen все сделает за вас. Нажмите на кнопку с шестеренкой, откройте вкладку JavaScript и наберите Vue в поле поиска. Библиотека подключится к вашему проекту автоматически.

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

Этому экземпляру можно передать объект, содержащий конфигурацию приложения и определение всей его логики.

Прежде всего нужно заполнить поле el – DOM-элемент, который будет служить контейнером для всего приложения. Именно внутри этого контейнера Vue.js сможет развернуться на полную катушку. У нас это будет блок с классом status:

Данные

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

Все динамические данные нужно размещать в объекте data, тогда Vue сможет вывести их на страницу. Давайте сразу же это и сделаем.

Если вы когда-нибудь работали с Pug, Handlebars или другим шаблонизатором, то найдете синтаксис интерполяции Vue довольно знакомым:

Вычисляемое выражение, например, переменная, помещается в двойные фигурные скобки. Потом фреймворк заменит всю эту конструкцию на текст "Hello World" из объекта data.

Поменяете текст в поле tweetText объекта data – он изменится и на странице. Вот она – динамика!

Вот так безо всяких усилий мы решили первую задачу – вывод поста. Что еще осталось сделать?

  • Изменять по клику вид сердечка-лайка
  • Считать количество оставшихся символов в поле ввода комментария

Для решения этих задач тоже потребуются некоторые данные, которые нужно поместить в объект data:

Кстати, charactersRemaining уже можно отправить на страницу:

Лайками займемся через секунду, а пока поговорим о методах.

Методы

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

Подсчет символов

Начнем, пожалуй, с подсчета символов и добавим метод countCharacters:

Какова логика этой функции?

  • Сначала нужно посчитать, сколько символов пользователь набрал в textarea.
  • Затем вычесть это количество из лимита (280 символов).

Для текста комментария нужно создать отдельное поле в объекте data. А при вводе оно будет обновляться.

Тут появился новый атрибут v-model. Его миссия – синхронизировать содержимое textarea, которое вводит пользователь, и значение поля commentText из объекта data. v-model – это одна из директив Vue. Все директивы начинаются с префикса v-.

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

Зная текст комментария, легко посчитать, сколько символов осталось:

Метод countCharacters необходимо запускать при каждом изменении textarea. Чтобы отслеживать эти события, воспользуемся еще одной директивой – v-on. Это почти то же самое, что и привычный вам addEventListener, только гораздо удобнее и симпатичнее.

Директива v-on:input="countCharacters" будет отслеживать событие input и запускать countCharacters при каждом его возникновении:

I like it! ♥️

Вот мы и добрались до сердечка. Помните, что его нужно изменять при клике? Добавим еще один метод в объект methods:

Эта функция будет просто переключать значение свойства data.liked. К нему также можно обратиться через объект this:

Запускать метод toggleLike нужно при клике на сердечко – это мы уже умеем:

Условия

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

Vue прекрасно умеет работать с логическими данными благодаря условной директиве v-if. Достаточно просто вывести нужный эмоджи в блоке .reactions:

Теперь, если лайка нет, сердечко будет полностью пропадать. Но мы запланировали другое поведение – оно должно становиться прозрачным. Чтобы добиться этого, добавим альтернативное условие:

Ура! Можно лайкать!

Вот что получилось на данный момент:

See the Pen VueVixens Tutorial Finished by Ali Spittel (@aspittel) on CodePen.0

Компоненты

Теперь у нас есть все необходимое для работы с одним-единственным твитом. Почему бы не сделать целую ленту разных постов, как в настоящем твиттере? Давайте превратим готовый код в отдельный компонент.

Все современные JavaScript фреймворки используют компонентный подход. Он позволяет легко организовать расширяемые интерфейсы, используя большие куски верстки и логики повторно. Если вы собираетесь вставлять некоторый фрагмент в приложение более одного раза, скорее всего, вам нужно превратить его в компонент.

В реальном приложении, скорее всего, следовало бы разбить целый твит на подкомпоненты:

  • комментарий;
  • лайк;
  • изображение профиля и т. д.

Но для простоты и наглядности сейчас мы не будем этого делать.

Создание компонента

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

Метод Vue.component позволяет использовать на странице несколько одинаковых блоков с разными данными. Он принимает два аргумента:

  • название компонента, которое станет его HTML-тегом – пусть будет tweet;
  • объект конфигурации со всей логикой.

Обратите внимание, поле data из простого объекта превратилось в функцию, которая этот объект возвращает.

Для компонента нужен HTML-шаблон, который будет отображаться на странице. Просто положим туда уже существующий код:

Компонент твита готов!

Данные компонента

Конечно, каждый твит должен иметь собственный текст. Он будет передаваться извне через атрибут тега tweet. А чтобы получить его, нужно добавить название атрибута в массив props:

Vue-твиттер

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

И подготовить HTML-базу для него:

А внутри главного контейнера уже можно разместить пару первых твитов:

Два одинаковых компонента с разными входными данными дают нам два самостоятельных твита, которые можно лайкать и комментировать.

Обратите внимание, HTML-атрибуты тега указаны в kebab-case, а в массиве props свойство записано в camelCase, как рекомендует язык JavaScript. Преобразование между этими форматами осуществляется автоматически.

See the Pen VueVixens Tutorial Componentized by Ali Spittel (@aspittel) on CodePen.0

Циклы

Хардкодить твиты в HTML – неправильно. Обычно есть некоторая структура данных, содержащая несколько постов, динамически полученных из базы. Нужно перебрать все сообщения и вывести их в нужном формате. Язык программирования JavaScript для подобных задач использует циклы. Конечно, и у Vue такой найдется.

Исходные данные должны находиться в поле data экземпляра приложения:

А вывести их на страницу поможет директива v-for:

Что еще за v-bind? Эта штука позволяет привязать атрибуты (key и tweet-text) к некоторым данным и автоматически их обновлять при необходимости.

Атрибут key нужен фреймворку для однозначной идентификации объектов, генерируемых в цикле.

Теперь можно добавить в массив сколько угодно твитов – и все они появятся на странице!

See the Pen VueVixens Tutorial Componentized vfor by Ali Spittel (@aspittel) on CodePen.0

Полезные ресурсы для изучения Vue

Компонент твита можно расширить множеством интересных функций:

  • изменять аватар от поста к посту;
  • выводить дату создания или данные пользователя;
  • сообщать о превышении лимита символов и блокировать ввод;
  • использовать API Twitter для вывода реальных твитов;
  • публиковать комментарии.

Vue все эти возможности нам предоставляет, нужно только узнать его получше.

Вот несколько хороших ресурсов для этого:

Оригинал от Ali Spittel: A Complete Beginner’s Guide to Vue

Расскажите нам о своих проектах, созданных с Vue 🙂

proglib.io

Добавить комментарий

Ваш e-mail не будет опубликован.

14 + десять =