От автора: в предыдущих разделах мы рассмотрели, как получить результат в форме текстового содержимого на экране. В этом разделе мы узнаем, как получить результат в форме HTML-шаблона.
Чтобы лучше разобраться в том, как работают во Vue JS шаблоны, давайте рассмотрим конкретный пример.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "vue_det"> <h1>Firstname : {{firstname}}</h1> <h1>Lastname : {{lastname}}</h1> <div>{{htmlcontent}}</div> </div> <script type = "text/javascript" src = "js/vue_template.js"></script> </body> </html> vue_template.js var vm = new Vue({ el: '#vue_det', data: { firstname : "Ria", lastname : "Singh", htmlcontent : "<div><h1>Vue Js Template</h1></div>" } }) |
Дальше предположим, что нам нужно вывести html-контент на странице. Если мы используем это с интерполяцией, то есть без двойных фигурных скобок, то вот что получим в браузере.
Фреймворк VUE JS: быстрый старт
Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля
Узнать подробнее
Если мы видим, что содержимое html отображается таким же образом, как если бы мы задали переменную htmlcontent, значит, это не то, что нам нужно, мы хотим, чтобы оно отображалось в браузере, как корректный HTML-контент.
Для этого нам придётся использовать директиву v-html. Когда мы присвоим директиву v-html элементу html, VueJS поймёт, что он должен выдать это как HTML-контент. Давайте добавим в файл .html директиву v-html и посмотрим, что изменится.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "vue_det"> <h1>Firstname : {{firstname}}</h1> <h1>Lastname : {{lastname}}</h1> <div v-html = "htmlcontent"></div> </div> <script type = "text/javascript" src = "js/vue_template.js"></script> </body> </html> |
Теперь нам не нужны двойные фигурные скобки, чтобы вывести HTML-контент, вместо этого мы использовали v-html = ”htmlcontent”, где htmlcontent определена внутри файла js, как видно на следующем примере:
| 1 2 3 4 5 6 7 8 | var vm = new Vue({ el: '#vue_det', data: { firstname : "Ria", lastname : "Singh", htmlcontent : "<div><h1>Vue Js Template</h1></div>" } }) |
Результат в браузере выглядит следующим образом:
Если мы обновим страницу браузера, то увидим, что содержимое добавлено и определено в файле .js для переменной htmlcontent:
| 1 | "<div><h1>Vue Js Template</h1></div>" |
Давайте просмотрим код элемента в браузере.
Фреймворк VUE JS: быстрый старт, первые результаты
Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля
Узнать подробнееМы изучили, как добавить шаблон HTML в DOM. Дальше мы рассмотрим, как добавлять атрибуты в существующие HTML-элементы. Обратите внимание, у нас в HTML-файле есть тэг image и мы хотим зажать атрибут src, который является частью Vue.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "vue_det"> <h1>Firstname : {{firstname}}</h1> <h1>Lastname : {{lastname}}</h1> <div v-html = "htmlcontent"></div> <img src = "" width = "300" height = "250" /> </div> <script type = "text/javascript" src = "js/vue_template1.js"></script> </body> </html> |
Посмотрите на тэг img в приведенном выше коде — src здесь пустой. Нам нужно добавить src от vue js. Давайте рассмотрим, как это сделать. Мы сохраним img src в объект данных в файле .js, как это показано ниже:
| 1 2 3 4 5 6 7 8 9 | var vm = new Vue({ el: '#vue_det', data: { firstname : "Ria", lastname : "Singh", htmlcontent : "<div><h1>Vue Js Template</h1></div>", imgsrc : "images/img.jpg" } }) |
Если мы присвоим src, то результат в браузере будет выглядеть так, как на скриншоте ниже:
| 1 | <img src = "{{imgsrc}}" width = "300" height = "250" /> |
Изображение отсутствует. Чтобы присвоить атрибут тэгу HMTL, нам нужно использовать директиву v-bind. Давайте добавим src к image с помощью директивы v-bind. Вот как это делается в файле .html.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "vue_det"> <h1>Firstname : {{firstname}}</h1> <h1>Lastname : {{lastname}}</h1> <div v-html = "htmlcontent"></div> <img v-bind:src = "imgsrc" width = "300" height = "250" /> </div> <script type = "text/javascript" src = "js/vue_template1.js"></script> </body> </html> |
Нам нужно добавить префикс src к v-bind:src = ”imgsrc” и имени переменной с src. Так выглядит результат в браузере:
Давайте проверим, как выглядит код src с v-bind.
Как мы видим, src присваивается без свойств vuejs.
Источник: https://www.tutorialspoint.com/
Редакция: Команда webformyself.
Фреймворк VUE JS: быстрый старт, первые результаты
Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля
Узнать подробнее
