VueJS - Plantilla

Hemos aprendido en los capítulos anteriores cómo obtener una salida en forma de contenido de texto en la pantalla. En este capítulo, aprenderemos cómo obtener una salida en forma de plantilla HTML en la pantalla.

Para entender esto, consideremos un ejemplo y veamos el resultado en el 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>"
   }
})

Ahora, suponga que queremos mostrar el contenido html en la página. Si lo usamos con interpolación, es decir, con llaves dobles, esto es lo que obtendremos en el navegador.

Si vemos que el contenido html se muestra de la misma forma que hemos dado en la variable htmlcontent, esto no es lo que queremos, queremos que se muestre en un contenido HTML adecuado en el navegador.

Para ello, tendremos que utilizar v-htmldirectiva. En el momento en que asignamos la directiva v-html al elemento html, VueJS sabe que tiene que generarlo como contenido HTML. Agreguemos la directiva v-html en el.html archivo y ver la diferencia.

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

Ahora, no necesitamos las llaves dobles para mostrar el contenido HTML, en su lugar, hemos utilizado v-html = ”htmlcontent” donde htmlcontent se define dentro del js archivo de la siguiente manera:

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

La salida en el navegador es la siguiente:

Si inspeccionamos el navegador, veremos que el contenido se agrega de la misma manera que se define en el .js archivo a la variable htmlcontent : "<div><h1>Vue Js Template</h1></div>".

Echemos un vistazo al elemento inspeccionar en el navegador.

Hemos visto cómo agregar una plantilla HTML al DOM. Ahora, veremos cómo agregar atributos a los elementos HTML existentes.

Considere, tenemos una etiqueta de imagen en el archivo HTML y queremos asignar src, que es parte de Vue.

Ejemplo

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

Mire la etiqueta img de arriba, el src está en blanco. Necesitamos agregar el src desde vue js. Echemos un vistazo a cómo hacerlo. Almacenaremos el img src en el objeto de datos en el.js archivo de la siguiente manera:

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

Si asignamos el src de la siguiente manera, la salida en el navegador será como se muestra en la siguiente captura de pantalla.

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

Obtenemos una imagen rota. Para asignar cualquier atributo a la etiqueta HMTL, necesitamos usarv-binddirectiva. Agreguemos el src a la imagen con la directiva v-bind.

Así es como se asigna en .html archivo.

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

Necesitamos prefijar src con v-bind:src = ”imgsrc” y el nombre de la variable con src.

A continuación se muestra la salida en el navegador.