VueJS - Şablon

Daha önceki bölümlerde, ekranda metin içeriği biçiminde bir çıktının nasıl alınacağını öğrendik. Bu bölümde, ekranda HTML şablonu biçiminde bir çıktı almayı öğreneceğiz.

Bunu anlamak için bir örnek ele alalım ve çıktıyı tarayıcıda görelim.

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

Şimdi, html içeriğini sayfada göstermek istediğimizi varsayalım. Bunu enterpolasyonla kullanırsak, yani çift küme paranteziyle kullanırsak, tarayıcıda bunu elde ederiz.

Html içeriğinin htmlcontent değişkeninde verdiğimiz şekilde görüntülendiğini görürsek, istediğimiz bu değil, tarayıcıda uygun bir HTML içeriğinde görüntülenmesini istiyoruz.

Bunun için kullanmamız gerekecek v-htmldirektif. Html öğesine v-html yönergesi atadığımız anda, VueJS bunu HTML içeriği olarak çıkarması gerektiğini bilir. V-html direktifini.html dosya ve farkı görün.

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

Şimdi, HTML içeriğini göstermek için çift küme parantezlerine ihtiyacımız yok, bunun yerine htmlcontent'in içinde tanımlandığı v-html = ”htmlcontent” kullandık. js aşağıdaki gibi dosya -

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

Tarayıcıdaki çıktı aşağıdaki gibidir -

Tarayıcıyı incelersek, içeriğin aynı şekilde eklendiğini göreceğiz. .js değişkene dosya htmlcontent : "<div><h1>Vue Js Template</h1></div>".

Tarayıcıdaki inspect öğesine bir göz atalım.

DOM'a HTML şablonunun nasıl ekleneceğini gördük. Şimdi, mevcut HTML öğelerine nasıl nitelik ekleyeceğimizi göreceğiz.

HTML dosyasında bir resim etiketimiz olduğunu ve Vue'nun bir parçası olan src'yi atamak istediğimizi düşünün.

Misal

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

Yukarıdaki img etiketine bakın, src boştur. Src'yi ona vue js'den eklememiz gerekiyor. Nasıl yapılacağına bir göz atalım. İmg src'yi veri nesnesinde saklayacağız..js aşağıdaki gibi dosya -

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

Src'yi aşağıdaki gibi atarsak, tarayıcıdaki çıktı aşağıdaki ekran görüntüsünde gösterildiği gibi olacaktır.

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

Kırık bir görüntü elde ederiz. HMTL etiketine herhangi bir öznitelik atamak için kullanmamız gerekirv-binddirektif. Src'yi v-bind yönergesi ile görüntüye ekleyelim.

Bu nasıl atanır .html dosya.

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

Src'nin önekini almalıyız v-bind:src = ”imgsrc” ve src ile değişkenin adı.

Tarayıcıdaki çıktı aşağıdadır.