💡 Встроенный редактор на 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

Курс по Vue.js

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

📺 YouTube

WebDEV #видео