Узнайте Vue.js в этом бесплатном курсе! ? ✨.

Автор оригинала: FreeCodeCamp Community Member.

Zaydek.

Давайте сделаем что-то вкусное

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

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

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

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

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

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

Vue не одно

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

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

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

Какие чеки курса

Курс – три части:

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

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

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

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

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

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

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

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

Разделение данных из дома

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

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

Эти идеи изучены на третьем скрингасте.

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

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

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

Эти идеи изучены в четвертом скрингасте.

Шаблон HTML

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

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

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

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

Эти идеи изучены на пятом скрингасте.

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

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

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

Эти идеи изучены в шестом скрингасте.

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

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

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

Эти идеи изучены на седьмом скрингасте.

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

Vue делает веб по смыслу

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

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

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