Когда я смотрел, как структурировать свой JavaScript в моих приложениях, используя современные JavaScript Frameworks, я продолжаю в том же проблеме. Я хочу использовать дизайн на основе компонентов, но я не всегда ищу создание приложения одного страницы. Иногда я просто хочу добавить компонент на страницу, которая вообще не привязана к каркасам.
В рамках, как угловой, это довольно невозможно. Я всегда видел угловой как все или ничего или нет структуры. Это либо все угловые, либо ни один из него не так. И если у меня есть устаревшее приложение, которое я хочу немного обновить, все или ничего не ищете.
Vue Ярлыки сама как «постепенно приемлемая» структура для современных компонентов JavaScript. Я нашел это, как правило, правда, но я немного боролся, как лучше всего принять его. Я просто начну создавать экземпляры Vue и поместите все свой JavaScript там? Я создаю компоненты, а затем попытаюсь выяснить, как получить это начало с моего текущего большого приложения? Как мне не загружать все компоненты для каждой страницы, когда мои страницы используют только небольшое подмножество компонентов? Значит ли это, что я должен отказаться от моей идеи глобального файла JavaScript и теперь создаю файл JavaScript для каждой страницы? И не так ли то, что я пытаюсь избежать?!?
При игре с Vue Cli Я заметил, что был возможность построить компоненты Vue в качестве родных веб-компонентов. Пытаюсь выяснить, что это значит, я готовлю в документацию.
Стандарт веб-компонентов
Стандарт веб-компонентов является стандартом, который был принят основными браузерами, как Способ разработчикам создать свои собственные HTML-элементы Отказ
Это может звучать странным сначала и не очень полезным. Почему мы хотим создать новый или ярлык? Но есть некоторые элементы HTML, которые имеют много полезных функций, таких как <Видео> , и даже элемент.
на самом деле построен с рядом прохладных функций. По умолчанию вы можете определить окно выбора и количество <Вариант> с И браузер знает, что показывает, что пользователю в качестве выделения раскрывающегося списка и ограничить пользователю только выбрать только один. Если вы передадите атрибут несколько , функциональные возможности позволяют пользователю выбирать более одного варианта и отображает элемент управления в виде прокрутки, а не выпадающего.
Это показывает, насколько сложные простые компоненты могут быть. У них есть структура (A Select содержит Опция ы), презентация (показывает как выпадающий или прокрутка), а логика (ввод пользователя проверяется, могут ли они выбрать несколько вариантов или нет). Эта функциональность звучит очень похоже на компоненты JavaScript!
Создание простого пользовательского элемента
Если вы знаете, как построить компонент в Vue, вы уже знаете, как построить пользовательский элемент HTML, просто сделайте новый автономный компонент Vue!
Поскольку Vue компоненты используются, как если бы они были элементами HTML, если вы создадите стандартный компонент один файл в Vue, вы можете экспортировать это в качестве нового HTML-элемента из вашего проекта.
Я надеюсь пройти через этот процесс в другом посте, но мы можем взглянуть на быстрый пример сейчас.
Я помню удивительные годы 1999 года веб-разработки. Что-то было возможно, в том числе замечательно ярлык. К сожалению, каждый браузер убил этот бедный тег некоторое время назад, но мы можем вернуть его в моду!
Ниже я определяю новый компонент, который примет все, что между его тегами и мигает его. Так же, как хорошие дни OL!
Затем я могу компилировать это в Пользовательский HTML-элемент с использованием Vuecli И разверните его на любую старую веб-страницу с чем-то вроде этого:
Party Like It's 1999!!!
Этот тег отделен из любого каркаса или другого JavaScript. Вам не нужно main.js или что-нибудь еще, чтобы установить этот тег или запустить его. Вы просто включаете файл Vue JavaScript, файл Tag JavaScript, а затем используйте тег, как любой другой тег HTML!
Будущие статьи будут охватывать больше
В конце концов я в конечном итоге напишу пару статей вокруг того, как создать этот стиль Vue компонента и как связать его в Vuex, чтобы позволить этим компонентам говорить друг с другом. Вот некоторые, которые уже сделаны:
- Настройка проекта VUE CLI для создания пользовательских элементов HTML
- Строительство пользовательских элементов от Vue CLI
Оригинал: “https://dev.to/firstclown/what-are-custom-html-elements-1h90”