Tutorial Vue JS & Restful API Lumen #4 : Membuat Components di Vue JS - Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar membuat components di Vue JS.
Langkah 1 - Membuat Components
Silahkan teman-teman buka project Vue JS yang sudah kita buat sebelumnya menggunakan Text Editor, sekarang silahkan teman-teman buat sebuah folder baru dengan nama posts di dalam folder src/components. Dan di dalam folder posts tadi, silahkan teman-teman buat 3 file diantaranya :
- Index.vue
- Create.vue
- Edit.vue
Jadi jika teman-teman lihat, kurang lebih struktur foldernya seperti berikut ini :
node_modules/
public/
src/
├── assets/
├── components/
├── posts/
├── Index.vue
├── Create.vue
├── Edit.vue
├── App.vue
├── main.js
.gitignore
babel.config.js
package-lock.json
package.json
README.md
Langkah 2 - Edit Component Index Posts
Disini kita akan memberikan template sederhana terlebih dahulu di dalam component-component di atas, sekarang silahkan teman-teman buka file Index.vue dan masukkan kode berikut ini :
<template>
<div class="posts">
ini adalah component Index Posts
</div>
</template>
<script>
export default {
}
</script>
Langkah 3 - Edit Component Tambah Posts
Selanjutnya, silahkan teman-teman bukae file Create.vue dan masukkan kode berikut ini :
<template>
<div class="tambah-posts">
ini adalah component Tambah Posts
</div>
</template>
<script>
export default {
}
</script>
Langkah 4 - Edit Component Edit Posts
Kemudian, silahkan teman-teman buka juga file Edit.vue dan masukkan kodenya seperti berikut ini :
<template>
<div class=“edit-posts">
ini adalah component Edit Posts
</div>
</template>
<script>
export default {
}
</script>
Sampai disini pembahasan tentang cara membuat component di Vue JS, si artikel selanjutnya kita akan belajar bagaimana cara menginstall Vue Router dan Axios dan kita juga akan belajar bagaimana cara menggunakannya.
Terima Kasih