Как сделать? выбор цвета с помощью Vue!

1656579137 kak sdelat vybor czveta s pomoshhyu vue

Содержание статьи

от ZAYDEK

Внимание: цвета могут показаться милее, чем есть!

Прежде чем перейти к статье, я просто хочу поделиться, что я создаю продукт, и я хотел бы собрать некоторые данные о том, как лучше обслуживать веб-разработчиков. Я создал краткую анкету, чтобы проверить ее до или после прочтения этой статьи. Пожалуйста, посмотрите это – спасибо! А теперь вернемся к нашему обычному запланированному программированию.

V-DOiGlgMR2tBo5RNps7uY2WwC9tbEX9e6uF

Привет Интернет!

Я Зайдек, и я новичок в веб-разработке. У меня есть опыт графического дизайна и программирования, поэтому для меня было увлекательное ознакомление с интерфейсом.

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

Как вы можете делать такие заявления, сэр?

— Любишь ты

Дело в том, что большинство людей научились работать в Интернете до того, как мы (в целом) поняли, как работать в Интернете! Включая меня! ? Из-за чего, честно говоря, наверное, я дольше всего отказывался учиться веб-разработке. Это было просто таким сломанным!

Но времена, когда они меняются, и веб-разработка никогда не была более доступной или упорядоченной. Так что для меня большая честь и привилегия познакомить вас с Интернетом в 2018 году, а возможно, даже и дальше!

Я тоже учу, как это? работает и многое другое в курсе Vue, который я только что выпустил. Изучите Vue из основ, а также как создавать некоторые вещи! Нажмите здесь, чтобы зарегистрироваться!

nehx34-E7AQRjhDTfRXmz0fTCXevirAjWeOf
Нажмите, чтобы зарегистрироваться на мой бесплатный курс Vue!

Scrimba.com – новый интерактивный веб-сайт для обучения и обмена кодом. Скринкасты можно прерывать и редактировать, что делает обучение активным и весело экспериментировать!

Итак, в чем дело с Vue?

Так почему Vue? Это замечательный и справедливый вопрос, который вы должны задать. Некоторые люди протестуют и попирают идею использования любых рамок, и я считаю, что это опасная идея. Однако я предлагаю, чтобы любой инструмент, который вы используете, был очень обдуман и продуман в том, почему вы его используете.

Я взял Vue, потому что хочу использовать более новые инструменты, которые не слишком популярны. Я хотел, чтобы они учились у инструментов, которые были раньше (или, другими словами, не слишком новейшие). Они должны иметь самую лучшую в своем классе документацию и критическую массу пользователей.

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

vCpg0aDDKpn7wSPw4iEbuE0eK9fHyAIF41aE
Кстати, этот сайт создан с помощью Vue.js! ?

Кроме того, Vue – это чрезвычайный проект с открытым кодом, финансируемый государством и имеющий отличный опыт разработчиков! Как пользовательский опыт, но для разработчиков. Это имеет прекрасное последствие, что обычный разработчик теперь может создавать интерактивные веб-сайты интуитивно. И Vue опирается на одну из самых успешных идей из Angular-React wars, а именно Virtual DOM. Давайте поговорим об этом сейчас.

Виртуальный WUT?

— Интернет Вы

Виртуальный DOM, yo. LOL, извините. Давайте сделаем резервную копию — DOM — это сокращение от документ-объект-модель. Я думаю о DOM как о парадигме того, как мы думаем о тексте как о структуре данных для создания того, что мы называем веб-страницами. А виртуальная DOM – это разумная абстракция для работы с текстом, проходящим между элементами, например <p>hello, worlд!

. На идиоматическом веб-сайте на основе Vue это сомething like <p>;{{ message }}

где данные хранятся внутри JavaScript!

Зачем полагаться на JavaScript для простого сайта?

— Невиновен ты

Это отличный (и справедливый) пункт. Но полагаться на определенный JavaScript для создания веб-сайтов, статических или динамических, является значительным преимуществом. Мы можем писать и создавать веб-сайты программно вместо копирования данных. Когда данные отделяются от HTML, так же как CSS отделяется от HTML, именно тогда могут начаться волшебные вещи. ?

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

Так что… как насчет того выбора цвета, да?

VNZfvY7c9sYl-1JCG5tll3QJPgWjXNTYgD8z
rBvQ8vNQMBafRf3hmnV8-cyALn5xd01lh81P
jkR1hOGbO8JVeb6T-Z7KXc7aPDgHPFNyWBSC
Нажмите, чтобы выбрать цвет любой цвет!

Простите за лепет! Мне трудно не говорить об этом долго, отчасти потому, что это так увлекательно. А также частично из-за широкого спектра возможностей, когда единственный разработчик может отвечать за создание красивых и интерактивных веб-приложений/бизнесов. Вы говорите, предприятия? Да – следите за мной в Твиттере, и я обязательно подпишу! ?

Без лишних слов, вот HTML для веб-сайта:

AVS2iaAAgowtEcDXSlKWV6dPHUldlCE8EvCV

Psst… полный код доступен в девятом ящике.

Испытываете шок? Дело в том, что давайте подумаем о сложности сайта, который я вам показал. На самом деле это просто поле с двумя ячейками, одна из эмодзы, а вторая с повторяющимся 12 раз текстом. Да, есть некоторые отступления, есть некоторые градиенты, но основной дизайн не изменился. Так что если бы сложность кода была пропорциональна сложности дизайна?

zhdMTMFVhE-GWzYCcw9lhK90NVViglhCJqn2
wHs5kNPsPAY3xGrQTbbqUFWr2iN4-OfWXu45
Это то, что я называю отладчиком CSS. Вы можете узнать больше об этом (и как им пользоваться), нажав здесь.

Здесь я применил отладчик CSS, чтобы устранить неоднозначность дизайна, но это касается только CSS. Что важнее здесь, истинное значение Vue, так это то, как мы можем думать о нашем сайте с точки зрения данных, а не элементов HTML.

Итак, посмотрите еще раз на эти изображения. Если мы думаем о нашем сайте исключительно с точки зрения данных, сколько там данных?

Позвольте мне сейчас поделиться используемой базовой структурой данных:

7b0uUS6QZGfjM3FEpeh6z-j4rQqHggb7kole
emojify() является вспомогательной функцией

Следующее предложение, пожалуй, самое важное: Vue позволяет нам думать о нашем сайте с точки зрения данных, отдельно от HTML; это революция в том, как мы можем создавать Интернет!

Чтобы быть явным, я показываю вам массив анонимных объектов, каждый из которых имеет два ключа: emojiи color. Теперь, когда мы можем представить веб-сайт в терминах данных, мы просто перебираем данные с помощью Vue v-for и специальный компонент

Да, это правда. Итак, как насчет компонентов?

Компоненты – да! Во-вторых, после отделения данных от HTML, одна из самых крутых вещей, которую предлагает Vue, – это дизайн на основе компонентов. Компоненты могут помочь нам отвлечь блоки HTML/CSS/JS в многократный блок: компонент.

Быстрая заметка: Я решил, что было бы лучше сначала научиться использовать Vue без процесса сборки, то есть я не использую однофайловые компоненты. Но я использую компоненты через Vue.component().

Помните о <swatch> элемент, который я демонстрировал раньше в исходном коде? Это специальный компонент, который я разработал с помощью Vue, чтобы отвлечь элемент от реализации. Это принципиальная концепция, поскольку это значит, что мы можем начать мыслить более функционально, чем императивно.

Какая разница? Функциональный дизайн заботится о результате, тогда как императивный дизайн заботится о результате и внедрение. Проектирование компонента является обязательным процессом, в то время как его использование является функциональным. ?

Aix-LCVU5Ffx7zQfjKXdoFQKFcYHkHWtKqkR

Это реализация для swatch элемент, показанный ранее. Как это работает, так это то, что Vue сканирует DOM на наличие экземпляров. swatch и заменяет его кавычками HTML внутри компонента template значение. Это означает, что мы можем произвести серьезный рефакторинг, чтобы лучше понять наш веб-сайт с точки зрения концепций, а не постоянно беспокоиться о том, как что-то должно быть разработано.

Выучить Vue нужно гораздо больше, поэтому я написал еще две статьи на эту тему. Пожалуйста после этой статьи посмотрите!

ozARrBWWUuMdflw5O99w8TL9fpmXkq-IrWxz
Bjc0ppEmnmqc5KQKLRIHCXPHnOTVdTpmf0Lj
Слева: «Изучите Vue.js в этом бесплатном курсе! ?✨” Правильно: “Создание div Шрёдингера? с Vue!»

Ну ты передумал.

Я знаю, что это может быть очень важно, особенно для чего-то такого безобидного, как ? выбор цвета. Но то, что я вам показал это (кроме CSS) 90% кодовой базы. Есть, по крайней мере, несколько вспомогательных функций, которые я пропускаю, но дело в том, что обсуждаемые методы и идеологии составляют гораздо больше, чем симпатичное веб-приложение. Это означает, что отдельное лицо может создавать красивые и функциональные продукты и услуги для других.

Я также предполагаю, что Vue – это гораздо больше, чем фреймворк. В сочетании с правильным языком сервера (давайте послушаем это для Go!), изучение и использование Vue добавляет гораздо больше. Idiomatic Vue также может научить, что означает современная разработка программного обеспечения и как получить доступ к миллиардам (!) людей, которые подключены сейчас, без тех же технических барьеров, которые возникают с разработкой приложений.

Итак, пожалуйста, отправляйтесь в прекрасный мир и научитесь немного Vue! Вы можете(!) создавать удивительные вещи и даже изменять жизнь людей, даже свою собственную. И если это поможет, попробуйте бесплатный курс!

xdrJi-5Z3EID6sEgh8dvUk7u335SFakRO4SX

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *