Автору статьи хотелось по-настоящему понять, в чём заключается разница между React и Vue.

Для проведения эксперимента создано два довольно стандартных To-Do-приложения, которые позволяют пользователю добавлять элементы в список дел и удалять их из него. Оба приложения разработаны с использованием стандартных CLI.

Сравнение Vue и React

#vue #react

​​Набор хелперов для Vue.js

Vue.js cheatsheet

#vue #cheatsheet

Vant — более 60 компонетов для Vue.js. Библиотека включает в себя инпуты, разные виды мобильных меню, виджеты, поля для поиска, формы загрузки файлов и многое другое. Она еще поддерживает кастомные темы и имеет отличную документацию.

Демо | GitHub

#vue #components

Buefy — это библиотека, которая представляет собой набор компонентов, построенных с использованием возможностей Vue и Bulma. На GitHub она собрала около 7 тысяч звёзд, компоненты, которые можно в ней обнаружить, подходят, без дополнительных усилий со стороны разработчика, для создания приложений, использующих отзывчивый дизайн. Хотя компонентов в этой библиотеке не так уж и много, она, определённо, достойна внимания.

Демо | GitHub

#js #library #vue #bulma

Nuxt.js — это фреймворк для создания универсальных приложений на Vue.js с использованием Node.js. С помощью него можно рендерить UI на сервере и генерировать статические сайты. Он абстрагирует большую часть сложной конфигурации, связанной с управлением такими вещами, как асинхронные данные, промежуточное программное обеспечение (middleware) и маршрутизация.

Демо | GitHub

#js #framework #vue

Fullstack Vue Book. Полное руководство по Vue
Х. Джирдех, 2018

Изучите Vue.js. Обновленное подробное руководство по Vue. Создавайте элегантные приложения с JavaScript и Vue.js. Создавайте гладкие, динамичные веб-приложения с Vue.js. Fullstack Vue — это учебная книга, с помощью которой вы сможете быстро писать приложения Vue.

8 глав
Каждая глава посвящена другой части экосистемы, но в контексте приложения. Итак, вы увидите, как все сочетается.

Скачать книгу | Больше книг

#book #js #web #vue

📖 Vue on Rails
🖋 Bryan Lim, Richard LaFranchi, 2019

Создавайте современные и прогрессивные веб-приложения с помощью Vue.js и Ruby on Rails. Поскольку сообщество Rails принимает JavaScript, эта книга отвечает на ваши самые насущные вопросы, в том числе о том, как интегрировать интерфейсные технологии с Rails, нужно ли создавать одностраничное приложение, когда и как использовать JavaScript в вашем проекте, как создать основу для Vue. компонент в Rails и как настроить Vue.js в проекте Rails.

💾 Скачать книгу

WebDEV #book #vue #js

React или Vue или Angular

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

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

📺 YouTube

WebDEV #видео #React #Angular #Vue

💡 Меню навигации на Vue.js

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

1) Модель (Model) – другими словами, данные приложения. В рамках библиотеки это js-объект, содержащий переменные и их исходные значения.

2) Представление (View) – HTML-код отображающий данные для пользователя и содержащий eventListner’ы для взаимодействия с моделью.

3) ViewModel – в терминологии MVC это был бы контроллер. Фактически, в рамках Vue.js ViewModel – связующее звено между моделью и представлением.

Демо на CodePen.

WebDEV #советы #Vue

💡 Меню навигации на Vue.js

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

— Простой js-объект для опций
— {{Двойные скобки}} для шаблонов
— Встроенные атрибуты вида «v-something» для добавления функциональности непосредственно в HTML.

WebDEV #советы #Vue

💡 Встроенный редактор на Vue.js

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

Демо на CodePen.

Продолжение следует...

WebDEV #советы #web #Vue

💡 Встроенный редактор на Vue.js

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

WebDEV #советы #web #Vue

💡 Форма заказа на Vue.js

В этом примере показан список услуг и суммарная стоимость выбранных. Так как наши услуги хранятся в массиве, мы можем использовать директиву v-for для перебора всех записей и их отображения. Если в массив добавлен новый элемент или изменен любой из старых, Vue автоматически обновит данные и покажет новые.

Демо на CodePen.

Продолжение следует...

WebDEV #советы #Vue

💡 Форма заказа на Vue.js

Первая часть.

Чтобы отобразить цены в правильном формате, нам необходимо определить простой фильтр валюты. Фильтры позволяют изменять или фильтровать данные модели. Чтобы определить настраиваемый фильтр, используем следующий синтаксис:

// Определяет пользовательский фильтр "валюта"
Vue.filter('currency', function (value) {
    return '$' + value.toFixed(2);
});

Фильтр довольно прост – он добавляет знак доллара и правильную цифровую дробь.

WebDEV #советы #web #Vue

💡 Мгновенный поиск на Vue.js

Теперь создадим приложение, в котором будут представлены некоторые статьи-примеры. Приложение также будет иметь текстовое поле поиска, позволяющее фильтровать, какие статьи будут отображаться. Все статьи будут храниться в массиве, и те из них, что соответствуют поисковому запросу, будут в попадать в массив filteredArticles.

Демо на CodePen.

Продолжение следует...

WebDEV #советы #Vue

💡 Мгновенный поиск на Vue.js

Перед прочтением рекуомендуем ознакомиться с первой частью.

...Поле ввода привязано к модели searchString. Когда текст вводится, модель мгновенно обновляется, и массив filteredArticles генерируется снова. Таким образом, мы можем создать поиск в реальном времени, не заботясь о рендеринге или настройке прослушивателей событий.

WebDEV #советы #Vue

💡 Переключаемая сетка на Vue.js

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

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

Демо на CodePen.

WebDEV #советы #Vue

📖 Building web applications with Vue.js
🖋 Ralph Steyer, 2022

Начните работать с Vue.js быстро и легко с помощью этой книги.

Эта книга представляет собой компактное и практическое введение в популярный Vue.js. Используйте концепцию MVVC для приложений в Интернете на основе паттернов проектирования MVC и легко создавайте одностраничные веб-приложения. Вы будете использовать один из мощных фреймворков, основанный только на элементарных стандартных технологиях WWW.

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

💾 Скачать книгу

WebDEV #book #Vue #js

📖 Front-End Development Projects with Vue.js
🖋 Raymond Camden, 2020

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

💾 Скачать книгу

WebDEV #book #Vue

📖 Full-Stack Web Development with Go
🖋 Nanik Tolaram, 2023

Эта книга проведет вас через создание и разработку полного современного веб-сервиса, включая аутентификацию, промежуточное ПО, рендеринг на стороне сервера, базы данных, а также современные фронтенд-фреймворки и API на базе Go. Вы начнете со структурирования приложения и таких важных аспектов, как сетевое взаимодействие, а затем интегрируете все части вместе, чтобы создать полноценный веб-продукт. Далее вы узнаете, как создать и отправить полноценный продукт, начав с фундаментальных строительных блоков создания бэкенда на Go. Вы будете применять передовые методы работы с cookies, API и безопасностью, а также совершенствовать свои навыки работы с быстрорастущим фронтенд-фреймворком Vue. Когда ваше приложение с полным стеком будет готово, вы поймете, как вывести его в продакшн и будете готовы обслуживать клиентов.

💾 Скачать книгу

WebDEV #book #API #web #Go #Vue