DEV Community

loading...
Cover image for Basic Component pada Vue JS

Basic Component pada Vue JS

dimasngoding profile image Dimas Andhika Updated on ・1 min read

Perkenalan

Vue adalah progresif framework javascript yang memungkinkan kalian menulis kode dengan efisien dan cepat dibandingkan tanpa Framework sama sekali, oleh karena itu di Vue JS menerapkan sistem Component. Note: This article is intended for Indonesians

Di vue js terdapat banyak component seperti: Component Basic, Component Props, Component Emit, Component Slot, Component Provide, Component Inject. Artikel ini akan membahas Component Basic pada Vue JS Note: Pastikan kalian paham tentang Vue dan Javascript Dasar

Component Basic

🚀 Konfigurasi pada Vue CLI

  1. Pertama kita buat file (Nama.vue) biasanya di simpan pada direktori src/components/
// src/components/Nama.vue
<template>
  <h3>
    Ini Dipanggil Dari Component Nama.vue
  </h3>
</template>
Enter fullscreen mode Exit fullscreen mode

Kalian bebas menentukan nama filenya. Lalu didalam filenya kalian tuliskan elemen html seperti biasa, seperti pada contoh diatas.


2.Tentukan dimana kalian akan merender Component tersebut contoh saya ingin render di src/App.vue

<template>
  <div class="container">
    <Nama />
  </div>
</template>

<script>
/* eslint-disable */
import Nama from "path/ke/FileVueKalian"
export default {
  components: {
    Nama,
    'nama-component': Nama, // Jika ingin kebab-case
  },
};
</script>
Enter fullscreen mode Exit fullscreen mode

Otomatis elemen h3 dengan tulisan Ini Dipanggil Dari Component Nama.vue akan langsung di render pada File App.vue. Hanya dengan begitu saja kalian sudah bisa membuat Component Dasar pada Vue JS

Discussion (0)

pic
Editor guide