Basic Component pada Vue JS

This content originally appeared on DEV Community and was authored by Dimas Andhika

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

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

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>

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>

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

This content originally appeared on DEV Community and was authored by Dimas Andhika

Print Share Comment Cite Upload Translate Updates

APA

Dimas Andhika | Sciencx (2021-04-12T08:04:23+00:00) Basic Component pada Vue JS. Retrieved from https://www.scien.cx/2021/04/12/basic-component-pada-vue-js/

MLA

" » Basic Component pada Vue JS." Dimas Andhika | Sciencx - Monday April 12, 2021, https://www.scien.cx/2021/04/12/basic-component-pada-vue-js/

HARVARD

Dimas Andhika | Sciencx Monday April 12, 2021 » Basic Component pada Vue JS., viewed ,<https://www.scien.cx/2021/04/12/basic-component-pada-vue-js/>

VANCOUVER

Dimas Andhika | Sciencx - » Basic Component pada Vue JS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/12/basic-component-pada-vue-js/

CHICAGO

" » Basic Component pada Vue JS." Dimas Andhika | Sciencx - Accessed . https://www.scien.cx/2021/04/12/basic-component-pada-vue-js/

IEEE

" » Basic Component pada Vue JS." Dimas Andhika | Sciencx [Online]. Available: https://www.scien.cx/2021/04/12/basic-component-pada-vue-js/. [Accessed: ]

rf:citation

» Basic Component pada Vue JS | Dimas Andhika | Sciencx | https://www.scien.cx/2021/04/12/basic-component-pada-vue-js/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Perkenalan

Component Basic

? Konfigurasi pada Vue CLI

Related Posts