Membuat Instance Object dan Property Pada Vue js

19/03/2017    Ekky Ridyanto    909     Website

Langsung saja kita belajar tentang Vuejsnya. Yang pertama kita akan belajar bagaimana cara kita Membuat Instance Object dan Property pada Vue JS. Untuk itu kita akan buat struktur sederhana dari HTMLnya dan kita akan sambungkan link scriptnya kedalam dokument HTMLnya dengan menentukan alamat file vue js berada dan sekarang kita akan buat tag script untuk bermain dengan Vuejsnya untuk itu dibagian tag scriptnya kita akan panggil object instance dari Vue jsnya. Bentuk penulisannya kita tulis new lalu di ikuti kata Vue sebagai berikut

Membuat-Instance-Object-dan-Property-Pada-Vue-js-19-03-2017-1

Nah dengan ini kita sudah sudah berhasil menginisiasi objectnya dari Vuejsnya. Kita pastikan bila kita jalankan tidak ada error dibagian consolenya. Lalu didalam object Vue jsnya sendiri kita bisa lakukan apa saja didalamnya tentu akan ada pasangan key dan valuenya. Untuk lebih jelasnya kita berikan contoh sederhananya misalnya kita ingin menambahkan key untuk elemen dari document HTMLnya. Jadi kita bisa menentukan elemen mana yang ingin dijadikan sistem component pada Object vuejsnya. Kita bisa pasang id elemennya sebagai berikut

Membuat-Instance-Object-dan-Property-Pada-Vue-js-19-03-2017-2

lalu kita buat tag div sebagai elemennya dengan menentukan id-nya 

Membuat-Instance-Object-dan-Property-Pada-Vue-js-19-03-2017-3

kemudian akan ada data data yang dapat kita simpan sebagai property atau sebagai data yang dapat kita tampilkan kedalam id elemennya. Datanya bisa dalam bentuk string number array atau pun object. Tentu itu tergantung dari kebutuhannya.

Membuat-Instance-Object-dan-Property-Pada-Vue-js-19-03-2017-4

Note: el dan data ini sebagai kata kunci dari Object Vuenya yang sudah ditentukan dari Vuejsnya dan sekarang bila kita ingin menampilkannya kita menulis sintaks dua buka tutup kurung kurawalnya dan kita tulis property namenya

Membuat-Instance-Object-dan-Property-Pada-Vue-js-19-03-2017-5

maka kita akan dapat hasil text dari object datanya. 

Membuat-Instance-Object-dan-Property-Pada-Vue-js-19-03-2017-6

Tentu propertynya bisa saja lebih dari satu kita pisahkan dengan koma untuk setiap property Objectnya misalnya seperti ini

Membuat-Instance-Object-dan-Property-Pada-Vue-js-19-03-2017-7

Kita akses property tersebut yang mana masing masing nilainya punya pembungkus kurung kurawalnya sendiri.

Membuat-Instance-Object-dan-Property-Pada-Vue-js-19-03-2017-8

Nah itu dia contoh penggunaan dasarnya sekali lagi kita bisa menentukan elemennya sebagai sistem component pada Object Vuejsnya dan ada data yang dapat kita simpan sebagai variabel atau property dari Objectnya. Semoga jelas untuk bagian ini. Terima kasih.

Artikel, Web Design, Javascript, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More