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;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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
1 2 3 4 5 6 7 8 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
Sekarang, kita tidak memerlukan kurung kurawal ganda untuk menampilkan konten HTML, sebagai gantinya saya telah menggunakan v-html = “htmlcontent” di mana htmlcontent didefinisikan di dalam file js sebagai berikut –
1 2 3 4 5 6 7 8 |
var vm = new Vue({ el: '#vue_det', data: { firstname : "Ria", lastname : "Singh", htmlcontent : "<div><h1>Vue Js Template</h1></div>" } }) |
Output di browser adalah sebagai berikut –
Oke itulah tadi pembahasan saya tentang template pada Sebuah Vue.js, semoga bermanfaat.