Tutorial Vue.js 4 - Belajar Dasar Vue.js Part 2
Melanjutkan pembahasan dari yang sebelumnya yaitu tentang Belajar Dasar Vue.js.
Update
- beforeUpdate yaitu hook terjadi setelah mounted dah hanya terjadi jika ada perubahan yang diakibatkan render ulang. Lebih tepatnya, hook ini terjadi sebelum view dirender ulang.
- updated yaitu hook yang terjadi setelah beforeUpdate, setelah view dirender.
Untuk mengujinya, mari kita coba tambahkan kode berikut (hapus hook sebelumnya).
beforeUpdate() {
console.log('before update: ' +
'el = ' + this.$el.textContent)
},
updated() {
console.log('update: ' +
'el = ' + this.$el.textContent)
},Oleh karena hook ini terjadi karena adanya manipulasi atau perubahan nilai data pada saat runtime, maka kita perlu sebuah perintah untuk mengubah variabel pesan. Dibawah objek Vue kita tambahkan perintah berikut:
app.pesan = 'Selamat Belajar!'Kodingan diatas berfungsi merubah bariabel pesan yang sebelumnya Saya Belajar Vue.js! menjadi Selamat Belajar!
Pada gambar diatas terlihat bahwa pada hook beforeUpdate, variabel pesan masih bernilai Saya Belajar Vue.js! sedangkan pada hook update, variabel pesan telah berubah menjadi 'Selamat Belajar!
Hook beforeUpdate ini setara dengan method watch:
var app = new Vue({
el: '#vue',
data: {
pesan: 'Saya Belajar Vue.js!',
},
beforeUpdate() {
console.log('before update: ' +
'el = ' + this.$el.textContent)
},
updated() {
console.log('update: ' +
'el = ' + this.$el.textContent)
},
});
app.$watch('pesan', function(newValue, oldValue) {
console.log('Var pesan diubah dari '+oldValue+
'menjadi '+newValue)
})
app.pesan = 'Selamat Belajar!'Hasilnya sebagai berikut ini:
destroy
- beforeDestroy yaitu hook yang terjadi sebelum component dihapus.
- destroyed yaitu hook yang terjadi setelah objek Vue dihapus.
Untuk menjadi hook ini, sebenarnya kita perlu mengenal dahulu tentang komponen. Karena sejak versi 2 ini objek utama Vue "tidak bisa" dihapus, namun kita masih bisa menstimulasikanya melalui method app.$destroy().
Berikut contohnya:
var app = new Vue({
...
beforeDestroy() {
console.log('before destroy')
},
destroyed() {
console.log('destroyed')
},
})
app.$destroy()Hasilnya sebagai berikut:
Penulisan Template
Pada Vue, template merupakan kode yang menjadi dasar dari suatu tampilan yang umumnya ditulis dengan menggunakan bahasa HTML. Variabel pada template ditulis dengan menggunakan tanda kurung kurawal (mustache). Template dan variabel (data) dicompile oleh Vue menjadi Virtual DOM sebelum akhirnya dirender atau ditampilkan dalam bentuk HTML DOM. Ketika terjadi perubahan data maka akan memicu render ulang dari DOM.
Bentuk-bentuk data terkait hubunganya dengan template ada beberapa macam dan hal itu menuntut perlakuan yang berbeda.
Data Teks
Umumnya data dalam bentuk teks biasa, maka cara pernulisanya menggunakan mustache tags atau doble kurung kurawal:
<h1>{{ pesan }}<h1>Variabel dalam mustache tags ini akan diubah sesuai dengan variabel pada properti data yang didefinisikan di objek Vue. Ketika variabel message pada objek Vue diubah nilainya pada saat runtime maka secara otomatis variabel message pada template juga akan berubah nilainya. Hal ini telah kita uji coba pada pembahasan sebelumnya.
Untuk mencegah perubahan nilai variabel template pada saat runtime, kita bisa gunakan directive v-once.
<h1 v-once>{{ pesan }}</h1>Dengan menggunakan directive ini, maka variabel message pada template seolah menjadi sebuah konstanta yang tidak dapat diubah pada saat runtime, nilainya sesuai dengan ketika pertama kali didefinisikan di objek Vue.
Data Raw HTML
Adakalanya variabel data yang kita ingin tampilkan tidak dalam bentuk teks biasa namun dalam bentuk kode-kode HTML, sebagai contoh variabel message bernilai sebagai berikut:
var app = new Vue({
el: '#vue',
data: {
pesan: "<span style='color:red'>Selamat Belajar!</a>",
},
})Apabila kita jalankan maka hasilnya kode HTML akan muncul di browser.
Oleh karena itu, jika kita menggunakan data dalam bentuk HTML maka kita perlu ubah templatenya menggunakan directive v-html
<h1 v-html="message"></h1>Hasilnya sebagai berikut:
Data Attribute
Misalnya kita ingin menggunakan class CSS yang dinamis pada template, maka kita tidak bisa menggunakan kode berikut.
<style type="text/css">
.title{
color: green;
}
</style>
<div id="vue">
<h1 class="{{ class_h1 }}"> {{ pesan }} </h1>
</div>
<script type="text/javascript">
Vue.config.silent = true
var app = new Vue({
el: '#vue',
data: {
pesan: "Selamat Belajar!",
class_h1: "title"
},
})
</script>Hal ini dikarenakan mustache tidak dapat digunakan didalam atribut HTML. Oleh karena itu kita harus menggunakan directive v-bind
<h1 v-bind:class="class_h1"> {{ message }} </h1>Berikut hasilnya:
JavaScript Expression
Sebagaimana yang dicontohkan sebelumnya bahwa template Vue mendukung kode-kode Javascript.
{{ 'Pesan : ' + pesan }}
{{ 'Diskon : ' + total * 10% }}
{{ ok ? 'YES' : 'NO' }}
{{ pesan.split('').reverse().join('') }}Atau jika dalam bentuk atribut HTML maka penulisannya sebagai berikut.
<h1 v-bind:id="'product-' + index"></h1>Contoh-contoh berikut tidak akan berjalan.
// ini adalah statement, bukan expression
{{ var a = 1 }}
// gunakan ternary expressions
{{ if (ok) { return message } }}Properti Template
Pada contoh kode sebelumnya, template ditulis jadi satu dengan kode HTML-nya.
<div id="vue">
<h1>{{ pesan }}</h1>
</div>Namun Vue juga menyediakan cara lain untuk mendefiniskan template yaitu menyatu dengan object Vue melalui properti template.
...
<div id="vue"></div>
<script type="text/javascript">
var app = new Vue({
el: '#vue',
data: {
pesan: 'Selamat Belajar!'
},
template: "<h1>{{ pesan }}</h1>"
})
</script>
...Template ini akan dicompile dengan data oleh Vue sebelum ditampilkan pada elemen HTML dengan id app.
Alternatif lain kita bisa juga menggunakan method render. Sesuai dengan namanya, method ini berfungsi menampilkan konten yang didefinisikan.
var vm = new Vue({
el: '#vue',
data: {
pesan: 'Selamat Belajar!'
},
render (createElement) {
return createElement('h1', this.pesan)
},
...Pada kode di atas, method render mengembalikan fungsi createElement untuk menciptakan elemen HTML h1 yang berisi nilai dari variabel message. Melalui method render ini, dengan bantuan babel (pustaka Javascript untuk transform code), kita bisa gunakan format penulisan JSX layaknya React.
fungsi createElement tidak hanya dapat menciptakan elemen HTML saja namun juga dapat menciptakan elemen component (component akan dibahas lebih lanjut pada bab selanjutnya) yang kita buat.
Misalnya untuk menciptakan elemen Hello.
render (createElement) {
return createElement(Selamat);
}Penulisan nama fungsi createElement ini kemudian dialiaskan menjadi h, sehingga kita bisa menuliskannya sebagai berikut.
render (h){
return h(App);
}Atau jika ditulis menggunakan es6 arrow function menjadi sebagai berikut.
render: h => h(App)Vue lebih merekomendasikan penggunaan template untuk sebagian besar kasus. Namun pada suatu kasus yang membutuhkan kekuatan lebih dari Javascript adakalanya kita perlu menggunakan render ini. Contohnya adalah untuk menampilkan component utama di mana di dalam component tersebut akan dibuat sub component.
Pada pembahasan ini kita telah belajar tentang bagaimana konsep MVVM yang diterapkan oleh Vue dimana objek Vue bertindak sebagai ViewModel, properti el sebagai View, dan properti data sebagai Model. Objek Vue bertindak sebagai penghubung antara View dan Model.
Vue memiliki siklus hidup atau lifecycle mulai dari saat objek Vue dibuat (create), objek Vue dimuat (mount), objek Vue diupdate, hingga objek Vue dihapus (destroy), dimana masing-masing memiliki hook yang bisa kita manfaatkan untuk menjalankan perintah tertentu.
Penulisan template pada view tergantung dari bentuk data yang ingin kita tampilkan dan pada posisi mana ditampilkan. Apakah data dalam bentuk teks biasa atau html.
Properti methods digunakan untuk fungsi yang bisa dipanggil melalui suatu event, computed digunakan sebagai variabel bayangan yang nilainya bergantung pada variabel data, sedangkan filters digunakan untuk memanipulasi tampilan dari suatu teks.
Pada bab selanjutkan anda akan diajak menyelami lebih dalam mengenai directive yang sebenarnya sudah disinggung pada bab ini. Beberapa varian directive serta bagaimana cara penggunaannya akan dibahas tuntas pada pembahasan selanjutnya.