Apa Sih Directive Pada Vue JS itu

Yuk kita kenalan dengan Directive pada Vue JS biar enak kedepannya hehehe, Directive merupakan atribut khusus yang disematkan pada elemen atau markup HTML sebagai penanda dan berfungsi untuk menjalankan satu perintah javascript di dalam atribut diawali dengan v-.
bahwa elemen DOM tersebut akan dikenai perlakuan tertentu oleh Vue. Directive berbentuk ekspresi Javascript yang secara reaktif menerapkan efek tertentu ke elemen DOM ketika nilai ekspresinya berubah.

Ada 7 Directive yang akan di kita bahas diantaranya :

• V-html.
• V-once.
• V-text.
• V-show.
• V-if fungsinya hamper sama dengan v-show.
• V-on berperan sebagai sebuah event listener pada elemen HTML/Komponen Vue.
• V-bind digunakan untuk menyambungkan attribute apa saja untuk elemen HTML.
• V-html digunakan untuk menampilkan data berupa kode HTML.

 

V-html

Digunakan untuk menampilkan kode HTML, bagi Anda yang ingin menampilkan huruf berwarna maupun render hyperlink tenang saja kita akan menggunakan V-html untuk menampilkannya

Kode directive :

[html]</pre>
<h1 v-html="message"></h1>
<pre> [/html]

Contoh kode lengkapnya: Html

[html]</pre>
<div id="app">

<h1 v-html="message"></h1>
<pre></div>

[/html]

Javascript

[html]</pre>
var vm = new Vue({

el: ‘#app’,

data: {

message: "<span style=’color:red’>Hello World!</a>",

},

})
<pre>
[/html]

 

Demo v-html

Download Now!373 Downloads

 

V-once

Digunakan agar nilai variable pada template tidak bisa diubah-ubah lagi. Kode directive :

[html]</pre>
<h1 v-once>{{ message }</h1>
<pre> [/html]

Contoh Kode lengkapnya : Html

[html]</pre>
<div style="text-align: center;  width: 600px;">

<h1 style="color: green;">

v-once directive

</h1>

</div>

<div id="canvas" style=

"border: 1px solid #000000;

width: 600px; height: 150px;">

<div id="app" style="text-align: center;

padding-top: 40px;">

<h1 v-once>{{ message }</h1>

</div>

</div>
<pre>
[/html]

Javascript

[html]</pre>
var app = new Vue({

el: ‘#app’,

data: {

message: ‘Pemulungkode’

},

})
<pre>
[/html]

Demo v-once

Download Now!342 Downloads

V-text

Merupakan directive yang digunakan untuk menampilkan string biasa, fungsinya sama dengan mustache atu doubel kurung kurawal. Kode directive :

[html]</pre>
<p v-text=”message”></p>

<!! – – sama dengan – ->

<p> {{ message }} </p>
<pre>
[/html]

Contoh kode lengkapnya : Html

[html]</pre>
<div id="app">

<h1 v-text="message"></h1>

</div>
<pre>
[/html]

Javascript

[html]</pre>
var vm = new Vue({

el: ‘#app’,

data: {

message: "Pemulungkode ",

},

})
<pre>
[/html]

Demo v-text

Download Now!350 Downloads

V-show

Merupakan directive yang digunakan untuk menampilkan atau menyembunyikan suatu elemen DOM, directive ini merupakan variabel boolean. Kode directive :

[html]</pre>
<p v-show=”displayMessage”>{{ message }}</p>
<pre>[/html]

Contoh kode lengkapnya : Html

[html]</pre>
<div v-show="message" id="app">

Hello pemulungkode .. !!

</div>
<pre>
[/html]

Javascript

[html]</pre>
var app = new Vue({

el: "#app",

data: {

message: fals,

},

})
<pre>
[/html]

Demo v-show

Download Now!373 Downloads

Sikaian dulu postingan saya tentang directive pada vue JS Mohon maaf  nih sebelumnya saya tidak menjelaskan semua tentang directive ini.  Saya akan sambung ke postingan berikutnya mengenai directive yang belum saya jelaskan. So pantengin terus yah heheh 😀

Mohon maaf sekali lagi jika ada kesalahan mengenai penulisan dan jangan sungkan-sungkan untuk bertanya jika Anda kurang mengerti. Terima kasih dan semoga bermanfaat ..