Изучите Vue.js на этом бесплатном курсе! ?✨

1656581897 izuchite vuejs na etom besplatnom kurse

от ZAYDEK

Давайте сделаем что-нибудь Vueseful

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

1*G1PUKcevhmpXSKUeX9XnLA

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

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

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

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

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

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

Vue – это не одно

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

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

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

Что охватывает курс

1*ixssvvdIf64KQONR4Ugn7Q
1*spoAQtMm1OBMU1iciAZmzg
1*_mu96vH6fakViESA8XOmQg

Курс состоит из трех частей:

  1. изучение минимума JavaScript, необходимого для начала работы с Vue
  2. изучение основных концепций Vue, и
  3. обзор двух более продвинутых примеров (две милые и веселые веб-приложения, которые я сделал: Schrödinger’s Div ? и ? Color Picker).

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

  • отделение данных от DOM
  • идиоматический JavaScript
  • шаблонный и компонентный HTML
  • управление обработкой событий

Но прежде чем мы сможем перейти к этому, давайте сначала рассмотрим, как подключить Vue с помощью простого сценария тега к веб-сайту:

1*5FJnYPPjV1EKLtk4xk5r2w

Вы можете представить веб-приложение как расположенное внутри или над веб-сайтом. Итак, веб-приложение начинает свою жизнь в <div id="apгде изнутри тега сценария он подключен in via new Vue({ el: "#app» }). Таким образом мы создаем связь от JavaScript к HTML (where el – сокращение от элемента).

Это первая из так называемых опций, и Vue поддерживает многие параметры, например data и methods. Они аналогичны переменным и функциям нашего веб-приложения.

Примечание: Vue выпускается в двух вариантах: ? есть версия как для разработки, так и производства. Версия для разработки выдает подробные сообщения об ошибках и предупреждениях для поддержки разработчиков во время работы в Vue. Серийная версия оптимизирована для быстроты и размера.

Вдобавок ко всему этому есть официальное расширение Chrome, которое делает управление состоянием программы и ее отладку безболезненным.

Отделение данных от DOM

1*h6PJeo6PHIpzinqCLkjYCw
Кредит Дэниел Чунг

Как упоминалось ранее, одно замечательное предложение, которое предлагает Vue, – это отделение данных от DOM. DOM означает документ-объект-модель, которую можно рассматривать как дерево элементов, составляющих наш веб-сайт. Текст между начальным и закрывающим элементами – это то, что я называю данными. В Vue мы не кодируем его жестко – мы отделяем его и добавляем вышеупомянутое data объект изнутри нашего экземпляра Vue.

Эту идею также называют виртуальным DOM. Это может показаться незначительным, но правда состоит в том, что наличие данных в одном месте означает, что мы знаем, как и где их обновлять. И поскольку Vue реагирует, всякий раз, когда мы обновляем эти данные, это изменение распространяется по всему веб-приложению. Благодаря этой связи данные можно считать гораздо более живыми у Vue, чем в обычном HTML.

1*s961WYdfXbFGEVR6bkGtdg

Эти идеи исследуются в третьем скринкасте.

Идиоматический JavaScript

1*uJNE1s0MwUXnlRlA7hly8Q
Кредит Дэниел Чунг

Для меня Vue делает JavaScript языком, который стоит изучать, потому что он имеет смысл JavaScript. Я имею в виду, что изнутри a new Vue({ ... }) как и где мы научимся спорить с JavaScript. Сменные – это пары ключ-значения, присоединенные к data объект, как показано выше, а функции добавляются как пары ключ-значения, присоединенные ко второму объекту: methods. И данные объектов, и методы не являются обязательными – помните, что это параметры нашей веб-приложения.

Но Vue идет гораздо дальше: у Vue есть много параметров, поступающих в виде объектов, к которым мы подключаемся в нашем экземпляре Vue. В общем это напоминает идиоматическое руководство и подход к программированию на JavaScript. Поэтому за программистом остается немного архитектурных решений. Это означает, что написание и чтение Vue имеет определенную согласованность и элегантность, что облегчает распознавание, чем разборка того, как работает обычная программа JavaScript.

Эти идеи исследуются в четвертом скринкасти.

Шаблонный HTML

1*OqJU7uN6drj41M8LTMzH_w
Кредит Дэниел Чунг

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

Учитывая атрибуты Vue, например v-for, v-if, и так далее, для меня HTML начинает напоминать язык программирования с потоком управления. Это означает, что мы можем лучше контролировать поток данных нашей программы (например, содержимое нашего веб-сайта или то, что я продолжаю называть данными).

Кстати, фреймворки шаблонов, такие как Jekyll и Hugo были созданы, чтобы помочь разработчикам создавать статические веб-сайты с помощью своего рода потока управления. Как бы то ни было хорошо, он ограничен статическими веб-сайтами, поскольку эти фреймворки компилируются в HTML, а не интерпретируют HTML.

Наличие доступа к потоку управления в реальном времени, например циклам for и операторам if, означает, что Vue может делать гораздо больше и делать это в режиме реального времени. Это одно из самых больших отличий между веб-сайтами и веб-приложениями (статическое и динамическое содержимое).

Эти идеи исследуются в пятом скринкасти.

Компоненты и реквизит

1*po1kpbyVVzwXrxtKC6A7Bw
Кредит Джеймс Понд

Что-то, что заняло слишком много времени, чтобы оценить разницу между переменными и свойствами. Переменные сохраняют данные, тогда как свойства — это переменные, подключенные к объекту JavaScript. Поэтому компоненты можно рассматривать как HTML-миксины. Что? Миксин похож на функцию, но вместо того чтобы возвращать данные, он смешивает данные в документ. К примеру, он пишет для нас HTML, чтобы нам не пришлось повторяться!

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

Эти идеи исследуются в шестом скринкасти.

Управление обработкой событий

1*7qN47N73nxf62SJem67Txw
Кредит Джеймс Понд

Хотя все, о чем мы говорили, увлекательно, оно не говорит о взаимодействии пользователей, которое является одним из ключевых различий между веб-сайтом и веб-приложением. Веб-сайт обычно означает то, что является более или менее статичным и не предназначен или предназначен для взаимодействия с пользователем, кроме, возможно, сбора данных. В настоящем веб-приложении, напоминающем нативную программу, взаимодействие имеет первостепенное значение. ? Эта идея также называется динамическим веб-сайтом или веб-приложением.

Поскольку Vue является и фреймворком и экосистемой, он также имеет идиоматические решения для этого. Самый простой из них, который я преподаю на курсе – это @click="function()" обработчик, который мы подключаем к элементу в качестве атрибута HTML. Этот простой фрагмент дает нам средство взаимодействия с нашими данными, такой же простой, как атрибут, который мы подключаем к элементу. Это означает, что мы можем использовать JavaScript, а не HTML или CSS для расширенного взаимодействия пользователей.

Эти идеи исследуются в седьмом скринкасти.

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

1*spoAQtMm1OBMU1iciAZmzg
1*_mu96vH6fakViESA8XOmQg
Слева: «Строительство см. Шрёдингера? с Vue!» Право: «Как сделать? выбор цветов с помощью Vue!

Vue делает Интернет смысл

До Vue я был знаком с HTML и CSS. Мне было достаточно удобно, чтобы создать несколько привлекательных веб-сайтов, но не более того. Я исследовал некоторые фреймворки (например, те, которые я обсуждал в этой статье по поводу статической компиляции) и заглянул в Angular и React, но я не испытал должного ощущения, исследуя их. Я хотел что-то легкое и интуитивно понятное, и я считаю, что нашел это с Vue.

В конце концов, не важно, какие инструменты мы используем, если мы можем создать то, что мы собираемся создать. Но дело в том, что трудно отделить инструменты от мышления, используемого для создания продукта или услуги. Это и хорошо, и плохо. С одной стороны это может сделать нас ограниченными. Но с другой стороны, инструменты, которые мы используем, могут служить инструментом обучения для изучения новых и интересных идей. Я люблю инструменты, которые не могут не учить меня одновременно, и я не мог бы больше рекомендовать Vue по этой причине!

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

1*q-pzfW25_QfFrGQg2T3FOA

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

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