Как стать автором
Обновить

Кулинарный гид по Vue.js: всё о props

Уровень сложностиСредний
Время на прочтение21 мин
Количество просмотров12K

Привет, Хабр! В этой статье разберемся, как frontend-разработчику готовить на «кухне» props. Выбирайте подходящий уровень сложности: джуны-поварята смогут лучше разобраться в работе и применении props на фреймворке Vue.js, а еще мы затронем тему валидации. Для мидлов и более опытных специалистов — настоящих шеф-поваров мы приготовили продвинутые кулинарные техники props, где можно освежить в памяти некоторые детали или решить проектную проблему, если замылился глаз. 

Props – от слова «properties» (здесь и дальше будем использовать слово «props») – это специальные атрибуты, используемые в экосистеме Vue для передачи данных в компоненты. Они являются частью системы реактивности, позволяют определять типы данных и проводить с ними валидацию.

По большей части мы будем покрывать основы передачи props. Поэтому статья будет актуальна как для Vue 2, так и для Vue 3, поскольку по части объявления props отличий мало. Но так как в Composition API и TypeScript все же они есть, то мы рассмотрим их тоже.

Если вы подходите под все эти условия, то добро пожаловать, мы начинаем наш кулинарный гайд! Bon appétit!

Читать далее
Всего голосов 13: ↑12 и ↓1+11
Комментарии5

Как типизировать Vuex Store

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров3.5K

Всем привет!

В этой статье мы поймем, нужно ли вам типизировать Vuex Store или нет, и если вы достаточно отчаянны, поймем, как его типизировать и не пасть смертью храбрых.

You are welcome!

Хочу типизировать Vuex
Всего голосов 2: ↑2 и ↓0+2
Комментарии2

Два frontend фреймворка. Два подхода

Уровень сложностиСредний
Время на прочтение16 мин
Количество просмотров9.6K

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

Читать далее
Всего голосов 7: ↑1 и ↓6-5
Комментарии12

Причины говнокода во фронтенде. Мнение мимокрокодила

Уровень сложностиПростой
Время на прочтение10 мин
Количество просмотров35K

Мне не раз попадались такие проекты, от кода которых берет оторопь. Такое чувство, что сами авторы не смогут объяснить - почему у них все выглядит именно так. В этот момент у меня возникает вопрос: как так получилось? Если вас он тоже волнует, то могу пожелать лишь приятного чтения.

Читать
Всего голосов 77: ↑65 и ↓12+53
Комментарии118

Распознавание лиц на коленно-прикладном уровне

Время на прочтение7 мин
Количество просмотров16K
В общем и целом, распознавание лиц и идентификация людей по их результатам выглядит для аксакалов как подростковый секс — все о нем много говорят, но мало кто практикует. Понятно, что мы уже не удивляемся, что после загрузки фоточки с дружеских посиделок Facebook/VK предлагает отметить обнаруженных на снимке персон, но тут мы интуитивно знаем, что у соцсетей есть хорошее подспорье в виде графа связей персоны. А если такого графа нет? Впрочем, начнем по порядку.

Какой-то черт прется в дверь с коробкой
Читать дальше →
Всего голосов 22: ↑22 и ↓0+22
Комментарии4

Веб-приложение на Kotlin + Spring Boot + Vue.js

Время на прочтение40 мин
Количество просмотров46K
Добрый день, дорогие обитатели Хабра!

Не так давно мне представилась возможность реализовать небольшой проект без особых требований по технической части. То есть, я был волен выбирать стек технологий на своё усмотрение. Потому не преминул возможностью как следует «пощупать» модные, молодёжные многообещающие, но малознакомые мне на практике Kotlin и Vue.js, добавив туда уже знакомый Spring Boot и примерив всё это на незамысловатое веб-приложение.
Посмотреть, что из этого вышло
Всего голосов 19: ↑18 и ↓1+17
Комментарии21

MSK VUE.JS meetup #3 в Mail.ru Group: материалы с митапа

Время на прочтение1 мин
Количество просмотров4.4K


В сентябре в нашем офисе прошел большой митап по разработке на прогрессивном фреймворке vue.js. Мероприятие посетили 400 человек — это не может не радовать. В программе было 3 доклада: команда Delivery Club рассказала про технологическую сторону своей новой web-версии клиентского сайта. Ребята из MSK VUE.JS поделились опытом организации API. А ведущий разработчик Nuxt.js рассказал про основные фичи новой версии фреймворка. Под катом собрали для вас материалы с мероприятия.
Всего голосов 30: ↑30 и ↓0+30
Комментарии0

10 советов и приемов, которые помогут вам стать лучшим разработчиком на VueJS

Время на прочтение4 мин
Количество просмотров23K

Перед вами вольный перевод статьи "10 Tips & Tricks to make you a better VueJS Developer" с сайта Dev.to. Автор расскажет нам об интересных и полезных вариантах применения привычных нам средств VueJS.


Введение


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

Читать дальше →
Всего голосов 24: ↑23 и ↓1+22
Комментарии16

MicroSPA, или как изобрести квадратное колесо

Время на прочтение4 мин
Количество просмотров3.6K
Всем привет, меня зовут Андрей Яковенко, и я веб-разработчик компании Digital Design.

В нашей компании есть множество проектов, реализованных с помощью системы управления веб-контентом sitefinity, или по-простому CMS. Причины, по которым мы ее используем, были описаны ранее в этой статье. CMS – это, как правило, Multi Page Application, и сегодня я расскажу о том, что может дать внедрение frontend-фреймворков в решения на sitefinity и как это сделать.


Читать дальше →
Всего голосов 8: ↑3 и ↓5-2
Комментарии15

10 строк кода, которые уменьшат боль от вашего проекта на Vue

Время на прочтение10 мин
Количество просмотров15K

… или знакомство с плагинами Vue JS на примере интегрированной шины событий


Пара слов о…


Всем привет! Сразу оговорюсь. Я очень люблю VueJS, активно пишу на нем уже больше 2-х лет и не считаю, что разработка на нем может причинить боль хоть в какой-то значимой степени :)
С другой стороны, мы всегда пытаемся найти универсальные решения, которые помогут тратить меньше времени на механическую работу и больше – на то, что действительно интересно. Иногда решение оказывается особенно удачным. Одним из таких я хочу поделиться с вами. 10 строк, о которых пойдет речь (спойлер: в конце их окажется немного больше), родились в процессе работы над проектом Cloud Blue – Connect, который представляет собой достаточно крупное приложение на 400+ компонентов. Найденное нами решение уже интегрировано в самые разные точки системы и вот уже более полугода ни разу не требовало правок, поэтому его смело можно считать успешно проверенным на устойчивость.
Читать дальше →
Всего голосов 25: ↑19 и ↓6+13
Комментарии17

Что делает реактивную систему хорошей?

Время на прочтение14 мин
Количество просмотров6.8K

Этот пост является вторым в серии статей об авто-трекинге — новой системе реактивности в Ember.js. Я также обсуждаю концепцию реактивности в целом, и как она проявляется в JavaScript.


От переводчика: Крис Гарретт — работает в компании LinkedIn и является одним из core-контрибьюторов js-фреймворка Ember. Он принимал активное участие в создании нового издания фреймворка — Ember Octane. Одним из краеугольных камней этой редакции является новая система реактивности на основе автоматического отслеживания (autotracking). Несмотря на то, что его серия написана для Ember-разработчиков в ней затрагиваются концепции, которые полезно знать всем веб-программистам.
Читать дальше →
Всего голосов 7: ↑7 и ↓0+7
Комментарии1

Когда JavaScript-фреймворк не нужен

Время на прочтение3 мин
Количество просмотров5.5K

Фото — Maria Teneva, площадка Unsplash

Иногда React, Angular, Vue.js и т. д. — это лишнее

Правда ли, что JavaScript-фреймворков слишком много и выбор становится чересчур сложным? Или, может, мы просто забыли о соображениях производительности и о том, что за лишний трафик в итоге должны платить пользователи?

Вернемся в эпоху jQuery


Помните, было время, когда JQuery использовали для всего! JQuery то, jQuery сё — повсюду легкий аромат jQuery. На любом веб-сайте и в каждом веб-приложении — jQuery.

В чем причина популярности этой библиотеки?

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

Но пришло спасение — библиотека jQuery избавила сообщество JavaScript от этой головной боли. Правда, большинство из нас в результате стали лениться, поскольку перестали понимать, что происходит «под капотом».

Я прозрел, когда появился этот сайт.

Читать дальше →
Всего голосов 10: ↑5 и ↓50
Комментарии1

Возможности Vue, о которых не следует забывать

Время на прочтение5 мин
Количество просмотров17K
Мы в команде Ptah решили пойти чуть дальше привычных SPA и попробовали использовать Vue для конструктора лендингов. И теперь хотим поделиться частью нашего опыта.

Эта статья, прежде всего, для тех, кто только начал работать с Vue и хочет узнать лучше его особенности и возможности. Здесь я хочу рассказать о некоторых возможностях фреймворка, которые часто остаются незаслуженно забытыми начинающими разработчиками.
Читать дальше →
Всего голосов 18: ↑18 и ↓0+18
Комментарии21

Vue Storefront: Поднимаем backend

Время на прочтение6 мин
Количество просмотров5.9K

Продолжаю продвигать свою реферальную ссылку на IaaS-провайдера Exostate и запиливаю вторую статью своей рекламной кампании. В первой статье я развернул и запустил приложение 'vue-storefront' как отдельный сервер, без привязки к каким-либо данным, маскируя таким нелепым образом свой коммерческий интерес в продажах сервисов Exoscale. Мои жалкие потуги были успешно вскрыты коллегой aol-nnov и я был выведен на чистую воду. Что ж, второй этап моей рекламной кампании по результату не отличается от первого — такая же страница с ошибкой:


image


Фронт теперь привязан к backend'у ('vue-storefront-api'), но в браузере клиента то же самое безрадостное сообщение "Something went wrong ...". Поэтому я, отбросив ложную скромность, вынес свою реферальную ссылку до ката, а всю маскировку поместил под кат — детали того, каким образом я совмещал "Vue Storefront" с "Vue Storefront API".

Читать дальше →
Всего голосов 15: ↑10 и ↓5+5
Комментарии0

Vue Storefront: Заливаем данные в ES

Время на прочтение7 мин
Количество просмотров4.2K

Ещё один пост в рамках рекламной кампании по продвижению своей реферальной ссылки. В первой и второй публикации я поднял фронт-сервер, api-сервер и два вспомогательных сервиса (Elasticsearch & Redis), которые используются api-сервером. На этом шаге я попытался залить какие-то данные из существующего Magento-проекта в моё тестовое VSF-приложение.


На третьем шаге появился некоторый прогресс. PWA-приложение в браузере перестало сообщать об ошибке и начало показывать более-менее пристойную домашнюю страничку. Пусть даже и не с теми данными, которые были в моём Magento-проекте. Любое изменение лучше, чем топтание на месте.


КДПВ


Под катом описание того, каким образом залить данные из своего Magento-магазина в приложение Vue StoreFront так, чтобы вместо них клиенту показывались демо-данные. Да, результат опять не очень, но для рекламной кампании это не самое главное.

Читать дальше →
Всего голосов 5: ↑4 и ↓1+3
Комментарии0

Vue Storefront: Импорт каталога из Magento 2

Время на прочтение4 мин
Количество просмотров3.6K

Наконец-то получилось увидеть данные из Magento (категории и продукты) в приложении Vue Storefront (VSF). Это уже четвёртая статья (1, 2, 3), в которой я описываю процесс изучения возможностей интеграции VSF с электронным магазином на базе Magento 2, и первая, где данные из Magento проскочили в браузер покупателя.


КДПВ


Под катом ссылка на скрипты развёртывания и краткое описание шагов.

Читать дальше →
Всего голосов 3: ↑3 и ↓0+3
Комментарии0

Django vue generator

Время на прочтение1 мин
Количество просмотров5.2K
Как подружить проект на rest framework с vue? Можно создать в каталоге с django проектом проект на vue с помощью vue-cli. Перейдя в него и набрав yarn build, на выходите получим в каталоге dist файлы index.html и каталоги css и js. Ага, css и js можно положить в static, а из index.html сделать шаблон.
Читать дальше →
Всего голосов 7: ↑4 и ↓3+1
Комментарии0

Разработка простого приложения непростым способом

Время на прочтение27 мин
Количество просмотров6.4K

Всем привет!


Относительно давно мне прилетела задача по учебе написание курсовой, и я её наконец-то написал. Чтобы добро не пропадало, я решил оформить её (курсовую) в виде статьи. Надеюсь, статья будет полезна не только для тех, кто хочет погрузиться в мир Web разработки, но и так же для тех, кто считает, что современный веб не так уж и сложен, чтобы платить высокую ЗП.


Итак, тема курсовой:


Разработать программу «Поиск». Программа должна осуществлять поиск заданных слов в текстовом файле. Слова последовательно вводятся с клавиатуры. Для каждого слова должно определяться количество вхождений и номера строк текста. Если указанное слово в файле отсутствует, то программа должна выводить соответствующее сообщение.

Разработкой всяких SPA и PWA я занимаюсь очень давно, но вот как-то не было случая пощупать Electron. Не спеша закрывая MS Visual Studio, подумал, почему бы нет...


И, пожалуй, начнём с инструментов разработчика.

Читать дальше →
Всего голосов 9: ↑5 и ↓4+1
Комментарии8

Angular для Vue разработчиков

Время на прочтение13 мин
Количество просмотров10K

Сейчас во фронтенде среди фреймворков есть три явных лидера: Angular, React и Vue. Думаю, мы можем судить о любви разработчиков к проекту по количеству звезд на GitHub. На момент написания данной статьи у Vue уже 161 тысяча звезд, на втором месте находится React с 146 тысячами, а на третьем месте — Angular со своими скромными 59.6 тысячами.


С первого взгляда может показаться, что Angular не настолько популярный, как другие фреймворки, но если обратиться к результатам исследования статистики с портала Tecla, то мы увидим, что Angular занимает довольно большую долю рынка. Например, по данным исследования Angular работает на более чем 400 тысячах сайтов, в то время как Vue — на 100 тысячах. Предлагаю в этом разобраться. Рассмотрим, за что разработчики любят Vue, почему много приложений написаны на Angular и какие выгоды может получить разработчик при использовании фреймворка от Google конкретно для себя.


Читать дальше →
Всего голосов 35: ↑34 и ↓1+33
Комментарии32

Использование VueJS вместе с Django

Время на прочтение4 мин
Количество просмотров29K
Перевод статьи подготовлен в преддверии старта курса «Web-разработчик на Python».




Введение


Сейчас я работаю над очень интересным проектом. И в нем все сложно, потому что сам проект очень масштабный, а я занимаюсь им один в свободное время, при этом работая полный рабочий день. Поэтому я должен быть эффективным. К счастью, я использую Django с его подходом «батарейки в комплекте».

Я использую весь функционал Django, который ускоряет разработку, и я не хотел бы упускать из виду его шаблонизатор. Поэтому бэкенд на Django и фронтенд на JavaScript SPA – это для меня не вариант. Однако даже самый заядлый бэкенд-разработчик должен признать, что некоторые вещи нужно реализовывать на стороне клиента. Незначительные действия пользователя не должны требовать перезагрузки страницы. Помимо этого, некоторые части веб-приложения, которое я создаю, требуют довольно сложного взаимодействия с пользователем.

По традиции, можно было бы смешать Django и jQuery, чтобы получить желаемое поведение. Но сейчас есть более новые технологии JavaScript, такие как React и Vue. Поскольку наша цель состоит в том, чтобы найти фреймворк, который мы сможем использовать вместе с Django не переписывая все с нуля, мы воспользуемся Vue, как более легкой альтернативой. В этой статье я покажу, как начать пользоваться Vue вместе с Django с минимальными усилиями.
Читать дальше →
Всего голосов 9: ↑9 и ↓0+9
Комментарии0