Tutorial Vue JS & Restful API Lumen #3 : Membuat Components di Vue JS


Fika Ridaul Maulayya
Software Engineer | Content Creator | Founder & Author di SantriKoding.com

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


Fika Ridaul Maulayya
Software Engineer | Content Creator | Founder & Author di SantriKoding.com

Jika Anda menyukai konten kami, silakan pertimbangkan untuk membeli kopi untuk kami.
Terima kasih atas dukungan Anda!

Buy me a coffeeBuy me a coffee
KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR