Halo Coders, setelah kemarin kita belajar tentang Struktur Folder, kali ini kita akan mendalami Template File pada Vue Js. Nah Vue Js ini Mempunyai konsep yang sedikit berbeda dengan Website pada umunya. Vue Js Mempunyai syntax sendiri dengan Perluasan .vue. Selain itu Terdapat juga beberapa File pada Vue Js yang menggunakan Perluasan Javascript dan 1 File yang menggunakan Perluasan html Yakni index.html
Detail Template File pada Vue Js
Seperti yang sudah Mimin jelaskan di atas, Vue Js sebenarnya Mempunyai Perluasan sendiri Kepada Template File pada Vue Js. Kepada File yang Primer Kepada tampilan website pada Vue Js biasanya menggunakan Perluasan .vue. Perluasan ini digunakan pada setiap File yang kedepannya akan ditampilkan dalam website kita, entah pages, components, ataupun layouts, semuanya menggunakan Perluasan .vue.
Perluasan .vue ini merupakan Perluasan Spesifik pada Vue Js. didalam File dengan Perluasan .vue ini kita Dapat mengisi beberapa syntax Kepada views (tampilan), script (javascript), dan juga style (css styling). Beberapa syntax ini dipisahkan dengan tag yang berbeda Yakni , , dan
Isi Template File pada Vue Js
File dengan Perluasan .vue Mempunyai bentuk tersendiri seperti gambar dibawah ini
Seperti yang terlihat digambar. Terdapat 3 tag berbeda. Setiap Tag Mempunyai tugas tersendiri yang saling melengkapi. berikut akan Mimin jelaskan detailnya yaa
Tag
Tag ini merupakan tag yang akan menyimpan Sekalian struktur HTML di dalam Template File pada Vue Js di dalam File dengan Perluasan .vue.
Isi dari Tag ini biasanya terdiri dari HTML Standar, akan tetapi Dapat kita modifikasi/gabungkan dengan data dari tag Kepada Membikin Website yang kita bangun Dapat menampilkan data sesuai yang kita inginkan.
Tag
Tag ini seperti Tag di HTML pada umumnya, Bermanfaat Kepada menyimpan Syntax JavaScript kedalam File. Syntax JavaScript yang digunakan tentunya Tak hanya syntax Standar, akan tetapi Dapat menggunakan beberapa syntas Spesifik Vue js contohnya seperti Components Lifecycle pada Vue Js.
Selain itu Tag ini juga Dapat menyimpan data yang kita ambil dari API atau data yang kita defisinikan sendiri Kepada kita tampilkan didalam tag
Tag
Tag di Template File pada Vue Js Mempunyai kegunaan yang sama dengan tag pada HTML pada umumnya, Yakni Kepada menyimpan css didalam sebuah File. Akan tetapi tag pada Vue Js ini Mempunyai beberapa fitur yang sangat Bermanfaat seperti mengganti bahasa css yang digunakan (css, scss, sass), dan menggunakan fitur scoped yang Membikin style yang ditulis hanya akan berefek pada file itu saja.
Hasil
Nah disini kita sudah kenalan sedikit ya dengan Template File pada Vue Js yang Mempunyai Perluasan .vue. Pada Tutorial kedepan kita akan mulai Praktek Kepada memaksimalkan File dengan Perluasan .vue ini.
Apabila kalian mmau Menonton tutorial yang lain, lihat dibawah ini yaaa