Back

Vue.js untuk Pemula: Bagian 1

Vue.js untuk Pemula: Bagian 1

Vue (diucapkan /vjuː/, seperti view) adalah framework JavaScript untuk membangun antarmuka pengguna. Itu dibangun di atas HTML standar, CSS, dan JavaScript dan menyediakan model pemrograman deklaratif dan berbasis komponen yang membantu Anda mengembangkan antarmuka pengguna secara efisien, baik sederhana maupun kompleks.

Ini contoh minimalnya:

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')
<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

Hasilnya:

Contoh di atas menunjukkan dua fitur inti Vue:

  • Rendering Deklaratif: Vue memperluas HTML standar dengan sintaks template yang memungkinkan kita untuk mendeskripsikan output HTML secara deklaratif berdasarkan status JavaScript.
  • Reaktivitas: Vue secara otomatis melacak perubahan status JavaScript dan memperbarui DOM secara efisien saat perubahan terjadi. Anda mungkin sudah memiliki pertanyaan - jangan khawatir. Kami akan membahas setiap detail kecil di sisa dokumentasi.

The Progressive Framework

Vue adalah framework dan ekosistem yang mencakup sebagian besar fitur umum yang dibutuhkan dalam pengembangan frontend. Namun web sangat beragam - hal yang kami buat di web dapat sangat bervariasi dalam bentuk dan skala. Dengan pemikiran tersebut, Vue dirancang agar fleksibel dan dapat diadopsi secara bertahap. Bergantung pada kasus penggunaan Anda, Vue dapat digunakan dengan berbagai cara:

  • Meningkatkan HTML statis tanpa build step
  • Menyematkan sebagai Komponen Web di halaman mana pun
  • Single Page Application (SPA) Fullstack / Server-side Rendering (SSR)
  • Jamstack / Static Site Generation (SSG)
  • Menargetkan desktop, seluler, WebGL, dan bahkan terminal

Single-File Components

Di sebagian besar proyek Vue yang mendukung build tool, kita membuat komponen Vue menggunakan format file mirip HTML yang disebut Single-File Component (juga dikenal sebagai file *.vue, disingkat SFC). Vue SFC, seperti namanya, merangkum logic component (JavaScript), template (HTML), dan styles (CSS) dalam satu file. Berikut contoh sebelumnya, ditulis dalam format SFC:

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

SFC adalah fitur penentu Vue dan merupakan cara yang direkomendasikan untuk membuat komponen Vue jika kasus penggunaan Anda membutuhkan pengaturan build.

API Styles

Vue components dapat ditulis dalam dua gaya API yang berbeda: Options API dan Composition API.

Options API

Dengan Options API, kita mendefinisikan logika komponen menggunakan objek pilihan seperti data, methods, dan mounted. Properti yang ditentukan oleh opsi diekspos pada fungsi di dalam ini, yang menunjuk ke instance komponen:

<script>
export default {
  // Properties returned from data() become reactive state
  // and will be exposed on `this`.
  data() {
    return {
      count: 0
    }
  },

  // Methods are functions that mutate state and trigger updates.
  // They can be bound as event handlers in templates.
  methods: {
    increment() {
      this.count++
    }
  },

  // Lifecycle hooks are called at different stages
  // of a component's lifecycle.
  // This function will be called when the component is mounted.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

Composition API

Dengan API Komposisi, kita mendefinisikan logika komponen menggunakan fungsi API yang diimpor. Di SFC, Composition API biasanya digunakan dengan <script setup>. Atribut setup adalah petunjuk yang membuat Vue melakukan transformasi waktu kompilasi yang memungkinkan kita menggunakan Composition API dengan boilerplate yang lebih sedikit. Misalnya, impor dan variabel/fungsi tingkat atas yang dideklarasikan di <script setup> dapat langsung digunakan di template.

Ini adalah komponen yang sama, dengan template yang sama persis, tetapi menggunakan Composition API dan <script setup> sebagai gantinya:

<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

Mana yang harus dipilih?

Kedua gaya API sepenuhnya mampu mencakup kasus penggunaan umum. Mereka adalah antarmuka berbeda yang ditenagai oleh sistem dasar yang sama persis. Faktanya, Options API diimplementasikan di atas Composition API! Konsep dasar dan pengetahuan tentang Vue dibagikan di kedua gaya.

Options API dipusatkan pada konsep "instance komponen" (ini seperti yang terlihat pada contoh), yang biasanya lebih selaras dengan model mental berbasis kelas untuk pengguna yang berasal dari latar belakang bahasa OOP. Ini juga lebih ramah pemula dengan mengabstraksi detail reaktivitas dan menerapkan organisasi kode melalui grup opsi.

Composition API berpusat pada mendeklarasikan variabel status reaktif secara langsung dalam lingkup fungsi dan menyusun status dari beberapa fungsi secara bersamaan untuk menangani kompleksitas. Bentuknya lebih bebas dan membutuhkan pemahaman tentang cara kerja reaktivitas di Vue agar dapat digunakan secara efektif. Sebagai imbalannya, fleksibilitasnya memungkinkan pola yang lebih kuat untuk mengatur dan menggunakan kembali logika.

Jika Anda baru mengenal Vue, inilah rekomendasi umum:

  • Untuk tujuan pembelajaran, gunakan gaya yang terlihat lebih mudah dipahami oleh Anda. Sekali lagi, sebagian besar konsep inti dibagi antara dua gaya. Anda selalu dapat mengambil gaya lain nanti.
  • Untuk penggunaan produksi:
    • Gunakan Options API jika Anda tidak menggunakan build tool, atau berencana untuk menggunakan Vue terutama dalam skenario dengan kompleksitas rendah, mis. peningkatan progresif.
    • Gunakan Composition API + Single-File Components jika Anda berencana membangun aplikasi lengkap dengan Vue.

Catatan: Kita tidak harus berkomitmen hanya pada satu gaya selama fase pembelajaran.

Back to top