Vue

Last updated 4 years ago

Was this helpful?

Vue

Apa itu Vue?

Vue atau dibaca view, merupakan sebuah kerangka kerja javascript yang digunakan untuk membuat tampilan antarmuka pengguna (user interface) dari aplikasi berbasis web khususnya Single Page Application (Konsep aplikasi web yang memiliki 1 (single) halaman saja).

Baca Single Page Application :

Instalasi Vue.js

Menyertakan `<script>` Langsung (pada HTML)

File Vue yang akan disertakan ke dalam halaman HTML bisa diunduh ke lokal (sehingga tidak membutuhkan koneksi internet lagi) atau ditautkan langsung dengan server pustaka Vue (CDN).

File Vue dapat diunduh atau ditautkan langsung melalui link berikut ini:

Versi Pengembang : -- Filenya tidak dikompres -- Dengan informasi peringatan jika terjadi kesalahan kode akan ditampilkan yang dapat membantu dalam pengembangan

Versi Produksi : -- Filenya dikompres sehingga lebih optimal dan ditingkatkan kecepatan

Untuk menambahkan ke halaman HTML, tambahkan kode berikut:

<script src="lib/vue.js"></script>

lib : nama folder tempat menyimpan file vue.js vue.js : file vue

Jika ingin menautkan langsung ke server CDN maka dibutuhkan koneksi internet, tambahkan kode berikut:

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

Jika aplikasi sudah dalam tahap produksi, ubah vue.js menjadi vue.min.js untuk tujuan keamanan dan performa yang lebih optimal.

NPM

NPM adalah metode instalasi yang disarankan ketika membangun aplikasi skala besar dengan Vue.

# stabil terakhir
$ npm install vue

CLI

Tidak disarankan para pemula untuk memulai proyek dengan menggunakan vue-cli, terlebih lagi jika anda masih belum terbiasa / familiar dengan build tools yang berbasiskan Node.js. Tools CLI memudahkan dalam membuat scaffolding project aplikasi.

Render Secara Deklaratif

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Vue</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ pesan }}
    </div>

    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                pesan: "Hai, ini Vue"
            }
        });
    </script>
</body>
</html>

Berikut penjelasan dari kode di atas:

1 . Menyertakan (include) file vue.js ke dalam file html

<script src="lib/vue.js"></script>

2 . Kontainer elemen html untuk menampilkan hasil kompilasi Vue. Di bagian ini kita perlu menambahkan atribut id sebagai penanda yang nantinya akan didefinisikan pada saat inisiasi objek Vue. {{ pesan }} menandakan bahwa teks pesan merupakan variabel yang akan dimanipulasi oleh Vue.

<div id="app">
     {{ pesan }}
</div>

3 . Membuat objek Vue di dalam tag script. Objek vue disimpan ke dalam variabel vm (nama variabel bebas). Pada contoh kali ini, objek vue menggunakan 2 properti yaitu el dan data. Properti el merupakan id dari elemen html untuk menampilkan hasil manipulasi data. Sedangkan properti data yang berbentuk objek yang memiliki key pesan dan nilai/value "Hai, ini Vue".

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            pesan: "Hai, ini Vue"
        }
    });
</script>

Jika kita jalankan pada browser, maka hasilnya seperti gambar di bawah ini:

Vue memiliki sifat reaktif, ketika kita mengubah nilai dari variabel vm.pesan, maka akan tampil nilai variabel vm.pesan yang baru tanpa perlu refresh halaman.

Kita telah berhasil membuat aplikasi Vue pertama kita! Data yang ditampilkan sudah terhubung dengan DOM, dan semuanya bersifat reaktif.

Selain interpolasi (penyisipan) teks, kita juga bisa langsung binding attribute pada elemen seperti dibawah ini:

<div id="app-2">
  <span v-bind:title="pesan">
    Arahkan mouse Anda kesini dan tunggu dalam beberapa detik
    untuk melihat judul pesan yang dinamis
  </span>
</div>

let vm2 = new Vue({
  el: '#app-2',
  data: {
    pesan: 'Anda memuat halaman ini pada jam ' + new Date().toLocaleString()
  }
});

Sekarang kita telah mempelajari hal baru. Atribut v-bind yang telah Anda lihat dinamakan directive. Directive diawali dengan huruf v- untuk mengindikasikan/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 dirender. Ibarat kata, “Jaga atribut title ini agar tetap update dengan properti pesan“.

Jika Anda buka JavaScript konsol lagi dan tekan enter vm2.pesan = 'ini adalah pesan baru', maka Anda akan melihat atribut title telah terupdate dengan pesan baru tersebut.

Kondisi dan Perulangan

Sangat mudah untuk menerapkan pengkondisian pada suatu elemen:

<div id="app-3">
  <span v-if="terlihat">Saya bisa dilihat</span>
</div>

let vm3 = new Vue({
  el: '#app-3',
  data: {
    terlihat: true
  }
});

Cobalah buka konsol di browser Anda sekali lagi, dan ketikkan vm3.terlihat = false kemudian tekan enter. Maka pesan yang tadi akan hilang.

Contoh ini mendemonstrasikan kepada kita bahwa tidak hanya teks dan atribut yang bisa kita binding, tetapi juga struktur dari DOM.

Selain itu juga terdapat directive yang lain, masing-masing memiliki fungsi yang spesial. Contohnya seperti, directive v-for bisa digunakan untuk menampilkan daftar item yang didapatkan dari data Array:

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.teks }}
    </li>
  </ol>
</div>

let vm4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { teks: 'Belajar JavaScript' },
      { teks: 'Belajar Vue' },
      { teks: 'Buat proyek keren' }
    ]
  }
});

Kemudian di konsol, ketik dan enter vm4.todos.push({ teks: 'Hasilkan uang' }). Maka anda akan melihat item baru akan muncul dalam daftar.

Menangani Inputan Pengguna

Untuk mencoba para pengguna berinteraksi dengan aplikasi Anda, kita bisa menggunakan directive v-on untuk melampirkan event listener yang bisa menjalankan suatu fungsi/metode pada instance Vue kita.

<div id="app-5">
    <p>{{ pesan }}</p>
    <button v-on:click="balikkanPesan">Balikkan Pesan</button>
</div>

let vm5 = new Vue({
  el: '#app-5',
  data: {
    pesan: 'Hai Vue.js!'
  },
  methods: {
    balikkanPesan: function () {
      this.pesan = this.pesan.split('').reverse().join('')
    }
  }
});

Perlu diingat bahwa metode ini memperbaharui state di 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 formulir dengan state pada aplikasi:

<div id="app-6">
  <p>{{ pesan }}</p>
  <input v-model="pesan">
</div>

let vm6 = new Vue({
  el: '#app-6',
  data: {
    pesan: 'Hai Vue!'
  }
});

Referensi

PreviousVue.js NextVue Axios

Last updated 4 years ago

Was this helpful?

Apa itu Vue?

Instalasi Vue.js

Menyertakan <script> Langsung (pada HTML)

NPM

CLI

Render Secara Deklaratif

Kondisi dan Perulangan

Menangani Inputan Pengguna

Referensi

Apa itu Vue?

Instalasi Vue.js

Menyertakan <script> Langsung (pada HTML)

NPM

CLI

Render Secara Deklaratif

Kondisi dan Perulangan

Menangani Inputan Pengguna

Referensi

Menyertakan `<script>` Langsung (pada HTML)

Menyertakan `<script>` Langsung (pada HTML)