Learning the Basics of Vue JS

Belajar Vue JS Dasar

Vue JS merupakan salah satu framework JavaScript yang paling populer saat ini. Dengan Vue JS, Anda dapat membuat aplikasi web yang interaktif dan dinamis dengan cepat dan mudah. Dalam tutorial ini, saya akan membahas dasar-dasar Vue JS untuk membantu Anda memulai belajar menggunakan framework ini.

Langkah 1: Instalasi Vue JS

Langkah pertama yang perlu Anda lakukan adalah menginstal Vue JS. Anda dapat menginstal Vue JS melalui CDN (Content Delivery Network) atau menggunakan NPM (Node Package Manager).

Jika Anda ingin menggunakan CDN, tambahkan tag script berikut di dalam elemen head pada file HTML Anda:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

Jika Anda ingin menggunakan NPM, Anda bisa menginstal Vue JS dengan mengetikkan perintah berikut di terminal:

npm install vue

Langkah 2: Membuat Instance Vue

Setelah menginstal Vue JS, langkah selanjutnya adalah membuat instance Vue. Anda dapat membuat instance Vue dengan menambahkan script berikut di dalam file HTML Anda:

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    }
  })
</script>

Pada contoh di atas, kita membuat sebuah instance Vue dengan nama app yang terhubung dengan elemen HTML yang memiliki id app. Selain itu, kita juga menambahkan sebuah property message dengan nilai ‘Hello, Vue!’.

Langkah 3: Menggunakan Directive

Vue JS memiliki berbagai macam directive yang memudahkan Anda dalam melakukan manipulasi DOM. Salah satu directive yang sering digunakan adalah v-bind dan v-on.

Misalnya, jika Anda ingin mengikat atribut src dari sebuah gambar dengan URL yang disimpan di dalam property url pada instance Vue, Anda dapat menulis kode berikut:

<img v-bind:src="url" alt="Vue logo">

Jika Anda ingin menambahkan event click pada sebuah tombol untuk mengubah nilai dari property message, Anda dapat menulis kode berikut:

<button v-on:click="changeMessage()">Change Message</button>

Langkah 4: Membuat Komponen

Vue JS memungkinkan Anda untuk membuat komponen yang dapat digunakan berulang dalam aplikasi Anda. Untuk membuat komponen, Anda dapat menggunakan Vue.component().

Contoh penggunaan komponen:

Vue.component('hello-component', {
  template: '<p>Hello, {{ name }}</p>',
  data: function() {
    return {
      name: 'Vue'
    }
  }
})

var app = new Vue({
  el: '#app'
})

Pada contoh di atas, kita membuat sebuah komponen dengan nama hello-component yang memiliki template untuk menampilkan teks ‘Hello, Vue’. Komponen ini kemudian dapat digunakan di dalam elemen dengan id app.

Ini adalah beberapa dasar-dasar Vue JS yang dapat membantu Anda memulai belajar framework ini. Vue JS memiliki banyak fitur lain yang dapat Anda eksplorasi, seperti computed properties, watch properties, dan lain sebagainya. Semoga tutorial ini bermanfaat bagi Anda dalam belajar Vue JS!