Tutorial Vue.js 3 - Belajar Dasar Vue.js
Sebelumnya saya telah membahasaa tentang cara install Vue serta membuat project pertama, jika anda belum membacanya maka silkan baca terlebih dahulu.
Rekomendasi : Tutorial Vue.js 2 - Cara Install Vue.js
Vue mempunyai ViewModel dari pattern konsep MVVM, ViewModel merupakan penghubung antara View (DOM) dan Model (objek kata). Manipulasi pada View dipantau oleh DOM Listeners kemudian di terima oleh ViewModel untuk digunakan mengupdate Model, demikian juga perubahan data pada Model akan diteruskan oleh ViewModel ke View melalui Directives.
Pada Vue, objeknya inilah yang berganti menjadi ViewModel pada konsep MVVM. Oleh sebab itu, kita mulai dengan membedah apa itu objek Vue, yaitu objek utama yang harus ada jika kita menggunakan Vue.
Inisiasi Objek Vue
Sebelumnya telah dicontohkan bahwa setiap aplikasi Vue dimulai dengan menginisiasi objek Vue.
var app = new Vue({
// options
})Variabel app (singkatan dari ViewModel) pada contoh di atas mengacu pada objek Vue, meskupun sebenarnya tidak harus untuk membuat variabel baru (app) untuk menyimpan objek dari Vue kecuali jika memang dibutuhkan. Sedangkan options bisa kita isi dengan properti-properti yang didefinisikan oleh Vue seperti data, methods, component, dsb.
Setiap sub bagian dari Vue memiliki skema yang kuran lebih sama. Dimana objek Vue di atas sebagai parent atau root, lalu dibawahnya dengan struktur hirarki pohon bisa kita buat komponen dan sub komponennya. Komunikasi data antar komponen parent dengan komponen anaknya secara native menggunakan props.
Bisa dikatakan bahwa aplikasi yang dibangun dengan Vue merupakan satu kesatuan dari berbagai komponen Vue didalamnya. Anda pernah denganr istilah web component? jika pernah maka Vue merupakan library yang menggunakan konsep itu.
Properti el
Sebagaimana penjelasan sebelumnya bahwa properti el menunjuk ke tempat dimana hasil kompilasi dari template dan data akan dimuat.
var app = new Vue({
el: '#vue',
...
})Melalui properti ini app.$el, onjek Vue dapaat memanipulasi DOM atau view dalam konsep MVVM.
Jika kita jalankan perintah console.log(app.$el) maka akan menampilkan DOM atau temtplate HTML.
Properti Data
Pada latihan sebelumnya "Saya Belajar Vue.js!", kita juga telah menyinggung sedikit tentang data yaitu bagaimana cara mendefinisikan dan menggunakannya. Dimana, data merupakan salah satu properti pada objek Vue yang digunakan untuk mendefinisikan variabel-variabel yang diguanakan pada aplikasi kita atau dalam konsep MVVM, data merupakan Model.
var app = new Vue({
...
data: {
pesan: 'Saya Belajar Vue.js!'
}
})
Pada kodingan di atas terlihat properti data berbentuk objek yang bertindak sebagai kontainer dari variabel pesan. Kita bisa juga menambahkan variabel lain dengan cara sebagai berikut ini:
...
data: {
pesan: 'Saya Belajar Vue.js!',
teks: 'Semangat Broo'
}
...teks merupakan nama variabel baru yang kita tambahkan dan bernilai kalimat "Semangat Broo". Tentunya variabel baru ini bisa kita tampilkan dengan mudah di browser sebagai berikut.
<div id="vue">
<h1>{{ pesan }}</h1>
<p>{{ teks }}</p>
</div>Tampilan pada browsernya akan tampil seperti gambar di bawah ini:
Variabel pada properti data bisa kita definisikan dalam berbagai tipe data seperti string, integer, boolean, array dan object. Berikut contohnya:
data: {
name: 'Salogy', // string
age: 23, // integer
gender: true, // boolean pria
hoby: ['coding','travelling'], // array
makanan: {
1: 'Ayam',
2: 'Sate',
3: 'Baso'
} // object
}Sebagaimana yang telah dijelaskan pada bagian pertama, properti data yang kita definisikan ini bisa kita manipulasi isinya pada saat runtime (aplikasi berjalan), disamping itu properti data ini otomatis memiliki sifat reactive sehingga perubahan nilai pada variabel data akan memicu render ulang pada view.
Pada properti data ini bisa kita akses secara langsung dari dalam objek Vue dengan menggunakan this.$data atau this.pesan, sedangkan jika diakses dari luar objek Vue menggunakan nama variabel objeknya app.$data atau app.pesan.
Siklus Objek Vue
Sebelum kita mengeksplore lebih dalam, ada satu hal yang perlu kita ketahui dahulu untuk memudahkan dalam memahami Vue secara haolistik yaitu objek Vue.
Objek Vue yang kita definisikan sebenarnyaa memiliki siklus hidup life cycle mulai dari kerika objek diciptakan, view dirender, data dimuat, hingga objek itu dihapus. Dimana pada setiap siklus tersebut terdapat hook yang bisa kita manfaatkan untuk menjalankan suatu perintah tertentu.
Terdapat 8 siklus, 8 siklus ini bisa di kelompokan menjadi 4 bagian.
create
- beforeCreate yaitu hook sesaat seetelah objek Vue dan komponenya diinisialisasi. Properti data belum dapat diakses atau digunakan pada hook ini.
- created yaitu hook ketikaa objek Vue telah selesai diciptakan. Pada hook ono, sifat reactivity pada properti data juga sudah didefinisikan sehingga kita sudah diizinkan untuk mengakses dan memanipulasi data. Properti computed yang digunakan untuk memonitor perubahan data juga sudah berjalan. Jika aplikasi membutuhkan request data dari server maka hook ini adalah hook yang tepat untuk melakukanya.
Berikut ini contoh kode untuk menggunakan kedua hook ini yaitu dengan method beforeCreate dan created:
var app = new Vue({
el: '#vue',
data: {
pesan: 'Saya Belajar Vue.js!',
},
beforeCreate(){
console.log('before create: '+
'pesan = ' + this.pesan)
},
created(){
console.log('created: '+
'pesan = ' + this.pesan)
},
});Pada kodingan diatas, kedua hook sama-sama digunakan untuk mengakses variabel pesan.
Pada gambar diatas terlihat bahwa hook created bisa mengakses variabel pesan sebaliknya beforeCreate tidak bisa.
Apa yang terjadi pada properti data dapat kita lihat juga dengan cara tambahkan kode hool created menjadi sebagai berikut:
created() {
console.log('created: '+
'pesan = ' + this.pesan)
console.log(this.$data)
},Properti data dapat diakses secara langsung menggunakan tanda $ di depan data.
Penulisan fungsi atau method created() pada kode diatas merupakan shorthand bentuk penulisan singkat dari fungsi. Bentuk panjangnya seperti berikut ini.
created: function() {
console.log('created: '+
'pesan = ' + this.pesan)
console.log(this.$data)
},Meskipun kita dapat menggunakan format penulisan ES6, namun arrow function tidak disarankan untuk digunakan pada kasus ini, sebab keyword di dalam arrow functuon tidak menunjuk ke objek Vue melainkan ke objek di atasnya (pada kasus ini objek window).
Berikut contoh kode untuk melihat bahwa this pada fungsi merujuk ke konteks yang berbeda.
beforeCreate() {
console.log('simple functioon : ' + this)
},
created: () => {
console.log('arrow function : ' + this)
},
Gambar di atas menunjukan bahwa this pada fungsi biasa ke objek Vue sedangkan pada arrow function merujuk ke objek window.
Kembali ke topik, meskipun hook created sudah bisa mengakses properti data namun Virtual DOM dan template (komponen) belum bisa di akses.
mount
- beforeMount yaitu hook ketika template dicompile
- mounted yaitu hook ketika elemen (properti el) telah diinisialisasi, data telah dimuat dan view telah dirender
Untuk mencoba kedua hook ini mari kita tambahkan kode sebagai berikut (hapus kode hook sebelumnya).
beforeMount() {
console.log('before mount: ' +
'el = ' + this.$el.textContent)
},
mounted() {
console.log('mounted: ' +
'el = ' + this.$el.textContent)
},
Pada kode diatas, kita akan mencoba mengakses DOM dengan menggunakan fungsi bawaan JavaScript yaitu textContent untuk menampilkan konten teks yang adalah di dalam el atau dalam hal ini #vue.
Berikut hasilnya:
Kedua hook ini dapat mengakses DOM, namun pada hook beforeMount, data dirender dengan template, sedangkan hook mounted sudah.
Sekian pada pembahasan ini, saya akan melanjutkanya di part 2.