Cara Penggunaan Directive V-Text dan V-HTML Pada Vue js
Di bahan kali ini kita akan belajar mengenai Cara Pemakaian Directive V-Text dan V-HTML Di Vue js, namun sebelum kita masuk kepada pembahasan mengenai Cara Pemakaian Directive V-Text dan V-HTML Di Vue js kita akan membahas sedikit apa itu yang di maksud dengan directive di pada framework Vue.js. Directive adalah diantara fitur yang dimiliki oleh framework vue.js yang berfungsi bagi menambahkan sebuah special attribute di tag HTML dari web app kita, setiap attribute directive terdapat awalan v atau prefix v-.
Directive tersebut seperti layaknya attribute yang biasanya kita gunakan di HTML, dan attribute tersebut digunakan bagi memberi tahu library bagi memanipulasi DOM element. Value dari directive nantinya digunakan bagi mengerjakan binding expressions, nantinya directive akan memberitahukan instruksi ke DOM bagi mengerjakan sesuatu dikala value expressions berubah.
Di framework vue js terdapat beberapa directive yang siring kita gunakan nantinya namun di bahan kali ini kitakan belajar mengenai directive v-text, dan v-html. bagi struktur penulisan dari directive v-text dan v-html yaitu seperti dibawah ini:
- Silahkan teman-teman bikin sebuah file dengan nama html kemudian kita akan masukan script seperti dibawah ini :
<html>
<head>
<meta charset=UTF-8>
<title>Cara Pemakaian Directive V-Text dan V-HTML Di 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 Source Code Aplikasi<i></b>'
}
})
</script >
</html>
Seandainya kita jalankan di browser karenanya akan terlihat hasilnya seperti dibawah ini :
https://codepen.io/irwand/pen/GRRrGmJ
Di script HTML diatas terdapat sebuah message yang berfungsi bagi menampilkan sebuah pesan yang derisikan “Hello Source Code Aplikasi”, kita pun dapat menambahkan tag <b> dan tag <i> di message yang terdapat di HTMLnya seperti dibawah ini :
<b><i>{{ message }}</i></b>Seandainya kita jalankan kembali di browser karenanya pesan yang berisikan “Hello Source Code Aplikasi” 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 kalau kita ingin menampilkan data dari dari vue js yang di dalamnya terdapat tag-tag html karenanya kita dapat menambahkan v-html, bagi struktur penulisannya yaitu seperti dibawah ini :
<html>
<head>
<meta charset=UTF-8>
<title>Cara Pemakaian Directive V-Text dan V-HTML Di 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 Source Code Aplikasi<i></b>'
}
})
</script >
</html>
Seandainya kita jalankan kembali di browser karenanya hasilnya akan sama seperti yang kita bikin di script sebelumnya
https://codepen.io/irwand/pen/RwwKJJW
namun kalau <div id=”app” v-html=”message”> kita rubah menjadi <div id=”app” v-text=”message”> karenanya seluruh tag html yang terdapat didalam vue.js tak akan dijalankan selaku tag html seperti dibawah ini :
https://codepen.io/irwand/pen/WNNRyaZ
oke teman-teman seperti itulah pembahasan kita mengenai Cara Pemakaian Directive V-Text dan V-HTML Di Vue js.
Semoga bermanfaat.
Terima kasih.
Sumber https://kursuswebsite.org
