Vue js вывести html

# HTML и статические ресурсы

# Стартовый файл

Файл public/index.html — шаблон, который будет обрабатываться html-webpack-plugin

. На этапе сборки, ссылки на все ресурсы будут внедряться автоматически. Кроме того, Vue CLI автоматически внедряет подсказки для ресурсов ( preload/prefetch ), ссылки на манифест/иконки (когда используется PWA-плагин), и ссылки на ресурсы для файлов JavaScript и CSS, созданных во время сборки.

# Интерполяции

Поскольку стартовый файл используется в качестве шаблона, можно использовать синтаксис шаблонов lodash

для интерполяции значений в нём:

• для неэкранированной подстановки;
• для экранированного HTML-кода;
• для потоков управления JavaScript.

, все переменные окружения в клиентском коде также доступны напрямую. Например, чтобы использовать значение BASE_URL :

# Preload

— это подсказки для браузера, указывающие на ресурсы, которые необходимо загрузить в первую очередь. Запросы на такие ресурсы будут отправлены ещё на этапе загрузки страницы, до начала её рендеринга.

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

и могут быть изменены / удалены с помощью chainWebpack через config.plugin(‘preload’) .

# Prefetch

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

По умолчанию приложение Vue CLI автоматически генерирует prefetch-подсказки для всех JavaScript-файлов, сгенерированных для асинхронных фрагментов (в результате разделения кода с помощью динамических импортов import()

и могут быть изменены / удалены с помощью chainWebpack через config.plugin(‘prefetch’) .

Примечание для многостраничных конфигураций

При использовании многостраничной конфигурации имя плагина нужно изменить в соответствии со структурой prefetch- , например prefetch-app .

Когда prefetch плагин отключён, вы можете вручную указывать необходимые фрагменты для prefetch с помощью инлайновых комментариев для webpack:

Webpack добавит prefetch-ссылки когда родительский фрагмент будет загружен.

Использование prefetch ссылок нагружает канал связи. Если у вас большое приложение с множеством асинхронных фрагментов (chunks) и ваши пользователи в основном используют мобильные устройства (а значит, чувствительны к использованию канала связи), вы можете пожелать отключить использование prefetch ссылок и вручную выбирать фрагменты для prefetch.

# Отключение генерации index.html

При использовании Vue CLI с существующим бэкендом, вам может потребоваться отключить генерацию index.html , чтобы сгенерированные ресурсы могли быть использованы с другим документом по умолчанию. Для этого добавьте в файл vue.config.js следующее:

Однако, это не рекомендуется потому что:

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

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

# Создание многостраничного приложения

Не каждое приложение должно быть одностраничным (SPA). Vue CLI поддерживает создание многостраничных приложений с помощью опции pages в vue.config.js . Код приложения будет эффективно переиспользоваться между его частями для оптимизации скорости загрузки.

# Обработка статических ресурсов

Статические ресурсы могут обрабатываться двумя различными способами:

Импорт в JavaScript или указание ссылки на них в шаблоне/CSS с использованием относительных путей. Такие ресурсы будут обрабатываться webpack.

Расположение в каталоге public и добавление ссылки на них с использованием абсолютных путей. Такие ресурсы просто копируются и не обрабатываются webpack.

# Импорты относительных путей

Если вы ссылаетесь на статический ресурс, используя относительный путь (должен начинаться с . ) внутри JavaScript, CSS или *.vue файлов, то он будет добавлен в дерево зависимостей webpack. В процессе компиляции все URL ресурсов, такие как , background: url(. ) и CSS @import будут обрабатываться как зависимости модуля.

Например, url(./image.png) будет преобразован в require(‘./image.png’) , а тег шаблона

будет скомпилирован в:

Внутри используется file-loader для определения конечного расположения файла с хэшем версии и правильный путь относительно корня, а также url-loader для инлайн-встраивания ресурсов, чей размер меньше 4 КБайт, чтобы уменьшить количество HTTP-запросов к серверу.

Изменить размер можно через chainWebpack. Например, чтобы установить лимит в 10 КБайт:

# Правила преобразования URL

Если в URL абсолютный путь (например, /images/foo.png ), он будет оставлен как есть.

Если URL начинается с . , он будет интерпретироваться как запрос модуля относительно текущего каталога и разрешаться на основе структуры каталогов вашей файловой системы.

Если URL начинается с

, то всё что после него будет интерпретироваться как запрос модуля. Это означает, что вы можете ссылаться на ресурсы даже внутри node_modules :

Если URL начинается с @ , то он также будет интерпретироваться как запрос модуля. Это удобно, потому что Vue CLI по умолчанию добавляет псевдоним @ для

/src . (только в шаблонах)

# Каталог public

Любые статические ресурсы в каталоге public просто копируются в каталог итоговой сборки и не будут обрабатываться webpack. Вы должны ссылаться на них, используя абсолютные пути.

Обратите внимание, что мы рекомендуем импортировать ресурсы как часть дерева зависимостей модуля, чтобы они обрабатывались webpack со следующими преимуществами:

• Скрипты и стили минифицируются и объединяются, уменьшая количество сетевых запросов.
• Недостающие файлы вызывают ошибку сборки вместо ошибок 404 для пользователей.
• Имена файлов в результате будут с хэшем, поэтому не нужно беспокоиться о том, что браузеры используют старые версии из кэша.

Каталог public предоставляется для крайних случаев, поэтому, когда вы ссылаетесь на него по абсолютному пути, необходимо учитывать, где будет опубликовано ваше приложение. Если публикуется не в корне домена, нужно указать префикс для URL-адресов в publicPath:

В public/index.html или других HTML-файлах, используемых html-webpack-plugin в качестве шаблонов, необходимо добавлять префикс в ссылки с помощью :

В шаблонах потребуется сначала передать BASE_URL в компонент:

Источник

Синтаксис шаблонов

Для связывания DOM с данными экземпляра Vue использует синтаксис, основанный на HTML. Все шаблоны Vue являются валидным HTML-кодом, который могут распарсить все HTML-парсеры и браузеры.

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

Если вы знакомы с концепцией виртуального DOM и предпочитаете использовать ничем не ограниченную мощь JavaScript — можете также писать render-функции напрямую, минуя шаблоны и даже используя JSX.

Интерполяции

Текст

Наиболее простой способ связывания данных — это текстовая интерполяция с использованием синтаксиса Mustache (двойных фигурных скобок):

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

Возможно также выполнение интерполяции однократно, которая не обновится при изменении данных — с помощью директивы v-once, но обратите внимание, это повлияет сразу на все связанные переменные в рамках данного элемента:

Сырой HTML

Значение выражения в двойных фигурных скобках подставляется как простой текст, а не как HTML. Для HTML необходимо использовать директиву v-html :

Двойные фигурные скобки: << rawHtml >>

Содержимое тега span будет заменено значением свойства rawHtml , интерпретированного как обычный HTML — все привязки данных игнорируются. Запомните, вы не можете использовать v-html для вложения шаблонов друг в друга, потому что движок шаблонов Vue не основывается на строках. Вместо этого нужно использовать компоненты, позволяющие сочетать и переиспользовать элементы UI.

Динамическая отрисовка произвольного HTML-кода на вашем сайте крайне опасна, так как может легко привести к XSS-уязвимостям. Используйте интерполяцию HTML только для доверенного кода, и никогда не подставляйте туда содержимое, создаваемое пользователями.

Атрибуты

Синтаксис двойных фигурных скобок не работает с HTML-атрибутами. Используйте вместо него директиву v-bind :

При использовании с булевыми атрибутами (когда их наличие уже означает true ) v-bind работает немного иначе. В этом примере:

Если значением isButtonDisabled будет null , undefined или false , то атрибут disabled не добавится в элемент .

Использование выражений JavaScript

Пока мы связывали данные со свойствами в шаблонах только по простым ключам. Но на самом деле при связывании данных Vue поддерживает всю мощь выражений JavaScript:

Выражения будут вычислены как JavaScript-код в области видимости соответствующего экземпляра Vue. Единственное ограничение в том, что допускается лишь одно выражение, поэтому код ниже НЕ сработает:

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

Директивы

Директивы — это специальные атрибуты с префиксом v- . В качестве значения они принимают одно выражение JavaScript (за исключением v-for , которую мы изучим далее). Директива реактивно применяет к DOM изменения при обновлении значения этого выражения. Вспомним пример из введения:

В этом случае директива v-if удалит или вставит элемент

в зависимости от истинности значения выражения seen .

Аргументы

Некоторые директивы могут принимать «аргумент», отделённый от названия директивы двоеточием. Например, директива v-bind используется для реактивного обновления атрибутов HTML:

В данном случае href — аргумент, указывающий директиве v-bind связать атрибут href элемента со значением выражения url .

Другим примером будет директива v-on , которая отслеживает события DOM:

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

Динамические аргументы

Начиная с версии 2.6.0, можно использовать JavaScript-выражение в аргументе директивы, заключив его в квадратные скобки:

Здесь attributeName будет выполняться как выражение JavaScript, а его вычисленное значение использоваться в качестве финального значения аргумента. Например, если ваш экземпляр Vue имеет в данных свойство attributeName , значение которого равно «href» , то это будет эквивалентно привязке v-bind:href .

Таким же образом можно использовать динамические аргументы для привязки обработчика к динамическому имени события:

В этом примере, когда значение eventName будет «focus» , то обработчик v-on:[eventName] будет эквивалентен v-on:focus .

Ограничения значений динамического аргумента

Ожидается, что динамические аргументы в результате будут строкой, за исключением null . Специальное значение null можно использовать для явного удаления привязки. Любые другие нестроковые значения будут вызывать предупреждения.

Ограничения динамического выражения

Для выражений динамических аргументов есть синтаксические ограничения, поскольку некоторые символы, такие как пробелы и кавычки, являются недопустимыми внутри имён атрибутов HTML. Например:

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

При использовании шаблонов в DOM (шаблонов, написанных непосредственно в HTML-файле), следует избегать именования ключей заглавными буквами, поскольку браузеры будут приводить имена атрибутов к строчным:

Модификаторы

Модификаторы — особые постфиксы, добавляемые после точки, обозначающие, что директива должна быть связана каким-то определённым образом. Например, модификатор .prevent говорит директиве v-on вызвать event.preventDefault() при обработке произошедшего события:

Больше примеров применения модификаторов вы увидите далее, когда будем подробнее разбирать v-on и v-model .

Сокращения

Префикс v- служит для визуального определения Vue-специфичных атрибутов в шаблонах. Это удобно, когда Vue используется для добавления динамического поведения в существующей разметке, но для часто используемых директив может показаться многословным. В то же время необходимость в v- менее значима при создании одностраничных приложений, где Vue контролирует каждый шаблон. Поэтому есть сокращённая запись для двух наиболее часто используемых директив, v-bind и v-on :

Сокращение v-bind

Сокращение v-on

Такие атрибуты на вид несколько отличаются от обычного HTML-кода, но символы : и @ являются валидными символами для названий атрибутов, и все браузеры поддерживающие Vue могут их корректно обработать. К тому же, в итоговой разметке они не появятся. Сокращённый синтаксис совершенно необязателен, но он скорее всего вам понравится, когда вы узнаете больше о том, как он используется далее.

Источник

Работа с формами

Типичное использование

Можно использовать директиву v-model для двунаправленного связывания данных с элементами форм input, textarea и select. Способ обновления элемента выбирается автоматически в зависимости от типа элемента. Хотя v-model и выглядит как нечто волшебное, в действительности это лишь синтаксический сахар для обновления данных в элементах ввода, с некоторыми поправками для исключительных случаев.

v-model игнорирует начальное значение атрибутов value , checked или selected на любых элементах форм. Данные экземпляра Vue всегда считаются источником истины. Начальное значение необходимо объявить на стороне JavaScript, внутри опции data компонента.

Внутренне v-model использует разные свойства и генерирует разные события для различных элементов ввода:

• элементы для ввода текста и многострочного текста используют свойство value и событие input ;
• чекбоксы и радиокнопки используют свойство checked и событие change ;
• выпадающие списки используют свойство value и событие change .

В языках, требующих IME (китайский, японский, корейский и т.д.), можно заметить, что v-model не обновляется по мере IME-композиции. Если вы хотите обрабатывать и эти обновления, используйте события input .

Текст

Многострочный текст

Интерполяция внутри textarea ( ) не будет работать. Используйте вместо неё директиву v-model

Чекбоксы

Один чекбокс, привязанный к булевому значению:

Список чекбоксов, привязанных к одному массиву:

Радиокнопки

Выпадающие списки

Выбор одного варианта из списка:

Если начальное значение выражения v-model не соответствует ни одному из вариантов списка, элемент
Выбрано: << selected >>

Динамическое отображение списка опций с помощью v-for :

Связывание значений

Для радиокнопок и выпадающих списков в качестве v-model обычно используются статические строки, а для чекбоксов — булевые значения:

Иногда необходимо связать значение с динамическим свойством экземпляра Vue. Для этого можно использовать v-bind . Кроме того, использование v-bind позволяет связывать поле ввода с нестроковыми значениями.

Чекбокс

Атрибуты true-value и false-value не влияют на атрибут value тега input, потому что браузеры пропускают невыбранные чекбоксы при отправке форм. Чтобы гарантированно отправлять одно из двух значений с формой (например, «да» или «нет») используйте радиокнопки.

Радиокнопки

Списки выбора

Модификаторы

По умолчанию v-model синхронизирует ввод с данными по событию input (за исключением вышеупомянутых событий IME). Можно указать модификатор lazy , чтобы использовать для синхронизации после события change :

.number

Для автоматического приведения введённого пользователем к Number, добавьте модификатор number :

Зачастую это полезно, потому что даже при указанном атрибуте type=»number» значением поля ввода всегда будет строка. Если значение не удаётся распарсить с помощью parseFloat() , то возвращается оригинальное значение.

Если необходимо, чтобы автоматически обрезались пробелы в начале и в конце строки, используйте модификатор trim для полей ввода, обрабатываемых через v-model :

Использование v-model с компонентами

Если вы ещё не знакомы с компонентами Vue, пока просто пропустите эту секцию

Встроенных в HTML элементов ввода не всегда достаточно. К счастью, компоненты Vue позволяют создавать собственные аналоги с полностью настраиваемым поведением. Эти элементы тоже могут работать с директивой v-model !

Источник