VueJS - Modèle

Nous avons appris dans les chapitres précédents, comment obtenir une sortie sous forme de contenu textuel à l'écran. Dans ce chapitre, nous allons apprendre comment obtenir une sortie sous forme de modèle HTML à l'écran.

Pour comprendre cela, considérons un exemple et voyons la sortie dans le navigateur.

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

Maintenant, supposons que nous voulions afficher le contenu html sur la page. Si nous l'utilisons avec interpolation, c'est-à-dire avec des doubles accolades, c'est ce que nous obtiendrons dans le navigateur.

Si nous voyons que le contenu html est affiché de la même manière que nous l'avons indiqué dans la variable htmlcontent, ce n'est pas ce que nous voulons, nous voulons qu'il soit affiché dans un contenu HTML approprié sur le navigateur.

Pour cela, nous devrons utiliser v-htmldirectif. Au moment où nous affectons la directive v-html à l'élément html, VueJS sait qu'il doit le sortir en tant que contenu HTML. Ajoutons la directive v-html dans le.html fichier et voyez la différence.

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

Maintenant, nous n'avons pas besoin des doubles accolades pour afficher le contenu HTML, à la place nous avons utilisé v-html = "htmlcontent" où htmlcontent est défini dans js fichier comme suit -

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

La sortie dans le navigateur est la suivante -

Si nous inspectons le navigateur, nous verrons que le contenu est ajouté de la même manière qu'il est défini dans le .js fichier vers la variable htmlcontent : "<div><h1>Vue Js Template</h1></div>".

Jetons un coup d'œil à l'élément inspect dans le navigateur.

Nous avons vu comment ajouter un modèle HTML au DOM. Maintenant, nous allons voir comment ajouter des attributs aux éléments HTML existants.

Considérez, nous avons une balise d'image dans le fichier HTML et nous voulons attribuer src, qui fait partie de Vue.

Exemple

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

Regardez la balise img ci-dessus, le src est vide. Nous devons y ajouter le src à partir de vue js. Voyons comment procéder. Nous allons stocker l'img src dans l'objet de données dans le.js fichier comme suit -

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 nous assignons le src comme suit, la sortie dans le navigateur sera comme indiqué dans la capture d'écran suivante.

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

Nous obtenons une image brisée. Pour attribuer un attribut à une balise HMTL, nous devons utiliserv-binddirectif. Ajoutons le src à l'image avec la directive v-bind.

Voici comment il est attribué dans .html fichier.

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

Nous devons préfixer le src avec v-bind:src = ”imgsrc” et le nom de la variable avec src.

Voici la sortie dans le navigateur.