Pengetahuan Dasar Vue js - Part3

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

1. Pengetahuan Dasar Vue.js --- Part1
2. Pengetahuan Dasar Vue.js --- Part2
3. Pengetahuan Dasar Vue.js --- Part3(Anda disini)

---

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 :

Menggunakan Filter dalam Vue.js. sumber (https://vuejs.org/)

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

Membuat Filter dalam Vue.js. sumber (https://vuejs.org/)

👉 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".

Computed dalam Vue.js. sumber (https://vuejs.org/)

👉 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.

Contoh membuat watch bisa dilihat pada gambar berikut :

Watch dalam Vue.js. sumber (https://vuejs.org/)

 

 

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 gambar dibawah ini :

Plugins dalam Vue.js. sumber (https://vuejs.org/)

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 sharing mengenai beberapa pengetahuan dasar di Vue.js kali ini.

Terima kasih dan semoga bermanfaat penjelasan singkatnya.