Using V-… in VueJs (Directive)

Biasa menggunakan React, kesan pertama saat pakai Vue adalah v-… yang digunakan langsung di dalam tag element. Jika pada react untuk looping data dengan cara seperti ini :

// Using react

const Posts = [
  { id: 1, title: 'Post 1', content: 'Lorem ipsum...' },
  { id: 2, title: 'Post 2', content: 'Dolor sit amet...' },
];

function MyComponent() {
  return (
    <div>
      {Posts.map(post => {
        return (
          <div key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.content}</p>
          </div>
        );
      })}
    </div>
  );
}

sedangkan dengan Vue maka kodenya menjadi seperti ini :

// Using Vue

<template>
  <div>
    <div v-for="post in Posts" :key="post.id">
      <h2>{{ post.title }}</h2>
      <p>{{ post.content }}</p>
    </div>
  </div>
</template>

<script>
	const Posts = [
	  { id: 1, title: 'Post 1', content: 'Lorem ipsum...' },
	  { id: 2, title: 'Post 2', content: 'Dolor sit amet...' },
	];
</script>

Perhatikan di dalam tag div terdapat v-for dan :key, inilah cara unik Vue untuk melakukan looping. Dan v-… bisa disebut dengan Directive.

Apa itu Directive VueJs ?

Berdasarkan dokumentasi resmi VueJs tantang Directive, tidak dijelaskan maksud dan karakter umunya. tetapi hanya tertulis #Built-in Directive . Nah, disini ada istilah Built-in yang artinya fungsi bawaan, ini seperti MDN documentation JavaScript yang memiliki Built-in function seperti Math.min() dan Array.map(). Apapun itu tujuan dari Built-in adalah untuk mempermudah dan membuat code lebih sederhana.

Back to topic…

Jadi, bisa di katakan kalo Directive VueJs adalah fungsi bawaan dari VueJs untuk syntac kodenya. Sekarang, tidak perlu mendebat descripsi apa yang paling benar tapi mari kita lihat bagaimana cara penggunaannya!.

Directive VueJs yang sering digunakan

Bagi pertama yang menggunakan VueJs seringnya akan bertanya tentang :

• bagaimana cara looping data ?
• bagaimana cara mendapatkan value input ?
• bagaimana cara mengganti data dinamis dan static ?
• bagaimana cara conditional rendering ?
• bagaiamna cara set Event ?

berdasarkan hal itu, ada Directive yang sering digunakan dan perlu diketahui adalah sebagai berikut :

• v-for ⇒ untuk melakukan looping

  😅 lihat contoh diatas aja, hehehe.

• v-if v-else-if v-else ⇒ untuk melakukan conditional❌ Unsupported block ($embed)
• @click ⇒ event handler❌ Unsupported block ($embed)
• v-model ⇒ untuk mendapat value input❌ Unsupported block ($embed)
• v-bind ⇒ untuk mengganti data tag yang dinamis atau static❌ Unsupported block ($embed)

Resource

https://vuejs.org/api/built-in-directives.html

https://www.petanikode.com/vuejs-directive/