VueJS — Шаблон

Дата публикации: 2018-02-27

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-контент.

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

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

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

Для этого нам придётся использовать директиву 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>"

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

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

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

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

Мы изучили, как добавить шаблон 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. Так выглядит результат в браузере: