VueJS — Шаблон

От автора: в предыдущих разделах мы рассмотрели, как получить результат в форме текстового содержимого на экране. В этом разделе мы узнаем, как получить результат в форме 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. Так выглядит результат в браузере: