Могу ли я импортировать скрипт x-template в HTML-файл?


Могу ли я импортировать скрипт x-template в HTML-файл?

23.11.2020 01:36:52 Просмотров 7 Источник

По умолчанию x-template (для компонента Vue) выглядит следующим образом

<script type="text/x-template" id="checkbox-template">
  <div class="checkbox-wrapper" @click="check">
    <div :class="{ checkbox: true, checked: checked }"></div>
    <div class="title">{{ title }}</div>
  </div>
</script>

Теперь я хочу связать с ним внешний js-файл, например

<script type="text/x-template" id="checkbox-template" src="target.js" />

Возможно ли это? Если да, то для чего нужен синтаксис target.js?

У вопроса есть решение - Посмотреть?

Ответы - Могу ли я импортировать скрипт x-template в HTML-файл? / Can I import x-template script into HTML file?

Является ответом!
Dan

23.11.2020 02:26:36

Нет, x-template должен быть локальным. Атрибут <script> элемента src игнорируется, если атрибут type является чем-либо иным, чем module или типом MIME JavaScript, согласно MDN:

Встроенный контент обрабатывается как блок данных, который не будет обрабатываться браузером. Разработчики должны использовать допустимый тип MIME, который не является типом MIME JavaScript, для обозначения блоков данных. Атрибут src будет проигнорирован.

Некоторые фреймворки поддерживают внешний шаблон другими способами (например, templateUrl и т. д.), Но Vue этого не делает. Вот объяснение Эвана ю (создателя Vue), почему:

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

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

Конечно, вы можете создать свой собственный загрузчик для AJAX содержимого точно так же, как вы загрузили бы любой внешний файл вручную, независимо от содержимого, в виде строки. Или вы можете использовать Vue CLI, который использует аналогичный загрузчик.

Помочь в развитии проекта:
Закрыть X