Компиляция шаблонов Vue.js на лету с помощью v-runtime-template

Компиляция шаблонов Vue.js на лету с помощью v-runtime-template

От автора: недавно я выпустил v-runtime-template, компонент Vue, который позволяет очень просто компилировать и интерпретировать Vue js шаблоны во время выполнения с использованием API-интерфейса, подобного v-html. У меня была проблема в проекте, когда мне приходилось получать шаблон с сервера. Почему, спросите вы? Ну, представьте себе обычный drag-n-drop интерфейс, который позволяет пользователю создавать какой-то внешний вид. Он сохраняется как код шаблона Vue, который использует компоненты, реализованные в интерфейсе. Интерфейс вызывает API для доступа к этому контенту позже, чтобы заполнить раздел страницы.

Вы, вероятно, сделали бы это с помощью простого HTML, используя v-html. Давайте рассмотрим пример, чтобы легче все понять.

Введение простого HTML с помощью v-html

Используя v-html, вы можете вставлять HTML в любой элемент DOM на лету:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

Хорошо, это кажется довольно разумным. Строка template может идеально передаваться от вызова Ajax сервера. Но что если мы хотим, чтобы в шаблоне был некоторый код шаблона Vue?

v-html будет интерпретировать этот шаблон как простой HTML, а эти теги не существуют в HTML.

Ввод v-runtime-шаблон

Именно здесь вступает в действие v-runtime-template. Он предлагает аналогичный с v-html API, но интерпретирует конкретный код шаблона Vue.

v-runtime-template автоматически получает контекст родительского компонента, где он используется, а затем применяет динамический компонент, чтобы компилировать и прикреплять Vue, как вы можете видеть в функции рендеринга кода.

Чтобы предыдущий код заработал, вам просто нужно использовать v-runtime-template, передавая шаблонную поддержку следующим образом:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

Имейте в виду, что при использовании v-runtime-template у вас все еще есть те же правила, что вы используете, когда этот шаблон является частью компонента. В этом случае либо app-title, либо vue-router должны быть зарегистрированы глобально или добавлены в компонент:

Доступ к родительской области

Замечательная вещь в v-runtime-templateзаключается в том, что он может получать доступ к родительской области, что означает доступность через data, props, computed или methods. Таким образом, вы можете иметь динамические шаблоны, которые имеют доступ к реактивным данным от родительского элемента.

Например, следующий шаблон может получить доступ к animal:

Или вызвать метод:

Наши строки или серверные шаблоны никогда не были так тесно связаны с приложением!

Заключение

v-runtime-template был создан, чтобы, используя синтаксис типа v-html, решать проблемы интерпретации шаблонов «на лету» для таких случаев, как шаблоны, поступающие с сервера; когда они получены во время выполнения. Если вам нужна дополнительная информация, вы можете посмотреть официальную демо-версию или репозиторий. Вы также можете оставить отзыв!

Автор: Alex Jover Morales

Источник: https://alligator.io/

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

VUE JS. Быстрый старт

Создание веб-приложения на VUE JS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий