Dasar-dasar Direktif Vue.js

Direktif Vue.js adalah token khusus dalam markup yang memberi tahu pustaka untuk melakukan sesuatu pada elemen DOM. Direktif ini diawali dengan v- untuk menunjukkan bahwa direktif tersebut adalah atribut khusus yang disediakan oleh Vue. Direktif adalah salah satu fitur inti Vue.js, yang memungkinkan pengembang untuk memanipulasi DOM secara efisien.

Dalam artikel ini, kita akan menjelajahi dasar-dasar direktif Vue.js, mencakup direktif yang paling umum digunakan dan cara menggunakannya dalam aplikasi Vue Anda.

Direktif yang Umum Digunakan di Vue.js

Berikut adalah beberapa arahan yang paling umum digunakan di Vue.js:

v-bind: Secara dinamis mengikat satu atau lebih atribut atau properti komponen ke suatu ekspresi.
v-model: Membuat pengikatan data dua arah pada elemen input formulir, textarea, dan pilih.
v-if: Merender elemen atau komponen secara kondisional.
v-else: Menyediakan blok else untuk v-if.
v-else-if: Menyediakan blok else-if untuk v-if.
v-for: Merender daftar item menggunakan array atau objek.
v-on: Melampirkan pendengar acara ke elemen.
v-show: Mengaktifkan atau menonaktifkan visibilitas elemen berdasarkan ekspresi.
v-html: Memperbarui HTML bagian dalam suatu elemen.

v-bind: Mengikat Atribut Secara Dinamis

Direktif v-bind digunakan untuk mengikat atribut atau properti secara dinamis ke suatu ekspresi. Misalnya, Anda dapat mengikat atribut img dari elemen img ke suatu properti data:

<template>
  <img v-bind:src="imageSrc" alt="Dynamic Image" />
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg'
    };
  }
};
</script>

Singkatan untuk v-bind hanyalah titik dua (:), sehingga contoh di atas dapat ditulis ulang sebagai:

<img :src="imageSrc" alt="Dynamic Image" />

v-model: Pengikatan Data Dua Arah

Direktif v-model digunakan untuk membuat pengikatan data dua arah pada elemen input formulir. Direktif ini menjaga elemen input dan properti data tetap sinkron:

<template>
  <input v-model="message" placeholder="Type something..." />
  <p>You typed: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

v-if, v-else-if, dan v-else: Rendering Bersyarat

Direktif v-if, v-else-if, dan v-else digunakan untuk merender elemen secara bersyarat. Direktif ini memungkinkan Anda merender elemen secara bersyarat berdasarkan evaluasi suatu ekspresi:

<template>
  <div v-if="isLoggedIn">Welcome back!</div>
  <div v-else-if="isGuest">Hello, Guest!</div>
  <div v-else>Please log in.</div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      isGuest: true
    };
  }
};
</script>

v-for: Rendering Daftar

Direktif v-for digunakan untuk merender daftar item dengan melakukan iterasi pada array atau objek. Setiap item dalam array dapat dirender menggunakan loop:

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  }
};
</script>

v-on: Penanganan Acara

Direktif v-on digunakan untuk melampirkan event listener ke elemen DOM. Anda dapat menangani interaksi pengguna seperti klik, input, dan lainnya:

<template>
  <button v-on:click="showAlert">Click Me</button>
</template>

<script>
export default {
  methods: {
    showAlert() {
      alert('Button clicked!');
    }
  }
};
</script>

Singkatan untuk v-on adalah simbol at (@), sehingga contoh di atas dapat ditulis ulang sebagai:

<button @click="showAlert">Click Me</button>

v-show: Alihkan Visibilitas

Direktif v-show digunakan untuk mengubah visibilitas suatu elemen berdasarkan suatu ekspresi. Tidak seperti v-if, direktif ini tidak menghapus elemen dari DOM; direktif ini hanya mengubah properti CSS display:

<template>
  <div v-show="isVisible">This is visible!</div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

v-html: Merender HTML

Direktif v-html digunakan untuk memperbarui HTML bagian dalam suatu elemen. Direktif ini berguna saat Anda perlu merender HTML mentah dalam komponen Vue Anda:

<template>
  <div v-html="rawHtml"></div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<strong>Bold Text</strong>'
    };
  }
};
</script>

Kesimpulan

Direktif Vue.js menyediakan cara yang ampuh untuk memanipulasi DOM dan membuat aplikasi web yang dinamis dan interaktif. Memahami dasar-dasar direktif Vue.js seperti v-bind, v-model, v-if, v-for, v-on, v-show, dan v-html sangat penting bagi setiap pengembang Vue. Dengan menguasai direktif ini, Anda dapat membangun aplikasi yang lebih tangguh dan kaya fitur dengan Vue.js.

vue direktif v-bind v-model v-if v-for v-on v-show v-html reaktivitas data acara kondisional rendering