Berbagai pengetahuan dasar yang perlu Anda ketahui di Vue.js.

Artikel ini merupakan seri lanjutan dari artikel yang sebelumnya sudah di publikasikan, baca semua seri Pengetahuan Dasar Vue.js:

1. Pengetahuan Dasar Vue.js - Bagian 1
2. Pengetahuan Dasar Vue.js - Bagian 2
3. Pengetahuan Dasar Vue.js - Bagian 3 (Anda di sini)

---

Kali ini kita akan melanjutkan dengan membahas hal dasar lainnya dalam Vue.js, silahkan siapkan kopi dan simak artikel berikut :

1. Filter, Computed dan Watch

👉 Filter

Filter merupakan fitur yang juga diadopsi dari AngularJS dan memiliki fungsi yang hampir sama. Filter di dalam Vue.js digunakan untuk melakukan transformasi atau pun formatting data secara real-time berdasarkan rule yang telah ditetapkan di dalam kode kita.

Keuntungan menggunakan filter adalah kita tidak perlu melakukan formatting secara manual dari setiap data yang ingin kita ubah, namun cukup membuat satu filter dan bisa digunakan berulang-ulang dengan cara yang sangat simple dan mudah.

Filter dapat digunakan di dalam template html dengan menambahkan pipe (|) pada data yang ingin kita lakukan transformasi, seperti terlihat pada gambar dibawah ini :

<!-- in mustaches -->
{{ message | capitalize }}

<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

Filter harus mengembalikan nilai yang merupakan hasil dari data yang telah di transformasi ke bentuk yang diinginkan, contohnya bisa dilihat pada kode berikut :

new Vue({
  // ...
  filters: {
    capitalize: function(value) {
      if (!value) return ''
      value = value.toString()
      return value.chartAt(0).toUpperCase() + value.slice(1)
    }
  }
})

👉 Computed

Computed merupakan satu method yang akan dijalankan secara otomatis setiap kali variable/object yang ada dibawah function didalamnya mengalami perubahan. Computed sendiri akan/harus mengembalikan suatu nilai yang bisa kita panggil lagi baik di html template maupun javascript.

Balikan nilai dari computed ini bersifat mirip dengan variabel di dalam data yang telah dijelaskan pada Bagian 2 sebelumnya. Sehingga bila dilihat di contoh potongan kode pada gambar dibawah ini maka bisa dijelaskan bahwa kita punya variabel di dalam data dengan nama “message” dan setiap perubahan yang terjadi pada nilainya maka otomatis akan men-trigger suatu computed dan akan menghasilkan data virtual dengan nama “reversedMessage".

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function() {
      // `this` points to the vm instance
      return this.message
        .split('')
        .reverse()
        .join('')
    }
  }
})

👉 Watch

Watch memiliki fungsi yang hampir mirip dengan computed namun memiliki persepsi yang berbeda. Jika menggunakan computed maka kita ingin menghasilkan suatu data baru menggunakan function yang jika di dalamnya terjadi perubahan pada variabel nya maka akan dilakukan kalkulasi ulang untuk menghasilkan data baru tersebut, maka dengan menggunakan watch kita berarti ingin memantau perubahan dari suatu variabel yang terdapat didalam Data dan setiap kali terjadi perubahan pada variabel yang kita pantau maka akan otomatis menjalankan function yang ada di dalam watch bersangkutan. Watch juga tidak mengembalikan nilai seperti yang diharuskan pada computed.

Conth membuat watch bisa dilihat pada cuplikan kode berikut:

var vm = new Vue({
  el: 'example-2',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // whenever question changes, this function will run
    question: function(newQuestion) {
      ;(this.answer = 'Waiting for you to stop typing...'), this.getAnswer()
    }
  }
})

2. Mengenal Vue.js Plugins

Vue.js Plugin pada dasarnya memiliki tujuan untuk menambahkan suatu fungsi yang bersifat global dan mudah untuk digunakan ulang. Contoh paling mudah adalah ketika kita di Vue.js sering kali menggunakan sintaks Vue.use(MyPlugin), ini sebenarnya kita sedang ingin menggunakan suatu plugin lewat sintaks ini. Semua logika dari plugin sudah dibungkus di dalamnya sehingga kita bisa menggunakan dengan mudah dan tidak perlu susah-susah untuk inisialisasi ulang disetiap tempat yang membutuhkan melainkan cukup diinisialisasi di root dari aplikasi kita.

Sintaks dasar untuk membuat plugin di dalam Vue.js bisa dilihat pada cuplikan kode di bawah ini:

MyPlugin.install = function(Vue, options) {
  // 1. add global method or property
  Vue.myGlobalMethod = function () {
    // someting logic ...
  }

  // 2. add a global asset
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // something logic ...
    }
    ...
  })

  // 3. inject some component options
  Vue.mixin({
    created: function () {
      // something logic ...
    }
    ...
  })

  // 4. add an instance method
  Vue.prototype.$myMethod = function (methodOptions) {
    // something logic ...
  }
}

Pengetahuan membuat plugin di Vue.js ini akan sangat membantu apalagi bila membangun aplikasi yang lumayan kompleks dengan banyak komponen dan saling berkomunikasi antar mereka. Dengan plugin kita bisa membuat satu logika untuk semua tempat, seperti contoh kita membuat beberapa filter yang bisa digunakan di semua komponen dalam aplikasi kita menggunakan plugin. Hal seperti ini tentu menghemat banyak waktu kita karena menghindarkan kita dari membuat duplikasi kode di banyak tempat.

---

Demikian sedikit penjelasan tentang beberapa hal dasar di Vue.js.

Terima kasih dan semoga bermanfaat penjelasan singkatnya.

---

Gambar cover oleh Piel Bover