# Perkenalan

CATATAN

Telah mengetahui Vue 2 dan hanya ingin mempelajari apa yang baru di Vue 3? Cek di Panduan Migrasi!

# Apa itu Vue.js?

Vue (cara pengucapannya /vju:/, seperti view) adalah kerangka kerja nan progresif untuk membangun antarmuka pengguna. Tidak seperti beberapa kerangka kerja lain, Vue dirancang dari dasar agar dapat diadopsi secara bertahap. Pustaka intinya difokuskan pada bagian tampilan saja, dan sangat mudah untuk diintegrasikan dengan pustaka yang lain atau dengan proyek yang sudah ada. Di sisi lain, Vue sangat mampu memberikan dan mendukung Single-Page Application yang canggih ketika dikombinasikan dengan perkakas modern dan dukungan pustaka (opens new window).

Jika anda ingin mempelajari lebih lanjut tentang Vue, kami membuat sebuah video tentang prinsip - prinsip inti dan contoh proyek.

Tontoh kursus video gratis di Vue Mastery

# Memulai

Instalasi

TIP

Panduan resmi ini mengasumsikan bahwa pengetahuan HTML, CSS dan JavaScript Anda berada di tingkat menengah. Jika Anda benar-benar baru di pengembangan aplikasi frontend, mungkin bukan keputusan yang tepat untuk langsung mencoba kerangka kerja sebagai langka pertama Anda - pelajari terlebih dahulu dasar-dasarnya, kemudian kembali lagi ke sini! Pengalaman menggunakan kerangka kerja lain membantu, tetapi bukan sebuah keharusan.

Cara yang paling mudah untuk mencoba Vue.js adalah menggunakan contoh Hello World (opens new window). Jangan ragu untuk membukanya di tab lain dan ikuti bagaimana kita memberikan beberapa contoh dasar.

Halaman Instalasi tersedia lebih banyak pilihan untuk memasang Vue. Catatan: Kami tidak merekomendasikan pemula memulai dengan vue-cli, terlebih lagi jika Anda masih belum terbiasa dengan build tools yang berbasis Node.js.

# Proses Rendering secara Deklaratif

Inti dari Vue.js adalah sistem yang mampu membantu kita untuk me render data ke dalam DOM secara deklaratif menggunakan sintaks template yang mudah:

<div id="counter">
  Counter: {{ counter }}
</div>
1
2
3
const Counter = {
  data() {
    return {
      counter: 0
    }
  }
}

Vue.createApp(Counter).mount('#counter')
1
2
3
4
5
6
7
8
9

Kita telah membuat aplikasi Vue pertama kita! Jika kita perhatikan proses rendering nya masih sama seperti string template yang biasa, tetapi Vue di sini sudah membantu banyak pekerjaan kita secara ajaib. Data yang ditampilkan sudah terhubung dengan DOM, dan semuanya bersifat reaktif. Bagaimana kita mengetahuinya? Perhatikan contoh di bawah ini, properti counter nilainya bertambah setiap detik dan Anda akan melihat perubahan DOM nya di render:








 
 
 



const Counter = {
  data() {
    return {
      counter: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.counter++
    }, 1000)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

Counter: 0

Selain interpolasi teks, kita juga dapat bind atribut pada elemen seperti berikut:

<div id="bind-attribute">
  <span v-bind:title="message">
    Arahkan kursor Anda di atas kalimat ini selama beberapa waktu untuk melihat
    atribut title yang terhubung secara dinamis!
  </span>
</div>
1
2
3
4
5
6
const AttributeBinding = {
  data() {
    return {
      pesan: 'Anda memuat halaman ini pada ' + new Date().toLocaleString()
    }
  }
}

Vue.createApp(AttributeBinding).mount('#bind-attribute')
1
2
3
4
5
6
7
8
9

See the Pen Binding Atribut secara Dinamis by Vue (@Vue) on CodePen.

Sekarang kita telah mempelajari hal baru. Atribut v-bind yang telah Anda lihat dinamakan directive. Directive diawali dengan v- untuk menginformasikan bahwa dia adalah atribut spesial yang dibawa oleh Vue, dan seperti yang bisa Anda tebak, dia menerapkan perilaku yang reaktif di DOM yang sudah di-render. Ibarat kata, "Jaga atribut title ini agar tetap mutakhir dengan properti pesan pada instance yang aktif sekarang".

# Menangani Inputan Pengguna

Untuk memungkinkan pengguna berinteraksi dengan aplikasi Anda, kita dapat menggunakan directive v-on untuk melampirkan event listener yang menjalankan suatu fungsi/metode pada instance Vue kita:

<div id="event-handling">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Balikkan Pesan</button>
</div>
1
2
3
4
const EventHandling = {
  data() {
    return {
      message: 'Halo Vue.js Indonesia!'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message
        .split('')
        .reverse()
        .join('')
    }
  }
}

Vue.createApp(EventHandling).mount('#event-handling')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

See the Pen Penanganan Event by Vue (@Vue) on CodePen.

Perlu diingat bahwa metode ini memperbarui state aplikasi kita tanpa menyentuh DOM sama sekali - semua proses manipulasi DOM ditangani oleh Vue, dan kode yang Anda tulis hanya berfokus pada logika saja.

Vue juga menyediakan directive v-model yang mampu melakukan binding secara dua arah antara pengisian dengan state pada aplikasi:

<div id="two-way-binding">
  <p>{{ message }}</p>
  <input v-model="message" />
</div>
1
2
3
4
const TwoWayBinding = {
  data() {
    return {
      message: 'Halo Vue.js Indonesia!'
    }
  }
}

Vue.createApp(TwoWayBinding).mount('#two-way-binding')
1
2
3
4
5
6
7
8
9

See the Pen Binding Dua Arah by Vue (@Vue) on CodePen.

# Kondisi dan Perulangan

Sangat mudah untuk menerapkan pengondisian pada suatu elemen:

<div id="conditional-rendering">
  <span v-if="seen">Sekarang Anda melihatku</span>
</div>
1
2
3
const ConditionalRendering = {
  data() {
    return {
      seen: true
    }
  }
}

Vue.createApp(ConditionalRendering).mount('#conditional-rendering')
1
2
3
4
5
6
7
8
9

Contoh tersebut mendemonstrasikan bahwa tidak hanya teks dan atribut yang dapat kita binding, tetapi juga struktur dari DOM. Bahkan, Vue juga mampu menyediakan sistem efek transisi yang lengkap ketika elemen ditambahkan/diperbarui/dihapus oleh Vue.

Anda dapat mengubah seen dari true menjadi false pada bak pasir berikut untuk melihat pengaruhnya:

See the Pen Pengondisian Rendering by Vue (@Vue) on CodePen.

Ada beberapa directive yang lain, setiap directive tersebut memiliki fungsinya sendiri. Sebagai contoh, directive v-for dapat digunakan untuk menampilkan daftar item yang didapatkan dari data array:

<div id="list-rendering">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
1
2
3
4
5
6
7
const ListRendering = {
  data() {
    return {
      todos: [
        { text: 'Belajar JavaScript' },
        { text: 'Belajar Vue' },
        { text: 'Membangun hal keren' }
      ]
    }
  }
}

Vue.createApp(ListRendering).mount('#list-rendering')
1
2
3
4
5
6
7
8
9
10
11
12
13

See the Pen List rendering by Vue (@Vue) on CodePen.

# Penyusunan dengan Komponen

Sistem komponen merupakan konsep penting lainnya pada Vue, karena abstraksinya memungkinkan kita untuk membangun aplikasi skala besar yang terdiri dari komponen kecil, mandiri dan dapat digunakan kembali. Jika kita pikirkan lebih lanjut, hampir semua jenis antarmuka aplikasi dapat diabstraksikan menjadi diagram pohon komponen seperti berikut:

Diagram Pohon Komponen

Di Vue, pada dasarnya, komponen adalah instance Vue yang memiliki opsi yang telah dideklarasikan sebelumnya. Mendaftarkan komponen pada Vue sangatlah mudah: kita membuat objek komponen seperti yang kita lakukan pada objek App dan kita mendeklarasikannya pada opsi components induknya:

// Membuat aplikasi Vue
const app = Vue.createApp(...)

// Mendefinisikan komponen baru bernama todo-item
app.component('todo-item', {
  template: `<li>Ini adalah todo</li>`
})

// Mount aplikasi Vue
app.mount(...)
1
2
3
4
5
6
7
8
9
10

Sekarang Anda dapat menggunakannya pada templat komponen lain:

<ol>
  <!-- Membuat instance dari komponen item-pekerjaan -->
  <item-pekerjaan></item-pekerjaan>
</ol>
1
2
3
4

Tetapi contoh tersebut akan me-render teks yang sama setiap item pekerjaan, yang tidak cukup menarik. Kita seharusnya dapat melewatkan data dari komponen parent ke komponen child. Mari kita modifikasi definisi komponen tersebut agar dapat menerima prop:

app.component('todo-item', {
  props: ['todo'],
  template: `<li>{{ todo.text }}</li>`
})
1
2
3
4

Sekarang kita dapat menyematkan data pekerjaan pada masing-masing komponen menggunakan v-bind:

<div id="todo-list-app">
  <ol>
    <!--
      Sekarang kita menyediakan setiap item-pekerjaan dengan objek
      pekerjaan yang diwakilinya, sehingga kontennya juga dapat dinamis.
      Kita juga perlu menyematkan "key" untuk setiap komponen,
      yang akan dijelaskan lebih lanjut nantinya.
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const TodoList = {
  data() {
    return {
      groceryList: [
        { id: 0, text: 'Sayur-sayuran' },
        { id: 1, text: 'Keju' },
        { id: 2, text: 'Makanan lain' }
      ]
    }
  }
}

const app = Vue.createApp(TodoList)

app.component('todo-item', {
  props: ['todo'],
  template: `<li>{{ todo.text }}</li>`
})

app.mount('#todo-list-app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

See the Pen Pengenalan Komponen 1 by Vue (@Vue) on CodePen.

Aplikasi tersebut hanyalah sebuah contoh, tetapi kita dapat memisahkan aplikasi kita menjadi dua unit yang lebih kecil, dan komponen child dipisahkan dari komponen parent melalui penghubung props. Sekarang kita dapat memperbaiki komponen <item-pekerjaan> kita dengan templat dan logika yang kompleks tanpa mempengaruhi komponen parent.

Dalam aplikasi berskala besar, sangat penting untuk membagi seluruh aplikasi menjadi komponen untuk membuat proses pengembangan lebih mudah. Kita akan banyak membahas mengenai komponen nanti di panduan berikut, tetapi berikut adalah contoh (tak nyata) kode templat aplikasi yang menggunakan komponen:

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>
1
2
3
4
5
6
7

# Hubungan dengan Elemen Kustom

You may have noticed that Vue components look similar to Custom Elements, which are part of the Web Components Spec (opens new window). Indeed, parts of Vue's component design (for example the slot API) were influenced by the spec before it was natively implemented in browsers.

The main difference is that Vue's component model is designed as a part of a coherent framework that provides many additional features necessary for building non-trivial applications, for example reactive templating and state management - both of which the spec does not cover.

Vue also provides great support for both consuming and creating custom elements. For more details, check out the Vue and Web Components section.

# Siap untuk Belajar Lebih Lanjut?

Kita telah memperkenalkan secara singkat fitur-fitur dasar yang ada di Vue.js - panduan ini akan mencakup sisanya dan fitur-fitur tingkat lanjut lebih dalam, jadi pastikan untuk membaca semuanya!

Deployed on Netlify.
Pembaruan terakhir: 2021-08-10, 00:42:51 UTC