VueJS - Modello

Abbiamo imparato nei capitoli precedenti come ottenere un output sotto forma di contenuto di testo sullo schermo. In questo capitolo impareremo come ottenere un output sotto forma di modello HTML sullo schermo.

Per capire questo, consideriamo un esempio e vediamo l'output nel 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>"
   }
})

Supponiamo ora di voler mostrare il contenuto html nella pagina. Se ci capita di usarlo con interpolazione, cioè con doppie parentesi graffe, questo è quello che otterremo nel browser.

Se vediamo che il contenuto html viene visualizzato nello stesso modo che abbiamo dato nella variabile htmlcontent, questo non è quello che vogliamo, vogliamo che venga visualizzato in un contenuto HTML appropriato sul browser.

Per questo, dovremo usare v-htmldirettiva. Nel momento in cui assegniamo la direttiva v-html all'elemento html, VueJS sa che deve visualizzarlo come contenuto HTML. Aggiungiamo la direttiva v-html nel file.html file e vedere la differenza.

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

Ora, non abbiamo bisogno delle doppie parentesi graffe per mostrare il contenuto HTML, invece abbiamo usato v-html = "htmlcontent" dove htmlcontent è definito all'interno del js file come segue -

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

L'output nel browser è il seguente:

Se esaminiamo il browser, vedremo che il contenuto viene aggiunto nello stesso modo in cui è definito nel file .js file nella variabile htmlcontent : "<div><h1>Vue Js Template</h1></div>".

Diamo un'occhiata all'elemento inspect nel browser.

Abbiamo visto come aggiungere template HTML al DOM. Ora vedremo come aggiungere attributi agli elementi HTML in uscita.

Considera, abbiamo un tag immagine nel file HTML e vogliamo assegnare src, che fa parte di Vue.

Esempio

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

Guarda il tag img sopra, src è vuoto. Dobbiamo aggiungere src da vue js. Diamo un'occhiata a come farlo. Memorizzeremo img src nell'oggetto dati in.js file come segue -

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 assegniamo src come segue, l'output nel browser sarà come mostrato nello screenshot seguente.

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

Otteniamo un'immagine rotta. Per assegnare qualsiasi attributo al tag HMTL, dobbiamo usarev-binddirettiva. Aggiungiamo src all'immagine con la direttiva v-bind.

Ecco come viene assegnato in .html file.

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

Dobbiamo anteporre a src v-bind:src = ”imgsrc” e il nome della variabile con src.

Di seguito è riportato l'output nel browser.