Или с Vue, если на то пошло.

Примечание для начала: это написано с Quasar версии 0.17. С тех пор был выпущен Quasar v1.0 as. Но концепции все еще в силе, просто кода здесь может не быть. 😃

tl; dr; №1. Если вы уже понимаете основы создания пользовательского интерфейса в Quasar или Vue и просто хотите увидеть некоторые из них в действии с компонентом Quasar QBtn, выберите « Причины изменения - SRP в компонентах? »

tl; dr; №2 - Если вы не знаете о механизмах создания шаблонов серверной части или не заботитесь о наследовании кода шаблона по сравнению с композицией, выберите «Пример создания компонента. с QBtn ».

tl; dr; №3 - Если вы просто хотите поиграть с кодом из этого руководства, ознакомьтесь с демонстрацией песочницы (дайте песочнице время для запуска). 😃

Прежде чем мы начнем, в этой статье предполагается, что у вас есть базовые знания о том, как работает Vue. В противном случае вы можете немного запутаться. Если после прочтения этой статьи вы запутались, вам нужно больше узнать о Vue. И, пожалуйста, не расстраивайтесь. Если вы не знакомы с технологиями React или реактивного пользовательского интерфейса, сделайте шаг назад и узнайте, о чем они. Тогда вернись. Вы не будете разочарованы!

Ok. Долгое ожидание в этом было… поехали.

Вся концепция Vue - это композиция (в отличие от наследования) компонентов. Если вы пришли с серверного языка, где вы использовали какой-то движок шаблонов, такой как Smarty, Twig, Blade, erubis, hero, Velocity (и этот список можно продолжать и продолжать), то вы, вероятно, уже чувствуете себя как дома с Синтаксис Vue <template> и однофайловые компоненты. Однако мы должны понимать, что это все еще другая система по сравнению с бэкэнд-шаблонизаторами и их «образом мышления».

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

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

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

Архитектура Vue - это не MVC, а скорее архитектура MVVM. Мы строим модель внутри каждого компонента, но только для этого компонента.

Если мы начнем создавать сложный компонент во Vue или Quasar, наша модель тоже усложняется. С композицией мы можем и должны избегать этого осложнения.

Я собираюсь выложить там кое-что, что может вызвать споры. Любой компонент Vue шаблон не должен быть подробным! Если у вас более 40-50 строк кода шаблона, значит, ваш шаблон или, скорее, ваш компонент делает слишком много. Это может увеличиться до 100 строк или около того, если вы используете функции рендеринга. В любом случае, если вы слышали это раньше об архитектуре MVC, «тонкие контроллеры, толстые модели», то я скажу, что нечто подобное относится к архитектуре MVVM и SFC.

It’s…..

У вас должны быть тонкие конструкции и толстые модели.

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

Состав на победу! 😏

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

Тем не менее, если вы думаете о том, чего хотите достичь, а затем «выстраиваете» или составляете свою версию компонентов, понимая правила иерархии DOM (отношения родительский / дочерний) и имея в виду SRP и «тонкую структуру / толстые модели», это все, что вам действительно нужно для повторного использования кода (что также является целью наследования). Принцип программирования DRY, то есть «грамотно кодировать один раз и часто использовать повторно», может быть относительно легко реализован с помощью средств компоновки Vue.

Цель этого урока - заставить вас думать (больше) в этом направлении.

Пример сборки компонента с помощью QBtn

Я повторяю это снова, потому что очень важно понимать, как работать и с Quasar, и с Vue. Основная предпосылка Vue основана на композиции, что означает действие по объединению вещей . Эти "вещи" во Vue являются компонентами . Узнайте значение слова «компонент».

В переводе с латыни «собирать вместе» 😁

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

Как вы знаете, Vue берет ваши компоненты, ваши композиции и разумно помещает их в виртуальную иерархию DOM, затем отображает это для ваших пользователей и делает все это реактивным. Вот почему мы не можем «не мыслить» иерархии с компонентами, потому что DOM - это иерархия. И эта иерархия не имеет значения для взаимодействия с пользователем, потому что, когда компоненты сделаны правильно, манипуляции с данными, привязки непосредственно видны в DOM в нужном месте в нужное время. Эта «реактивная» система - это то, что делает библиотеки реактивного пользовательского интерфейса, такие как мир Vue, лучше, чем необходимость поиска данных в DOM для последующего манипулирования ими (например, как в jQuery).

Помните, что другая основная концепция Vue и реактивного программирования ...

«Пусть ваши данные делают ходьбу!»

😏 Хорошо. Я придумал ……. Но это правда! 😄

Причины изменения - SRP в однофайловых компонентах?

Существует пять возможных «обязанностей» или причин, по которым мы можем касаться компонента, чтобы изменить его. Теперь вы можете сказать, эм, но «S» в SRP означает «Single». Да, и теоретически мы можем разделить эти 5 обязанностей на их собственные модули / файлы для изменения. Что еще более важно, компонент Vue может хранить их все и при этом красиво разделять их. Эти причины изменений или ответственности также являются источниками того, почему мы хотели бы «составить» их по-другому. Они есть:

  • Стиль / Дизайн (CSS)
  • Структура (HTML)
  • Поведение (JavaScript)
  • все самое важное - модель данных или модель (также JavaScript)
  • и (надеюсь) единственная цель компонента

Если вы скажете: «Эм, что скажешь?» Сейчас. Не стоит беспокоиться. Надеюсь, вы поймете, что имеется в виду выше, когда мы будем изучать руководство.

План

Как и в случае с любым другим типом создания, должен быть план, чтобы наша новая кнопка закончилась так, как мы и предполагали. Вы можете подумать: «Эй, это всего лишь маленькая кнопка». Хорошо. Это руководство покажет вам, как настраиваемый компонент кнопки в Quasar (или Vue) может быть довольно мощным и сложным. Итак, действительно важно иметь план - представление о том, чем вы хотите, чтобы кнопка делала или кем была.

Есть так много возможностей только с этим одним компонентом, что его компоновка как нечто большее с другими Q-компонентами или логикой / поведением, и даже использование его только как стандартная кнопка без плана, скорее всего, закончится сумасшествием, может даже расстраивает, беспорядок.

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

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

Это план для наших кнопок:

  1. Кнопка должна иметь изображение (стиль / дизайн).
  2. Если изображения нет, оно автоматически вернется к «обычной» кнопке Quasar (поведение, стиль / дизайн).
  3. У него должна быть опция всплывающей подсказки, независимо от того, в какой форме она находится (обычная или с изображением) (структура, поведение).
  4. Всплывающая подсказка будет управляться только через ввод данных (модель данных). Это означает, что если в данных есть текст всплывающей подсказки, всплывающая подсказка появится автоматически.
  5. Всплывающая подсказка будет либо вверху кнопки, либо внизу (стиль / дизайн).
  6. Мы также смещаем всплывающую подсказку на 5 пикселей выше или ниже кнопки, как это стандартно и фиксировано, просто потому, что мы думаем, что она выглядит лучше (стиль / дизайн).
  7. В компоненте Quasar Btn наша кнопка должна иметь (стиль / дизайн):
    - Метка - для текста на кнопке.
    - - Цвет - для раскрашивания кнопки.
    - - Значок - для добавить значок.
    - Размер - для управления размером кнопки, когда это обычная кнопка. Сейчас мы будем использовать только значения пикселей для кнопки типа изображения.
    - Flat - для плоской кнопки.
    - Round - для круглых кнопок (подумайте об аватарках, где вам нужна ссылка на профиль и т. д.).
    - Outline - для добавления контура.
    С реквизитом QBtn, мы могли бы продолжать и продолжать . Их 29! Однако на этом мы остановимся. Ваши решения для вашего нового компонента определят, какие реквизиты возьмут на себя.
  8. В дополнение к реквизитам Quasar Btn наша кнопка будет иметь:
    - Цвет контура - поскольку Quasar Btn имеет только один цвет, и мы используем его в настоящее время для нашего фона, нам нужны другие свойства для цвета границы кнопки изображения.
    - URL изображения - для необязательного добавления изображения для нашей кнопки изображения (структуры).
    - Текст всплывающей подсказки - если наша кнопка должна иметь всплывающую подсказку (поведение, модель данных).
    - Местоположение всплывающей подсказки - либо «сверху», либо «снизу». «Верх» - значение по умолчанию. Да, мы сокращаем набор функций QTooltip, но для нашего варианта использования с кнопками нам нужно только такое поведение.
    - Контроль видимости - показывать только тогда, когда он должен быть показан (поведение, см. пункт 10).
  9. Мы знаем, что наши графические кнопки всегда будут плоскими и должны быть обведены цветом, выбранным в цветовой опоре (стиль / дизайн). Текст тоже такого же цвета (стиль / дизайн). Так работает QBtn.
  10. Кнопка должна иметь свойство видимости. Если это правда, кнопка видна. Если false, его нет (модель данных, поведение).
  11. В качестве последней цели, а не части нашей композиции кнопок, мы создадим панель кнопок, демонстрирующую композиционные возможности слота во Vue ».

Согласитесь, есть над чем подумать. Мы делаем «супер-пупер кнопку питания». 😁 И, может быть, мы захотим иметь компоненты кнопки, которые выполняют только некоторые из этих вещей, верно? А может, и нет. Независимо от того. Мы создадим различные кнопки для демонстрации композиции.

Имея это в виду, давайте составим 4 разные кнопки и нашу панель кнопок.

Кнопка №1 - Стиль / Дизайн с изображением

Обратите внимание, что каталог /components - это наш собственный код компонента, а каталог /pages - это место, где компоненты используются и демонстрируются в этом примере.

Ok. Тем не менее….

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

Обратите внимание на компонент btn-image.vue в разделе компонентов нашей песочницы (дайте песочнице время для запуска. Также лучше запустить приложение в отдельном браузере). Это кнопочный элемент с изображением.

Если вы посмотрите на модель компонента, то заметите, что мы сильно улучшаем некоторые функции q-btn. Примечание: этот компонент НЕ закончен!

Если вы также посмотрите на модель (код в тегах <script>), вы увидите, куда мы добавили наши реквизиты.

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

Замечание сбоку. Я плохой интерфейсный разработчик, что показывает этот компонент. Во время тестирования я обнаружил проблемы с моей исходной кнопкой. И я знал «причины изменений», и они вернули меня к этому компоненту. Другими словами, мои причины изменить его (помните, что их может быть до пяти на компонент) заставили меня сразу перейти к коду этого компонента. Это SRP для Vue / веб-компонентов в действии!

Кнопка № 2 - Поведение № 1 - Без изображения это будет обычная кнопка.

Давайте продолжим то, что мы только что создали, с помощью кнопки №1. Если изображения нет, мы хотим показать обычную кнопку Quasar.

Взгляните на второй пример кнопки, BtnOrBtnImage, в нашей песочнице.

Вы, наверное, скажете, что назначение этой кнопки - чепуха, но шутите ради композиции. 😄 Обратите внимание, мы добавляем только одну функцию. Перестановка кнопок. Помните SRP?

Используя наш первый миксин
Для создания этой кнопки и повторного использования btn-image мы также создали миксин под названием btn-image-mixin. Взгляните на этот миксин в песочнице.

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

Также важно отметить, что теперь, когда у нас есть миксин, мы можем реорганизовать наш btn-image компонент, чтобы использовать его. Но пока мы оставим все как есть.

Кнопка №3 - Структура - добавление функциональности всплывающей подсказки

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

Мы просто не можем избежать HTML, поскольку это то, что требуется браузеру для построения DOM. В Vue у нас есть разделы <template> (или функции рендеринга) компонента для хранения структуры. Это помогает «отделить» ответственность за структуру от остального кода компонента. Еще раз, мы должны помнить, что во Vue нет никаких возможностей для расширения синтаксиса шаблона.

В настоящее время QBtn уже многое для нас делает. Мы можем сделать кнопку-ссылку на другие части нашего приложения (что можно рассматривать как добавление структуры и / или поведения). Мы можем добавлять разные значки (которые можно рассматривать как стили). Мы можем контролировать текст, отображаемый на кнопке (который можно увидеть как изменение модели), цвет (стиль) и многое другое.

QBtn в основном дает нам несколько возможностей для манипулирования кнопкой в ​​соответствии с нашими потребностями в использовании (и в соответствии с данными / состоянием, которые мы ему предоставляем).

Но, скажем так, для нашего примера, мы также хотим добавить всплывающую подсказку на кнопку в качестве стандартного «аксессуара» или функции.

Для этого мы хотим создать новый компонент с именем btn-tooltip, что, конечно же, означает «Кнопка с всплывающей подсказкой». 😄

Как видите, мы просто добавили всплывающую подсказку к нашему btn-or-btn-image компоненту. У нас также есть функция отключения из QTooltip, чтобы показать или скрыть всплывающую подсказку в соответствии с предоставленными данными, то есть текстом всплывающей подсказки, который является нашей добавленной опорой.

Обратите внимание, что мы используем вычисляемые свойства, чтобы контролировать свойство disable и управлять расположением всплывающей подсказки. Вычисленные свойства дают нашим данным (или их отсутствию) возможность отображать или скрывать всплывающую подсказку или помещать всплывающую подсказку вверху или внизу кнопки. Также обратите внимание на новый миксин. Остальное я оставлю на ваше рассмотрение. 😉

И, наконец, с потреблением этой кнопки на странице button3 мы ввели директиву v-bind. Это небольшая мощная директива, которая позволяет вам определять все ваши реквизиты в ваших данных, экономя время, только один раз написав (или автоматизируя) реквизиты для вашего шаблона.

v-bind также позволяет легко и динамически манипулировать данными опоры. Это беспроигрышная директива. 😃

Кнопка №4 - Поведение №2 - добавление элемента управления видимостью.

Еще одна особенность нашей кнопки, и последняя, ​​- это контроль видимости. Когда этот элемент управления включен или истинен, кнопка отображается сама собой. Когда он выключен, кнопка гаснет. Подумайте о UX, где определенные пользователи, такие как администраторы или владельцы записи, получают больше функциональных возможностей для записи, чем гости или обычные пользователи. Поскольку они более привилегированы, они получают дополнительные кнопки, позволяющие больше работать с данными. Подумайте, как часто это нужно везде в приложении, особенно когда действие «Создание», «Обновление» или «Удаление» доступно для одних пользователей, но не для других.

Обратите внимание, что мы назвали кнопку «BtnMain». Все наименования могут быть сомнительными на протяжении всего этого руководства, и, как вы, надеюсь, также знаете, правильное именование сложно сделать в программировании. Назначение имени «BtnMain» - указать, что это «вершина» иерархии и функциональности кнопок. Это означает, что это самая функциональная кнопка. И теоретически наш набор новых кнопок может находиться в отдельном каталоге. «Основное» имя приведет вас к этой кнопке как к верхней, чтобы получить все функции сразу (если они вам нужны).

Чтобы обеспечить такой контроль видимости, мы просто добавили «v-if», чтобы эта функция работала, вместе с новым свойством visible. Вот и все. Но теперь, когда мы используем эту кнопку в наших компонентах более высокого уровня, все, что нам нужно сделать, это определить логическое свойство данных или создать вычисляемое свойство или наблюдателя, чтобы «сигнализировать» о том, что кнопка должна отображаться или нет.

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

Панель кнопок - все это вместе со слотами.

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

«Слот».

Если вы поработали с Quasar some, то заметите, что слоты «даны вам» во многих местах. Я говорю «дано вам», потому что вся идея слота заключается в том, чтобы вы могли «внедрить» свой собственный код шаблона, как вы хотите, в слот компонента.

Другой способ взглянуть на слот - это как API для компонента, который помогает нам избежать надоедливого желания расширить код шаблона. Да, мы должны создать шаблон слота (который тоже может быть элементом HTML, не обязательно элементом шаблона или даже компонентом), чтобы он работал, и да, это может означать дополнительные компоненты или HTML-код, в зависимости от того, что мы хотим . Но помните, нам нужно построить их только один раз, и мы можем использовать наши композиционные методы, которые мы практиковали ранее, чтобы упростить это построение (или даже автоматизировать его с нашими данными! Ах да! 👍).

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

Для нашего последнего упражнения мы собираемся создать «панель кнопок». Подумайте, как часто вы видите, что в вашем приложении есть набор кнопок. У вас может быть набор кнопок в правом верхнем углу вашего приложения. У вас может быть набор кнопок внизу диалоговых окон. У вас может быть набор кнопок в нижнем колонтитуле страницы записи для управления данными. Список можно продолжать и продолжать. Мы рассмотрим вариант использования обычных кнопок приложения в правом верхнем углу страницы приложения сообщества, например, в форуме или в чате. Вот код нашего btn-bar компонента.

Как видите, у нас просто есть <div>, который содержит цикл для прохождения опоры кнопки, которая будет массивом кнопок. Еще у нас есть прорезь для кнопки. Простой.

На нашей странице, демонстрирующей компонент btn-bar, у нас есть btn-main, чтобы заполнить этот слот кнопки. Обратите внимание, что мы также создаем кнопки с внутренним шаблоном.

Удивительно просто, правда? Ok. С концептуальной точки зрения, вы все еще могли бы сказать «WTF?». Слоты сложно понять, но как только вы это сделаете, они станут действительно мощными и решат множество вариантов использования. Посмотрите внимательно на использование слотов. На самом деле это простой вариант использования.

Мы также можем использовать кнопки по отдельности и как разные компоненты, используя «общий» тег component и используя :is для вызова компонента правой кнопки вместо использования компонента btn-main. Функция :is в общем теге component - еще один фантастический инструмент для логического выбора типов компонентов. Ниже показано, как компонент мог бы выглядеть, если бы мы хотели использовать разные компоненты кнопки, определенные с помощью наших данных.

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

Данные - управление вашим Vue, например View!

Юп. В наши дни я часто неправильно пишу «vue» вместо «view». 😁

Если вы внимательно следили до сих пор, то заметили, что наши переключающие действия только меняли данные. В этом сила реактивных систем / пользовательских интерфейсов.

Взгляните на модели данных и на то, что мы переключаем. Каждый переключатель изменяет модель данных, которая управляет вариантами наших кнопок или тем, как они представляются пользователю. Это входит в сферу метапрограммирования, где модели данных формируют наш пользовательский интерфейс, а не обязательно код, который мы пишем. Если все сделано правильно, это довольно мощный инструмент, потому что он может дать нашим пользователям возможность принимать решения относительно пользовательского интерфейса нашего приложения и того, как он работает (если вы занимаетесь SaaS и мультитенантностью, вы знаете, к чему я клоню). В нашем примере кнопка с добавленными функциями несколько надумана, как уже упоминалось ранее. Однако наша цель - продемонстрировать композицию.

В качестве последнего примечания обратите внимание на то, что наш последний btn-main компонент на самом деле не требует особой разметки. Это важно для Vue и Quasar и почему вам следует избегать большого количества разметки в ваших шаблонах. ПОЦЕЛУЙ их и помни….

Тонкая структура, толстые модели! 😉

Последний, но тем не менее важный.

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

«Фильтр»

Фильтры - это способы управления выводом текста. Они гораздо более широко использовались в v1 Vue, и эта версия имела большое количество встроенных фильтров. В версии 2 фильтры были значительно сокращены просто потому, что вычисляемые свойства достигают того же самого, но с большей производительностью. Примером фильтра может быть всегда заглавная первая буква текста.

И вот как это будет использоваться.

Обратите внимание на «|» (вертикальная черта) между текстовой переменной и фильтром с заглавной буквы. Вот как вы используете фильтры. Вы также можете использовать их в атрибутах v-модели.

Метод «расширения» объекта Vue.

Этот метод, по сути, такой же, как миксин. Он берет объектную модель компонента и объединяет ее с вызывающим компонентом. Его название немного вводит в заблуждение. Пожалуйста, не думайте о наследовании при использовании extension. Я думаю, что это «неправильное название» также является причиной того, что метод / функция «расширения» вообще не задокументированы в Руководстве пользователя Vue. Я также слышал, как разработчики ядра Vue говорят: просто избегайте использования «расширения» и используйте миксины просто потому, что о методологии миксинов легче рассуждать. Так что просто сделай это, пожалуйста. 😃

Опции «предоставить / ввести».

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

provide и inject в основном предназначены для расширенных вариантов использования библиотеки плагинов / компонентов. НЕ рекомендуется использовать их в общем коде приложения.

«Предоставить» и «внедрить» предлагают автору подключаемого модуля средства для обмена данными или реквизитами между компонентами, находящимися на более глубоких уровнях иерархии компонентов. Опять же, это в основном только для использования плагинов. Так что, если вы не собираетесь писать плагин для Vue (или Quasar), не беспокойтесь о «предоставить» и «внедрить» для нормального программирования приложений.

Директива.

Директива также является инструментом сокращения кода и помощником, когда дело доходит до композиции компонентов.

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

Фактически, мы использовали одну из директив в нашем примере кнопки изображения. «Эффект ряби».

Директивы предлагают средства для создания глобальных эффектов или поведения, которые можно использовать для любого компонента, например, рябь в Quasar.

Таким образом, в будущем, если у вас есть общее поведение среди компонентов, которое Quasar не предлагает из коробки, вы можете выделить это поведение и закодировать его как директиву и просто добавить его как атрибут к своим элементам шаблона, где нужный. Если вы хотите узнать больше о создании директив, посмотрите это видео.

Плавник!

Вот и все. Имея всего пару инструментов для создания композиции, у вас есть много возможностей для «создания» вашего пользовательского интерфейса. Опять же, при создании компонентов думайте от меньшего к самому большому. И помните, что Vue и Quasar следуют иерархии DOM при «создании» этих компонентов. Размышляя о своем приложении, не начинайте со страницы. Начните с мельчайших элементов страницы и хорошенько подумайте, можно ли даже эти элементы разбить дальше. Создайте для них компоненты и либо вставьте их, либо скомпонуйте, как если бы они были в иерархии DOM. Это все, что вам нужно сделать.

Ах да, не забывай.

Пусть ваши данные сделают шаг вперед! 😄

Если вам нужна дополнительная информация о самом Quasar, вот несколько ссылок:

КОМПОНЕНТЫ: https://github.com/quasarframework/quasar
CLI: https://github.com/quasarframework/quasar-cli
ДОКУМЕНТЫ: https: // quasar- framework.org/
ДИСКОРД: http://chat.quasar-framework.org/
ФОРУМ: https://forum.quasar-framework.org/
TWITTER : Https://twitter.com/quasarframework
STEEM: http://steemit.com/@quasarframework