Penggunaan Sistem Component Pada Vue Js

Pada bagian sebelumnya kita sudah berhasil membuat tag html custom dengan sistem component dari Vue jsnya. Jadi bila tiap teman teman butuh template tersebut artinya masih didalam Object Vuenya teman teman bisa gunakan template tersebut berkali kali. Tentu itu cara dasarnya pembuatannya. Nah teman teman pun bisa menyederhanakan dengan menggunakan satu metode saja yaitu mendefinisikan isi templatenya dan juga register nama templatenya didalam Vue component artinya dibagian artikel ini saya akan menjelaskan cara kedua dalam pembuatan sistem component pada Vue js. Tentu caranya cukup simple kita define dan register didalam Vue component templatenya seperti berikut

Penggunaan-Sistem-Component-Pada-Vue-Js-1

Kalo kita reload halamannya kita akan dapat hasilnya tanpa ada error sama sekali.

Penggunaan-Sistem-Component-Pada-Vue-Js-2

Jadi itu dia penulisan singkat dalam menuliskan component Vue jsnya. Sekali lagi parameter yang pertama adalah nama tag yang ingin kita berikan dibagian layoutnya 

Penggunaan-Sistem-Component-Pada-Vue-Js-3

Lalu parameter kedua adalah isi template yang mau kita buat. Tentu dibagian template ini kita pun bisa punya beberapa tag htmlnya seperti tag <img> tag anchor atau pun tag tag html lainnya. Nah untuk itu kita pun bisa membuat tag <template> sebagai component templatenya

Penggunaan-Sistem-Component-Pada-Vue-Js-4

Yang dimana tugasnya untuk membuat tampilan viewnya. Jadi tag <template> ini adalah tag dari HTML 5 nya dan tag tersebut tidak akan dirender. Tentu setelah itu yang kita bisa lakukan pertama kali adalah menuliskan nama id sebagai nama id templatenya.

Penggunaan-Sistem-Component-Pada-Vue-Js-5

Lalu dibagian tag <template> kita berikan attribute id yang id-nya harus sama dengan id yang kita definisikan dibagian Vue component templatenya. 

Penggunaan-Sistem-Component-Pada-Vue-Js-6

Jadi dengan kata lain isi template componentnya bukan lagi kita definisikan di Vue component karena bisa jadi HTML yang kita buat itu banyak maka dari itu tag <template> ini lah yang bertugas menyimpan sistem component templatenya yang sudah kita berikan id

Penggunaan-Sistem-Component-Pada-Vue-Js-7

Maka kalo kita lihat dibagian browsernya kita dapat hasil yang di inginkan yaitu hasil component templatenya. Jadi caranya sangat sederhana.

25 April 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat