Написано NWOSE LOTANNA ✏️.
Vue.js был создан Evan You и 250+ влюбленных сообществ.
Это очень прогрессивная основа для строительства пользовательских интерфейсов. Он состоит из доступной основной библиотеки, которая сосредоточена на уровне просмотра только, а также экосистемой поддерживающих библиотек, которые помогут вам устранить сложность в больших одностраничных приложениях.
В этом посте вы будете представлены сторонникам – захватывающая концепция, которая поможет вам построить Mastery в Vue.js.
Достижение доступности в Vue
Для достижения доступности в Интернете вам нужно создавать страницы, инструменты и технологии, которые каждый может использовать.
Здесь «каждый» включает людей с слуховой, когнитивной, неврологической, физической, речью и нарушениями зрения.
Поддержка доступности необходима для разрешения вспомогательных технологий, таких как считыватели экрана для интерпретации веб-страниц и приложений. Для работы этих технологий разработчики должны думать с точки зрения доступности и создания доступных приложений.
Прежде чем начать
Этот пост предназначен для всех уровней разработчиков Frontend, которые используют Vue.js, поэтому имеется знакомства с концепциями для начинающих и процессами установки не требуется для понимания этих концепций.
Вот несколько предпосылок, которые вы уже должны иметь, прежде чем начать использовать Vue CLI 3 через эту статью.
Тебе понадобится:
- Node.js 10.x и выше установлена. Вы можете проверить, сделайте ли вы, запустив узел -V в вашу клемму/командную строку.
- Узел Unode Package Manager 6.7 или выше (NPM) также установлен.
- Редактор кода: Visual Studio Code настоятельно рекомендуется. Вот почему Несомненно
- Последняя версия Vue установлена во всем мире на вашу машину.
- Vue CLI 3.0 установлен на вашем компьютере. Чтобы сделать это, сначала удалите старую версию CLI:
npm uninstall -g vue-cli
Затем установите новый:
npm install -g @vue/cli
ИЛИ
- Скачать . Vue Starter Project здесь
- Unzip загруженный проект
- Перейдите в неразбавленный файл и запустите команду, чтобы сохранить все зависимости:
npm install
Проблема: несколько корневых узлов
При создании своей презентации внутри раздела шаблона вашего VUE компонента, вы можете заметить, что у вас можно только один корневой HTML-тег внутри тега шаблона.
Внутри этого корневого HTML-тега вы можете иметь столько дочерних узлов, сколько вы хотите, так что невозможно иметь более одного корневого узла в Vue компонента.
Если вы открыли проект в VS-коде, перейдите к папке SRC, затем папку компонентов, а затем открыть app.js
файл. Ваш app.js
Файл должен выглядеть так:
Вы можете видеть, что Div – единственный корневой узел в шаблоне. Если вы пытались добавить дополнительный узел корневого узла:
Header inside root node 2
Вы увидите, что, поскольку вы сохраняете его, Vue Compiler будет поменять ошибку о нескольких корневых узлах.
Учебная техника узла обертки
Чтобы найти путь вокруг этого, Vue разработчики часто создают дополнительную (и в основном ненужную) узел корневой обертки, внутри которого они могут создавать детские узлы, чтобы удовлетворить их каркасы.
Этот тег может быть промежутком или меткой DIV. Большинство Vue Developers используют теги DIV, чтобы обеспечить его блок кода для оператора возврата не приводит к ошибкам, которые нарушают приложение.
Эти дополнительные метки делают абсолютно ничего, кроме предотвращения ошибок.
Header inside root node 2
Проблема с этим методом заключается в том, что она не доступна.
Теперь, согласно руководящим принципам HTML, теги семантики, такие как элементы списка, должны быть завернуты либо заказанным или необязательным тегам списка. Точно так же предметы таблицы должны завернуть теги таблицы как их родительские теги.
Демонстрация
Давайте использовать App.vue
Компонент для рендеринга списка, который мы создадим в Test.vue
компонент.
Откройте свой App.vue
Файл и скопируйте строки кода ниже в разделе Шаблон:
Тогда в Test.vue
Компонент, поместите элементы списка в раздел шаблона, как это:
1. Array method 2. Extra tag method 3. fragments
Блок кода выше не вернет ошибки компилятором. Это на самом деле было бы передано в App.vue
Компонент для правильного отображения списка.
Но если вы проверяете элементы ваших инструментов Dev, вы увидите, что он не возвращает семантический HTML.
Если этот семантический не соблюдается, ваш HTML-код может работать хорошо, но он не будет забран вспомогательными устройствами, такими как устройство считывания экрана.
Вот почему этот метод (который широко используется) в настоящее время осуждается. Как правило, есть кнопочный код для записи Accessible.
Решение: фрагменты
Эта концепция началась, когда команда RACT выпустила версию 16. Это решение разрыва доступности, которое было создано поведением разработчика.
Команда нашла способ создать тег HTML, который не читал бы как узел домом и назвал его фрагментами.
Это работает точно так же, как ваш меток Div или Span, но он не изменяет общую структуру вашего кода, поэтому сохраняя вашу древобу дерева.
Синтаксис фрагмента реагирования
render() { return (); }
Это проявляется в таковом доме:
Фрагменты – это невидимые метки обертки, которые не влияют на структуру узла DOM, тем самым достигая доступности.
Фрагменты в Vue.
The Vue Team еще не построил официальную функцию фрагментов, но есть отличный плагин, построенный членом сообщества Vue Джульен Барбай.
Этот плагин просто действует как обертка. Затем, на Vue Compile, он прокомментирован на доме.
Это очень эффективный способ использовать фрагменты в Vue 2.x
Синтаксис выглядит так:
В доме это рендерирует так:
Вы можете видеть, что обе линии прокомментируются, чтобы DOM был семантическим, и код доступен. Чтобы использовать, сначала установите плагин внутри вашего проекта Vue:
npm install -s vue-fragment
Затем импортируйте его, и вы готовы использовать его в вашем Test.vue
файл, как это:
1. Array method 2. Extra tag method 3. fragments
Вы можете увидеть, что тег DIV был заменен фрагментом. Теперь вся презентация становится доступной.
Заключение
В этом посте вы узнали, как использовать фрагменты в Vue и видели, почему действительно важно писать код с доступностью.
Команда Vue пообещала принести функцию фрагмента в предстоящей выпуске Vue версии 3.
Плагин Julien является действительно полезным, который вы можете использовать сегодня.
Счастливый взлом!
Испытайте свои Vue Apps именно как пользователь делает
Отладка приложений Vue.js может быть сложно, особенно когда есть десятки, если не сотни мутаций во время пользовательской сессии. Если вы заинтересованы в мониторинге и отслеживании мутаций Vue для всех ваших пользователей в производстве, попробуйте logrocket.
Logrocket Похоже на DVR для веб-приложений, записывая буквально все, что происходит в ваших приложениях Vue, включая сетевые запросы, ошибки JavaScript, проблемы с производительностью и многое другое. Вместо того, чтобы угадать, почему проблемы происходят, вы можете совокупные и отчитываться о том, в каком состоянии ваше заявление произошло, когда произошла проблема.
Плагин LOGOCKET VEUX LOGS LOGS MUTATIONS VEUX в консоль Logocket Console, предоставив вам контекст вокруг того, что привело к ошибке, и в каком состоянии приложение произошло, когда произошла проблема.
Модернизация того, как вы отлаживаете свои приложения Vue – Начните мониторинг бесплатно.
Пост Фрагменты в Vue.js появился первым на Logocket blog Отказ
Оригинал: “https://dev.to/bnevilleoneill/fragments-in-vue-js-3b”