template pada Sebuah Vue.js

Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang template pada Sebuah Vue.js. Pada artikel sebelumnya kita telah belajar bagaimana mendapatkan output dalam bentuk konten teks di layar. Dalam artikel kali ini, kita akan belajar cara mendapatkan output dalam bentuk template HTML di layar.

Untuk memahami itu semua silahkan simak penjelasan di bawah ini;

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

<html>

<head>

<title>VueJs Instance</title>

</head>

<body>

<h1>Firstname : {{firstname}}</h1>

<h1>Lastname : {{lastname}}</h1>

<div>{{htmlcontent}}</div>

</div>

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

var vm = new Vue({

el: '#vue_det',

data: {

firstname : "Ria",

lastname : "Singh",

htmlcontent : "<div><h1>Vue Js Template</h1></div>"

}

})

Sekarang, misalkan kita ingin menunjukkan konten html di halaman. Jika kita menggunakannya dengan interpolasi, yaitu dengan kurung kurawal ganda, inilah yang akan kita dapatkan di browser

Jika kita melihat konten html ditampilkan dengan cara yang sama seperti yang say berikan dalam konten html variabel, ini bukan yang saya inginkan, saya ingin konten itu ditampilkan dalam konten HTML yang tepat di browser.

Untuk ini, kita harus menggunakan direktif v-html. Saat saya menetapkan direktif v-html ke elemen html, VueJS tahu bahwa ia harus menampilkannya sebagai konten HTML. Mari tambahkan arahan v-html di file .html dan lihat perbedaannya.

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