VueJS - Шаблон

В предыдущих главах мы узнали, как получить вывод в виде текстового содержимого на экране. В этой главе мы узнаем, как получить вывод в виде шаблона 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>{{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. Добавим директиву v-html в.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, и мы хотим назначить 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 к изображению с помощью директивы 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.

Ниже приведен вывод в браузере.