Direktif khusus memungkinkan Anda memperluas fungsionalitas halaman web Vue Anda dengan cara yang dapat diskalakan dan modular.
Arahan adalah konstruksi pemrograman yang menentukan bagaimana juru bahasa dan kompiler harus memproses input untuk suatu operasi. Arahan Vue memperluas fungsionalitas elemen HTML dalam template Vue, memungkinkan manipulasi langsung dari DOM.
Anda dapat menggunakan arahan di Vue untuk menambahkan event listener, di antara operasi lainnya. Anda akan melampirkan atribut tambahan ke elemen HTML untuk menggunakan arahan di aplikasi Anda.
Struktur Arahan Vue
Direktif di Vue memiliki a v- awalan untuk membedakannya dari atribut HTML biasa. Itu v- awalan memberi tahu kompiler Vue bahwa atributnya adalah direktif Vue sehingga dapat memproses dan menerapkan perilaku direktif tersebut ke elemen HTML.
Berikut adalah contoh yang menunjukkan penggunaan dari v-show atribut untuk menampilkan isi dari suatu h2 elemen:
"BENAR">Halo Vue</h2>
Vue.js memiliki lebih banyak arahan bawaan seperti
v-bind, v-jika, Dan v-on, memungkinkan Anda untuk melakukan tugas seperti pengikatan data, rendering bersyarat, penanganan acara, dan banyak lagi.Mendefinisikan Custom Directive di Vue
Anda dapat menentukan arahan khusus untuk menambahkan fungsionalitas baru yang dapat digunakan kembali untuk aplikasi Vue.js Anda. Membuat arahan khusus memerlukan dua langkah utama. Pertama, Anda akan mendaftarkan direktif secara lokal atau global. Kemudian, Anda akan menentukan perilaku direktif dengan kait siklus hidup.
Mendaftarkan Custom Directive
Anda dapat mendaftarkan direktif khusus di Vue secara lokal atau global, tergantung pada ruang lingkup yang diinginkan. Namun, merupakan praktik yang lebih umum untuk mendaftarkan arahan secara global. Ini memastikan arahan tersedia di mana saja di dalam aplikasi Vue Anda.
Anda dapat mendaftarkan arahan khusus secara lokal jika Anda ingin menggunakan arahan khusus di dalam komponen Vue sederhana. Inilah cara Anda dapat mendaftar a v-changecolor direktif secara lokal:
