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