VueJS - Template

Aprendemos nos capítulos anteriores como obter uma saída na forma de conteúdo de texto na tela. Neste capítulo, aprenderemos como obter uma saída na forma de um modelo HTML na tela.

Para entender isso, vamos considerar um exemplo e ver a saída no navegador.

<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>"
   }
})

Agora, suponha que desejamos mostrar o conteúdo html na página. Se acontecer de usá-lo com interpolação, ou seja, com chaves duplas, é isso que teremos no navegador.

Se virmos que o conteúdo html é exibido da mesma maneira que fornecemos na variável htmlcontent, não é isso que queremos, queremos que seja exibido em um conteúdo HTML adequado no navegador.

Para isso, teremos que usar v-htmldiretiva. No momento em que atribuímos a diretiva v-html ao elemento html, VueJS sabe que deve gerá-la como conteúdo HTML. Vamos adicionar a diretiva v-html no.html arquivo e veja a diferença.

<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>

Agora, não precisamos das chaves duplas para mostrar o conteúdo HTML, em vez disso, usamos v-html = ”htmlcontent” onde htmlcontent é definido dentro do js arquivo da seguinte forma -

var vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>"
   }
})

A saída no navegador é a seguinte -

Se inspecionarmos o navegador, veremos que o conteúdo é adicionado da mesma forma que está definido no .js arquivo para a variável htmlcontent : "<div><h1>Vue Js Template</h1></div>".

Vamos dar uma olhada no elemento inspect no navegador.

Vimos como adicionar um modelo HTML ao DOM. Agora, veremos como adicionar atributos aos elementos HTML existentes.

Considere que temos uma tag de imagem no arquivo HTML e queremos atribuir src, que faz parte do Vue.

Exemplo

<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>

Observe a tag img acima, o src está em branco. Precisamos adicionar o src a ele de vue js. Vamos dar uma olhada em como fazer isso. Iremos armazenar o img src no objeto de dados no.js arquivo da seguinte forma -

var vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>",
      imgsrc : "images/img.jpg"
   }
})

Se atribuirmos o src da seguinte maneira, a saída no navegador será como mostrado na imagem a seguir.

<img src = "{{imgsrc}}" width = "300" height = "250" />

Temos uma imagem quebrada. Para atribuir qualquer atributo à tag HMTL, precisamos usarv-binddiretiva. Vamos adicionar o src à imagem com a diretiva v-bind.

É assim que é atribuído em .html Arquivo.

<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>

Precisamos prefixar o src com v-bind:src = ”imgsrc” e o nome da variável com src.

A seguir está a saída no navegador.