От автора: в предыдущих разделах мы рассмотрели, как получить результат в форме текстового содержимого на экране. В этом разделе мы узнаем, как получить результат в форме HTML-шаблона.
Чтобы лучше разобраться в том, как работают во Vue JS шаблоны, давайте рассмотрим конкретный пример.
<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-контент на странице. Если мы используем это с интерполяцией, то есть без двойных фигурных скобок, то вот что получим в браузере.
Если мы видим, что содержимое html отображается таким же образом, как если бы мы задали переменную htmlcontent, значит, это не то, что нам нужно, мы хотим, чтобы оно отображалось в браузере, как корректный HTML-контент.
Для этого нам придётся использовать директиву v-html. Когда мы присвоим директиву v-html элементу html, VueJS поймёт, что он должен выдать это как HTML-контент. Давайте добавим в файл .html директиву v-html и посмотрим, что изменится.
<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, как видно на следующем примере:
var vm = new Vue({ el: '#vue_det', data: { firstname : "Ria", lastname : "Singh", htmlcontent : "<div><h1>Vue Js Template</h1></div>" }
})
Результат в браузере выглядит следующим образом:
Если мы обновим страницу браузера, то увидим, что содержимое добавлено и определено в файле .js для переменной htmlcontent:
"<div><h1>Vue Js Template</h1></div>"
Давайте просмотрим код элемента в браузере.
Мы изучили, как добавить шаблон HTML в DOM. Дальше мы рассмотрим, как добавлять атрибуты в существующие HTML-элементы. Обратите внимание, у нас в HTML-файле есть тэг image и мы хотим зажать атрибут src, который является частью Vue.
<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, как это показано ниже:
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, то результат в браузере будет выглядеть так, как на скриншоте ниже:
<img src = "{{imgsrc}}" width = "300" height = "250" />
Изображение отсутствует. Чтобы присвоить атрибут тэгу HMTL, нам нужно использовать директиву v-bind. Давайте добавим src к image с помощью директивы v-bind. Вот как это делается в файле .html.
<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.