VueJS - Vorlage

In den vorherigen Kapiteln haben wir gelernt, wie Sie eine Ausgabe in Form von Textinhalten auf dem Bildschirm erhalten. In diesem Kapitel erfahren Sie, wie Sie eine Ausgabe in Form einer HTML-Vorlage auf dem Bildschirm erhalten.

Um dies zu verstehen, betrachten wir ein Beispiel und sehen die Ausgabe im Browser.

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

Angenommen, wir möchten den HTML-Inhalt auf der Seite anzeigen. Wenn wir es zufällig mit Interpolation verwenden, dh mit doppelten geschweiften Klammern, erhalten wir dies im Browser.

Wenn wir sehen, dass der HTML-Inhalt auf die gleiche Weise angezeigt wird, wie wir ihn in der Variablen htmlcontent angegeben haben, ist dies nicht das, was wir wollen. Wir möchten, dass er in einem richtigen HTML-Inhalt im Browser angezeigt wird.

Dafür müssen wir verwenden v-htmlRichtlinie. In dem Moment, in dem wir dem HTML-Element eine v-html-Direktive zuweisen, weiß VueJS, dass es als HTML-Inhalt ausgegeben werden muss. Fügen wir die v-html-Direktive in die.html Datei und sehen den Unterschied.

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

Jetzt brauchen wir keine doppelten geschweiften Klammern, um den HTML-Inhalt anzuzeigen, sondern haben v-html = "htmlcontent" verwendet, wobei htmlcontent innerhalb von definiert ist js Datei wie folgt -

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

Die Ausgabe im Browser ist wie folgt:

Wenn wir den Browser überprüfen, sehen wir, dass der Inhalt auf die gleiche Weise hinzugefügt wird, wie er in der definiert ist .js Datei in die Variable htmlcontent : "<div><h1>Vue Js Template</h1></div>".

Schauen wir uns das Inspect-Element im Browser an.

Wir haben gesehen, wie man dem DOM eine HTML-Vorlage hinzufügt. Nun werden wir sehen, wie man den vorhandenen HTML-Elementen Attribute hinzufügt.

Bedenken Sie, wir haben ein Bild-Tag in der HTML-Datei und möchten src zuweisen, das Teil von Vue ist.

Beispiel

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

Schauen Sie sich das img-Tag oben an, der src ist leer. Wir müssen den src von vue js hinzufügen. Lassen Sie uns einen Blick darauf werfen, wie es geht. Wir werden das img src im Datenobjekt im speichern.js Datei wie folgt -

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

Wenn wir den src wie folgt zuweisen, erfolgt die Ausgabe im Browser wie im folgenden Screenshot gezeigt.

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

Wir bekommen ein kaputtes Bild. Um dem HMTL-Tag ein Attribut zuzuweisen, müssen wir verwendenv-bindRichtlinie. Fügen wir den src mit der Direktive v-bind zum Bild hinzu.

So wird es in zugewiesen .html Datei.

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

Wir müssen dem src ein Präfix voranstellen v-bind:src = ”imgsrc” und der Name der Variablen mit src.

Es folgt die Ausgabe im Browser.