Vue вставить html из файла

Обновлено: 05.07.2024

Vue.js 2 представил свою собственную реализацию Virtual DOM. На первый взгляд, кажется что это никак не отразится на том как вы пишите шаблоны. Из документации:

Под капотом, Vue компилирует шаблоны в render-функции для Virtual DOM. В совокупности с системой реактивности, Vue способен грамотно определять минимальное количество компонентов для повторной визуализации и выполнять минимальное количество действий с DOM при изменении состояния приложения.

Virtual DOM освобождает от довольно большой части оптимизации: теперь вы можете предварительно скомпилировать шаблоны в чистый JavaScript, таким образом Vue.js может не делать этого в браузере.

Без предварительной компиляции шаблонов в процессе сборки, Vue.js будет переводить строковый шаблон в JavaScript render-функцию, во время выполнения. Это означает, что на этапе начального рендеринга потребуется больше времени, по двум причинам: ваш уже собранный скрипт должен включать в себя Vue компилятор (больше время для загрузки) и шаблон должен быть скомпилирован, перед тем как он будет использован (больше время выполнение).

Эта статья не о синтаксисе шаблонов в Vue.js 2, а о том где и как определять ваши шаблоны. Я написал её, потому что на текущий момент не нашёл ни одного ресурса, который бы на самом деле объединил различные способы управления вашими шаблонами.

Я разделил различные способы определения шаблонов на 3 разные категории, у каждой из которых есть собственные преимущества и недостатки:

Написание шаблонов, которые компилируются во время выполнения (наименьшая производительность);
Использование отдельного .vue файла для компонентов (требуется этап сборки);
Ручное написание render-функций (чистый JavaScript, не HTML-подобный синтаксис);

Использование не скомпилированных шаблонов

Шаблоны в Vue.js необязательно должны быть скомпилированы. Если вы используете runtime версию Vue.js, то шаблоны могут быть скомпилированы прямо в браузере. Это решение отличается простотой. Никаких лишних этапов сборки или специальных типов файлов, но такой подход жертвует производительностью. Первый рендеринг компонента займёт больше времени, потому что шаблон сначала необходимо скомпилировать в JavaScript.

Определение шаблонов в компоненте

Самый простой способ определить шаблон компонента - это определить его в параметре template.

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

Кроме того, если вы используете такие сборщики как Webpack или Browserify, вы можете определить шаблон в отдельном файле. Параметр template может принимать значение require.

Определение шаблонов в атрибуте type="x-template" тега script

Тег script с атрибутом x-template может содержать шаблон, к которому компонент будет обращаться по ID.

На самом деле, это решение не очень, так как оно создаёт довольно большой разрыв между вашими шаблонами и компонентами, а по факту не приносит никакой пользы (даже официальная документация отговаривает нас от использования x-template).

Использование inline-template атрибута

С помощью специального атрибута inline-template, шаблон может быть указан во внутреннем содержании компонента.

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

Использование отдельного файла компонента (.vue файлов)

Отдельный файл компонента существовал уже в первой версии Vue.js. В Vue.js 2 он приносит больше пользы: шаблоны будут предварительно скомпилированы в чистый JavaScript.

Vue файлы позволяют вам определять шаблон и скрипт в отдельном файле, который будет скомпилирован в JavaScript с помощью Webpack или Browserify.

Отдельные файлы компонента также открывают дверь более интересным возможностям, таким как написание шаблонов с помощью HTML или CSS препроцессоров. Это означает, что вы можете писать шаблоны например с помощью Pug (формально Jade).

Обратите внимание на то, что поскольку вы используете специальный тип файла, становиться труднее добавлять другие инструменты в ваш проект. Например, если вы хотите писать тесты или анализаторы (lint'ы) для ваших компонентов, то сначала их нужно скомпилировать, а также у редакторов кода могут возникнуть проблемы с .vue файлами.

Использование render-функций

Написание сырых render-функций

Когда используются различные стратегии шаблонизации (компиляция во время выполнения или отдельные файлы компонентов), строковые шаблоны компилируются в render-функции автоматически.

Написание ваших собственных render-функций даёт вам максимальную производительность без стадии сборки, но дело в том, что они не HTML-подобные и с ними труднее работать.

Написание render-функций с помощью JSX

render-функции могут быть написаны в JSX формате с помощью плагина Babel, что позволяет достичь более HTML-подобного синтаксиса.

Обратите внимание на то, что большинство встроенных во Vue.js 2 директив не будут доступны при использовании JSX, но обычно у них есть собственные программные эквиваленты (например, вы можете заменить v-if на обычный if из JavaScript).

Вывод

Если вы разрабатываете большое приложение, в котором производительность является очень важным фактором (обычно SPA) или заинтересованы в использовании препроцессоров, то кажется вам подойдут отдельные файлы для Vue компонентов.

Если вы не против первоначальной потери производительности и готовы использовать компиляцию во время выполнения (случаи, которые просто улучшают страницу), я рекомендую использовать литералы JavaScript шаблонов в параметре template компонента. Это не привнесёт никаких чуждых концепций в ваш процесс сборки и сохранит ваш шаблон вместе с компонентом.

Большинство людей, знакомых с Angular 2+, знают, что для компиляции HTML-шаблонов просто нужно добавить URL-адрес шаблона в TypeScript-файл компонента и дело с концом. В случае Vue рекомендуется использовать теги <template> для сборки разметки шаблона в подавляющем большинстве случаев.

Мы можем использовать vue-template-loader, если хотим использовать Vue со способом сборки шаблонов, как в Angular. Поскольку vue-template-loader поддерживает vue-class-component , мы можем использовать декораторы для стилевых классов компонентов (class-styled components).

vue-template-loader компилирует HTML в отдельные функции отрисовки в соответствующих TypeScript- или JavaScript-файлах.

Установка

Нам понадобится обычный проект Vue.js вместе с зависимостями webpack .

Установите vue-template-loader , используя yarn или npm , например так:

Конфигурация webpack для JavaScript

Теперь мы можем интегрировать vue-template-loader с использованием webpack .

Добавьте vue-template-loader в качестве правила в вашем конфигурационном файле webpack.config.js :

Отрисовку ресурсов, используемых в HTML-шаблоне, связанных с обработкой атрибута src в тегах, можно указать с помощью опций:

Обратите внимание, что для работы вышеуказанных опций также необходимо добавление загрузчика для обработки файлов изображений (см. file-loader).

Конфигурация для TypeScript

Если мы хотим использовать vue-template-loader с TypeScript, нам нужны зависимости tsloader и typescript , установленные в проекте вместе с webpack .

vue-template-loader используется аналогичным образом для конфигурации webpack как для JavaScript, так и для TypeScript.

Единственное дополнение будет в каталоге typings нашего проекта. Нам нужно добавить шим в typings , чтобы TypeScript понимал файлы .vue :

Использование в файлах JavaScript/TypeScript

Теперь давайте создадим файл с шаблоном с названием nest.html :

Теперь давайте добавим файл nest.js , использующий nest.html . Мы может использовать vue-template-loader с или без декораторов класса, используя es6 с Vue :

Его также можно использовать в TypeScript следующим образом в файле nest.ts :

Вывод

Использование vue-template-loader обеспечивает отличную поддержку TypeScript, а также может уменьшить количество компилируемых файлов, так как исключаются файлы .vue . Наконец, это очень легко понять людьми, работающими с Angular.

Как подключить часть html к другому html файлу?
Всем привет! В php есть удобная функция include которая позволяет подключить php файл к основному.

Как подключить html файл к css файлу?
Доброго времени суток! Простой пример. html-файл. У меня не работает подключение к css файлу.

[Vue warn]: Failed to mount component: template or render function not defined
После сборки йарном выводится в консоли: : Failed to mount component: template or render function.

TreeComponent.vue - это однофайловый компонент VueJS. Без предварительного шага сборки вы не подключите его просто использовав
j2FunOnly, Т.е. таким образом я не смогу вынести часть Vue кода в отдельный компонент и подключить(внедрить) его без NPM run dev на хостинге? Я правильно понимаю?
Нужен ли для шага сборки сервер на Node Js?
Получается придется все Vue писать в html файле?

Работал немного с GULP и npm, как делается сборка на хостинге не представляю, просветите?

Вы, конечно, можете свой VPS/VDS настроить на работу в таком режиме, но лучше изучите сборку и публикацию приложений. Т.е. таким образом я не смогу вынести часть Vue кода в отдельный компонент и подключить(внедрить) его без NPM run dev на хостинге? Я правильно понимаю? Нет, ты можешь сделать "NPM run dev" на рабочей машине, а сгенерированный в результате этого код выложить на хостинг Вопрос актуален) Как правильно подключать модули? Хоть убей не понял почему не получается. Было бы великолепно, если бы нашелся тот, кто от и до расписал бы как это делать? Подключаю к бэкэнд админке.

Почитай про vue cli. С помощью него можно создать новый пустой проект. В нем будут настроен webpack и другие нужные вещи, а также будут работать команды npm run dev и npm run build, и т.п.

Добейся запуска пустого проекта. Много вопросов отпадут, когда решишь эту задачу.

Далее исправляй этот пустой проект - добавляй свой код

консоль: npm i vue-color
npm init
В файле app.vue пишу

Вопрос: Что я упустил? Уже просто не первый день пытаюсь найти проблему, но увы не получается

vrm2, Вообщем сделал заново проект:
Установил vue color и провел инициализацию через npm, запустил сервер

Ну так template и не определен. У тебя вместо template - div. Должен быть файл .vue:

Еще раз. Сделай новый проект на vue cli. Запусти, убедись, что все работает.

Затем добавь в уже имеющийся главный компонент строчки, связанные с vue-color (импорт, использование компонента). Проверь, что все работает.

А уж затем будешь создавать свои компоненты

vrm2, как не определен, ,у App есть template, и в компоненте photoshop-picker уже есть template. Id app это уже и есть мой App.vue как не определен, ,у App есть template, и в компоненте photoshop-picker уже есть template. Id app это уже и есть мой App.vue

В файлах vue тег template должен находиться на верхнем уровне, а у тебя он вложен в div. Должно быть так:

У меня небольшой так сказать проект, посмотри как я сделал, может поможет.

Vue.js как подключить дочернего компонента?
Добрый день. Есть такой код: <!DOCTYPE html> <html> <head> </head> <body>

Как правильно подключить Vue.js без конфликта с app.js ?
И для чего вообще нужен app.js ? Делаю простой blade, подключаю в нем же Vue.js. Событие.

не подключается vue.js в html
Всем привет, не подключается vue.js в html Не видит переменную message сделал вот так <head>.

В предыдущих статьях все компоненты приложения Vue.js размещались в одном файле - веб-странице. Такой подход, возможно, будет прекрасно работать для небольших проектов. Однако в больших проектах этот подход менее оптимален. В частности, html-разметка компонента определяется в javascript, в итоге логика и конфигурация компонента спешивается с html-кодом. Также мы не можем определить стили, которые предназначены только для компонента. И, кроме того, мы не можем использовать различные инструменты для предобработки типа Pug, Babel, Webpack и т.д.

Другой способ, который более подходит для крупных проектов, представляет определение компонента в отдельном файле с расширением .vue , который будет содержать логику javascript, html-разметку и стили компонента. Затем с помощью таких инструментов как Webpack или Browserify выполняется построение проекта и создается один общий файл javascript.

Прежде чем начать работу, необходимо установить node.js и npm и вообще иметь некоторые базовые знания по работе с npm. Для этого можно обратиться к следующей статье.

Итак, создадим новый проект. Для этого определим на жестком диске для проекта новую папку. Допустим, она будет называться firstapp .

Определим в этой папке новый файл index.html :

Блок div с будет представлять элемент, которые будет использоваться Vue, а весь код будет находиться в файле build.js.

Далее добавим в проект папку src , которая будет содержать собственно код приложения. Затем в этой папке создадим новый файл App.vue :

Этот файл будет представлять компонент App. Каждый компонент имеет три основные секции. Первая секция представляет шаблон компонента, который помещается в элемент <template> . Шаблон собственно и представляет разметку компонента.

Вторая секция, которая помещается в элемент <script> , представляет логику компонента. С помощью default определяются параметры компонента, а чтобы его можно было импортировать извне, применяется слово export.

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

Также добавим в папку src файл main.js :

Здесь объект Vue, с которого собственно и будет начинаться выполнение приложение. Объект Vue будет использовать элемент с - это тот элемент, который выше был определен на веб-странице index.html. С помощью функции render объект Vue будет производить рендеринг в этом элементе содержимого из компонента App. Естественно, чтобы использовать функциональность vue.js и компонента App, в начале файла определены функции импорта.

В частности, чтобы использовать компонент App, его необходимо импортировать:

Подобным образом мы можем подключать другие компоненты.

В то же время можно заметить, что данный файл называется main.js, а на веб-странице подключается файл dist/build.js, который еще не создан. Для того, чтобы все файлы нашего приложения превратились в dist/build.js, мы будем использовать сборщик Webpack.

Для этого перейдем к корневой папке нашего проекта и создадим в ней файл package.json , который будет определять все используемые зависимости:

Так как для работы приложения потребуется vue.js, то соответственно в секции dependencies определяется соответствующий пакет.

Еще ряд пакетов потребуются для построения приложения и в процессе разработки. Например, для сборки приложения будет использоваться пакет webpack.

Чтобы в процессе разработки динамически собирать приложение и запускать его на выполнение, потребуется пакет "webpack-dev-server".

Чтобы указать сборщику Webpack, как именно файла с расширением *.vue будут загружаться, необходим пакет "vue-loader". Но данный пакет сам использует еще две зависимости "vue-template-compiler" и "css-loader", поэтому их тоже надо установить.

Также для минимизации выходных файлов здесь устанавливается пакет плагина минимизации "uglifyjs-webpack-plugin".

Кроме того, в секции scripts определены две команды: dev и build. Команда dev предназначена для нужд разработки и позволяет на лету сгенерировать файл сборки и запустить проект. Этой команде передаются два параметра --hot --open . Параметр --hot позволяет задействовать плагин Hot Module Replacement , который взаимодействует с vue-loader и позволяет производить повторный рендеринг для каждой модели Vue. Второй параметр --open запускает браузер для обращения к приложению.

Команда build позволяет сгенерировать файл сборки, и затем этот файл может использоваться в production.

И в конце определим для сборщика Webpack конфигурацию. Для этого создадим в корневой папке проекта файл webpack.config.js :

Вначале файла получаем функциональность модуля webpack или встроенного модуля path. Параметр entry устанавливает входную точку в приложение - это наш файл main.js.

Далее в секции output устанавливаем выходные параметры сборки.

Затем через секцию modules устанавливаем два правила для загрузки файлов. В частности, для файлов с расширением .vue будет применяться загрузчик vue-loader. Второе правило определяет загрузку стилей: для обычных файлов css будет использоваться загрузчик css-loader, а для кода css из файлов с расшиением .vue - загрузчик vue-style-loader.

И в конце в секции plugins добавляется плагин VueLoaderPlugin, с помощью которого будет загружаться код vue.

В итоге проект будет выглядеть следующим образом:

Теперь, когда все готово, мы можем запустить проект. Для этого вначале с помощью команды cd в консоли (или терминале) перейдем к папке корневой проекта firstapp.

Далее нам надо установить все зависимости, описанные в файле package.json. Для этого выполним в консоли команду npm install .

Затем запустим проект, введя команду npm run dev :

Хотя мы запускаем приложение, но тем не менее в папке проекта мы не увидим никакого файла dist/build.js. Чтобы его сгенерировать, нам надо выполнить в консоли еще одну команду npm run build .

Разделение компонента на части

В данном случае компонент App.vue представляет единое целое, которое отделено от остальных компонентов. В этом плане его уже проще развивать независимо от других частей приложения. Однако может сложиться ситуация когда, кода html или css станет довольно много, и опять же такой компонент будет сложно поддерживать. В этом случае мы можем разделить компонент на отдельные функциональные части - код javascript, разметку html и стили css.

В частности, создадим в проекте в той же папке, где располагается компонент App.vue, новый файл App.html со следующим кодом:

В данном случае мы вынесли разметку html компонента в отдельный файл.

Также создадим в той же папке новый файл App.css :

И в ту же папку добавим новый файл App.js :

И теперь изменим код компонента App.vue :

То есть мы просто вынесли все части компонента в отдельные файлы. При этом в работе приложения ничего не изменится.

Читайте также: