Auliya
146 subscribers 11 views 11 months ago

more on von and vbind di vue by Auliya

Dalam Vue.js, v-on dan v-bind adalah dua direktif penting yang digunakan untuk menghubungkan event dan mengikat atribut dalam elemen HTML dengan logika Vue instance atau komponen. v-on (atau disingkat menjadi @): Direktif v-on digunakan untuk mendengarkan event dari elemen HTML dan menjalankan logika terkait ketika event terjadi. Anda dapat menghubungkan event dengan metode kustom dalam Vue instance atau komponen. Contoh penggunaan v-on: html Copy code <button v-on:="doSomething">Klik saya</button> Dalam contoh di atas, v-on: (atau singkatannya @) mengikat event pada elemen <button> dengan metode doSomething dalam Vue instance atau komponen. v-bind (atau disingkat menjadi :): Direktif v-bind digunakan untuk mengikat (bind) atribut HTML dengan data dalam Vue instance atau komponen. Ini memungkinkan Anda untuk dinamis memperbarui atribut berdasarkan data yang berubah. Contoh penggunaan v-bind: html Copy code <img v-bind:src="imageURL"> Dalam contoh di atas, v-bind:src (atau singkatannya :src) mengikat atribut src pada elemen <img> dengan nilai properti imageURL dalam Vue instance atau komponen. Anda juga dapat mengikat atribut dengan ekspresi JavaScript atau menggunakan objek dalam v-bind untuk mengikat beberapa atribut sekaligus. html Copy code <a v-bind:href="url" v-bind:title="tooltip">{{ linkText }}</a> Dalam contoh di atas, v-bind:href mengikat atribut href, v-bind:title mengikat atribut title, dan linkText diinterpolasi langsung dalam elemen <a>. Penting untuk diingat bahwa jika Anda menggunakan sintaksis pendek @ dan :, pastikan kode Vue Anda mendukung atau mengkonfigurasi penggunaan sintaksis pendek tersebut. Misalnya, Anda dapat menggunakan Vue.config.silent = true atau menggunakan Vue CLI dengan konfigurasi yang sesuai. Dengan v-on dan v-bind, Anda dapat menghubungkan event dan mengikat atribut dengan logika Vue instance atau komponen, membuat aplikasi Vue.js Anda lebih interaktif dan dinamis.