VueJS — Шаблон

VueJS — Шаблон

От автора: в предыдущих разделах мы рассмотрели, как получить результат в форме текстового содержимого на экране. В этом разделе мы узнаем, как получить результат в форме HTML-шаблона.

Чтобы лучше разобраться в том, как работают во Vue JS шаблоны, давайте рассмотрим конкретный пример.

Дальше предположим, что нам нужно вывести html-контент на странице. Если мы используем это с интерполяцией, то есть без двойных фигурных скобок, то вот что получим в браузере.

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Если мы видим, что содержимое html отображается таким же образом, как если бы мы задали переменную htmlcontent, значит, это не то, что нам нужно, мы хотим, чтобы оно отображалось в браузере, как корректный HTML-контент.

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

Теперь нам не нужны двойные фигурные скобки, чтобы вывести HTML-контент, вместо этого мы использовали v-html = ”htmlcontent”, где htmlcontent определена внутри файла js, как видно на следующем примере:

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

Если мы обновим страницу браузера, то увидим, что содержимое добавлено и определено в файле .js для переменной htmlcontent:

Давайте просмотрим код элемента в браузере.

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Мы изучили, как добавить шаблон HTML в DOM. Дальше мы рассмотрим, как добавлять атрибуты в существующие HTML-элементы. Обратите внимание, у нас в HTML-файле есть тэг image и мы хотим зажать атрибут src, который является частью Vue.

Посмотрите на тэг img в приведенном выше коде — src здесь пустой. Нам нужно добавить src от vue js. Давайте рассмотрим, как это сделать. Мы сохраним img src в объект данных в файле .js, как это показано ниже:

Если мы присвоим src, то результат в браузере будет выглядеть так, как на скриншоте ниже:

Изображение отсутствует. Чтобы присвоить атрибут тэгу HMTL, нам нужно использовать директиву v-bind. Давайте добавим src к image с помощью директивы v-bind. Вот как это делается в файле .html.

Нам нужно добавить префикс src к v-bind:src = ”imgsrc” и имени переменной с src. Так выглядит результат в браузере:

Давайте проверим, как выглядит код src с v-bind.

Как мы видим, src присваивается без свойств vuejs.

Источник: //www.tutorialspoint.com/

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

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть

Метки:

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

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