Pada materi kali ini kita akan belajar tentang Cara Penggunaan Directive V-Text dan V-HTML Pada Vue js, namun sebelum kita masuk kepada pembahasan tentang Cara Penggunaan Directive V-Text dan V-HTML Pada Vue js kita akan membahas sedikit apa itu yang di maksud dengan directive di dalam framework Vue.js. Directive merupakan salah satu fitur yang dimiliki oleh framework vue.js yang berfungsi untuk menambahkan sebuah special attribute pada tag HTML dari web app kita, setiap attribute directive terdapat awalan v atau prefix v-.
Directive tersebut seperti layaknya attribute yang biasa kita gunakan pada HTML, dan attribute tersebut digunakan untuk memberi tahu library untuk memanipulasi DOM element. Value dari directive nantinya digunakan untuk melakukan binding expressions, nantinya directive akan memberitahukan instruksi ke DOM untuk melakukan sesuatu saat value expressions berubah.
Pada framework vue js terdapat beberapa directive yang siring kita gunakan nantinya namun pada materi kali ini kitakan belajar tentang directive v-text, dan v-html. untuk struktur penulisan dari directive v-text dan v-html yaitu seperti dibawah ini:
- Silahkan teman-teman buat sebuah file dengan nama html kemudian kita akan masukan script seperti dibawah ini :
<html>
<head>
<meta charset="UTF-8">
<title>Cara Penggunaan Directive V-Text dan V-HTML Pada Vue js</title>
</head>
<body>
<div id="app" v-html="message">
<!-- <b>{{ message }}<b> -->
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
var app = new Vue({
el: '#app',
data: {
message: '<b><i>Hello DUMET School<i></b>'
}
})
</script >
</html>
Jika kita jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini :
https://codepen.io/irwand/pen/GRRrGmJ
Pada script HTML diatas terdapat sebuah message yang berfungsi untuk menampilkan sebuah pesan yang derisikan “Hello DUMET School”, kita juga dapat menambahkan tag <b> dan tag <i> pada message yang terdapat pada HTMLnya seperti dibawah ini :
<b><i>{{ message }}</i></b>
Jika kita jalankan kembali pada browser maka pesan yang berisikan “Hello DUMET School” akan berubah menjadi bold dan italic seperti dibawah ini :
https://codepen.io/irwand/pen/rNNjKGK
Dari hasil diatas kita telah berhasil merubah formatnya menjadi seperti yang kita inginkan, namun jika kita ingin menampilkan data dari dari vue js yang di dalamnya terdapat tag-tag html maka kita bisa menambahkan v-html, untuk struktur penulisannya yaitu seperti dibawah ini :
<html>
<head>
<meta charset="UTF-8">
<title>Cara Penggunaan Directive V-Text dan V-HTML Pada Vue js</title>
</head>
<body>
<div id="app" v-html="message">
<!-- <b>{{ message }}<b> -->
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
var app = new Vue({
el: '#app',
data: {
message: '<b><i>Hello DUMET School<i></b>'
}
})
</script >
</html>
Jika kita jalankan kembali pada browser maka hasilnya akan sama seperti yang kita buat pada script sebelumnya
https://codepen.io/irwand/pen/RwwKJJW
namun jika <div id=”app” v-html=”message”> kita rubah menjadi <div id=”app” v-text=”message”> maka semua tag html yang terdapat didalam vue.js tidak akan dijalankan sebagai tag html seperti dibawah ini :
https://codepen.io/irwand/pen/WNNRyaZ
oke teman-teman itulah pembahasan kita tentang Cara Penggunaan Directive V-Text dan V-HTML Pada Vue js.
Semoga bermanfaat.
Terima kasih.
The post Cara Penggunaan Directive V-Text dan V-HTML Pada Vue js appeared first on Kursus Website Terbaik.