Компиляция шаблонов 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 на лету:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

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

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

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

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

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

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

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Имейте в виду, что при использовании 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: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

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

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree