Sebelum membahas Fitur menarik dari Vue Js yaitu directive v-bind, kita melakukan review singkat tentang penggunaan atribut-atribut yang terdapat pada element atau tag HTML.

Atrubut HTML memiliki beberapa fungsi, diantaranya adalah untuk menunjang kinerja elementnya, memberikan info tambahan, sertia memberikan efek atau sifat pada tag HTML, contoh atribut yang ada misalnya src, class, id. style, dan sebagainya. Atribut selalu membawa nilai, nilai tersebut dituliskan setelah tanda sama dengan dan berada di antara tanda petik tunggal maupun petik ganda.

Berikut ini adalah beberapa contoh atribut HTML:

  • Atribut src yang mengdefinisikan pada tag <img> dengan nilai atribut: image.jpg. Contoh: <img src=”image.jpg”>
  • Atribut href yang didefinisikan pada tag <a> dengan nilai atrubut: home.html. Contoh <a href=”home.html”>Home</a>
  • Atribut width dan height yang didefinisikan pada berbagai tag. Contoh: <div height=”100px” width=”200px”></div>
  • Atribut style yang dapat didefinisikan pada berbagai tag. Contoh: <p style=”color:red”>DUMET School</p>

 

Nah, di dalam Vue. Js menyediakan fasilitas yang lebih menarik daripada itu. fasilitas yang berkaitan dengan atribut HTML yang disebut oleh Vue.Js dengan v-bind.

Fitur Menarik dari Vue Js v-bind, bekerja dengan melakukan binding (mengikat) data nilai, sehingga kelak data tersebut dapat dipanggil atau digunakan secara dinamis, singkatnya fitur menarik dari Vue Js v-bind ini memiliki fungsi mendinamiskan atribut HTML, nanti akan kita uraikan di tutorial berikutnya. Sabar ya teman-teman

Format penulisan fitur menarik dari Vue Js v-bind ini mirip dengan penulisan atribut HTML, hanya perlu di tambahkan satu karakter saja yaitu : (titik dua), didepan atribut HTML tersebut, misalnya jika dalam contoh diatas, terdapat atribut tersebut berupa style, dalam Vue Js dapat dituliskan dengan :style. Untuk src pada tag HTML img dapat digantikan juga dengan :src, begitu juga dengan atribut-atribut pada tag HTML yang lainnya yang tentunya didukung oleh Vue Js.

Untuk kalian yang menginginkan penulisan lengkap dari Fitur menarik dari Vue Js v-bind, penulisan karakter : (titik dua) dapat juga dituliskan dengan v-bind:style, sehingga untuk menuliskan :style dapat juga dituliskan v-bind:style. Jadi mana yang menurut kalian lebih nyaman digunakan? Pilihannya ada ditangan teman-teman sendiri.