more on von and vbind di vue

By Auliya 11 views 2 years ago
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.
Latest Videos About Us FAQ Terms of Service Copyright Cookie Privacy Contact
© 2025 Febspot. All Rights Reserved.