Data Binding Vue.js
Silakan mengunjung website ini untuk pemahaman materi mengenai data binding:
https://www.geeksforgeeks.org/javascript/what-is-the-difference-between-one-way-data-flow-and-two-way-data-binding-in-vue-js/
https://www.geeksforgeeks.org/javascript/v-bind-directive-in-vue-js/
Menurut teman-teman, apa yang membedakan antara fungsi one-way binding dan two-way binding?
Pada kondisi yang bagaimana menggunakan fungsi-fungsi tersebut?
Terdapat 3 modifier pada v-bind, yaitu .camel, .prop, .attr.
Untuk memahaminya lebih dalam, mari kita pelajari dulu beberapa konsep di bawah ini:
DOM attribute: yang terlihat di HTML (mis. checked, placeholder, viewBox). Mengubah attribute tidak selalu mengubah “state hidup” elemen setelah ia dirender. Sehingga DOM attribute hanya akan kondisi awal saat dirender. Tidak bisa diubah secara dinamis.
DOM property: properti JavaScript pada node DOM (mis. el.checked, el.value, el.textContent). Mengubah property mengubah perilaku/keadaan elemen secara langsung. Sehingga, DOM property dapat berubah secara langsung bahkan setelah dirender pada awalnya. Ketika user berinteraksi dengan elemen tersebut melalui sebuah event (misal melakukan klik tombol button) sehingga menyebabkan perubahan nilai secara langsung.
Component prop: data yang Anda deklarasikan di komponen anak agar bisa diterima dari induk (mis. props: { label: String }).
Fallthrough attributes / $attrs: atribut yang tidak dideklarasikan sebagai prop—secara default “turun” ke elemen root komponen (atau bisa Anda arahkan manual). Contoh: class, style, id
Vue melakukan hal ini saat v-bind dipakai di ELEMEN DOM:
Default: bila nama yang di-bind adalah property DOM yang valid, Vue mengikatnya sebagai property; jika tidak, sebagai attribute. Anda dapat memaksa perilaku ini dengan modifier:
.prop → paksa jadi property
.attr → paksa jadi attribute
.camel → mengubah nama atribut kebab-case → camelCase (khususnya berguna pada “in-DOM templates”, mis. HTML langsung tanpa build step).
Contoh kebab-case: user-settings-panel
Contoh camelCase: userSettingsPanel
Jadi fungsi ini mengkonversi nama attribut dengan menghapus seluruh hyphens (-), kemudian membuat huruf pertama setiap kata berikutnya setelah huruf pertama menjadi kapital, dan biarkan huruf lainnya tetap dalam huruf aslinya. Seperti contoh di atas.
Berikut adalah contoh source code sederhana yang dapat teman-teman coba untuk memahami .prop dan .attr:
<!DOCTYPE html>
<html>
<body>
<div id="app">
<h3>Perbandingan :value (property) vs :value.attr (attribute)</h3>
<p>Nama (model): {{ name }}</p>
<button @click="name = 'Ayu'">Ubah model ke “Ayu”</button>
<p>Input A (default → property):</p>
<input :value="name">
<!-- Default-nya Vue mendeteksi property 'value' ada, maka bind sebagai property -->
<p>Input B (paksa attribute):</p>
<input :value.attr="name">
<!-- Ini mengubah attribute 'value', tetapi setelah user mengetik sendiri,mengganti attribute tidak serta-merta mengubah nilai terlihat di kotak input. -->
<hr>
<h3>Checkbox: .prop vs .attr</h3>
<p>Status (model): {{ on }}</p>
<button @click="on = !on">Toggle</button>
<p>Checkbox A (property eksplisit):</p>
<input type="checkbox" :checked.prop="on">
<p>Checkbox B (attribute eksplisit):</p>
<input type="checkbox" :checked.attr="on">
<!-- 'checked' sebagai attribute hanya menentukan kondisi awal saat render -->
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({data(){ return { name: 'Beni', on: false } }}).mount('#app');
</script>
</body>
</html>
Silakan teman-teman mengeksplorasi mengenai beberapa topik yang menarik untuk dicoba:
1. .prop/.attr tidak bisa dipakai pada object binding (v-bind="{...}"). Modifier ini hanya berlaku pada binding dengan argumen spesifik, mis. :checked.prop="on", bukan v-bind.prop="obj"
https://stackoverflow.com/questions/77863191/vue-use-v-bind-with-object-for-multiple-props-how-to-use-prop-modifier?utm_source=chatgpt.com
2. Kalau targetnya “state hidup” elemen (mis. checked, value, textContent, muted, dsb.), biasakan sebagai property (default Vue juga begitu). Gunakan .prop bila ingin eksplisit atau saat bekerja dengan custom elements/web components.
3. Kalau targetnya metadata/markup yang tidak mengubah state saat runtime (mis. aria-*, data-*, id), biarkan sebagai attribute (default). Gunakan .attr bila ingin memaksa attribute walau ada property bernama sama.
4. Gunakan .camel pada in-DOM template (HTML langsung) ketika Anda perlu mengikat atribut yang secara DOM ber-camelCase (mis. viewBox). Pada SFC/templating yang dikompilasi, .camel umumnya tidak perlu. Di template HTML, tulis kebab-case (my-prop), di JavaScript/defineProps menggunakan camelCase (myProp). Compiler mengonversi sesuai aturan.
Referensi:
https://vuejs.org/api/built-in-directives.html
https://medium.com/swlh/vue-best-practices-directives-a57e50e756e8
https://vuejs.org/guide/components/props
https://vuejs.org/guide/components/attrs
Tidak ada komentar
Posting Komentar