Pertama Anda buat file create.html terlebih dahulu. Setelah itu isikan coding dibawah ini.
<!DOCTYPE html><html><head><title>Belajar Vue</title><script src="lib/vue.js"></script></head><body><div id="app"><h1>{{ message }}</h1></div><script type="text/javascript">var vm = new Vue({el: '#app',data: {message: 'Hello world!'},beforeCreate () {console.log('before create: '+'message = ' + this.message)},created () {console.log('created: '+'message = ' + this.message)},})</script></body></html>
Jika Benar maka tampilan akan seperti ini :
Penjelasan.
1.hook created bisa mengakses variabel message, dan sebaliknya beforeCreate tidak bisa mengakses variable message.
2.mengakses DOM dengan menggunakan fungsi bawaan js, yaitu textContent. textContent ini berfungsi untuk menampilkan konten teks yang ada di dalam el.
3.dapat mengakses DOM, akan tetapi pada hook beforeMount, datanya belum dirender dengan template, sedangkan hook mounted sudah. Oleh karena itu, hook mounted dapat menampilkan isi dari variabelnya.
4.Hook update terjadikarena adanya manipulasi atau perubahan nilai data pada saat runtime. Untuk mengujinya kita perlu sebuah perintah untuk mengubah variable message.
5.Sejak versi 2, objek utama vue “tidak bisa”dihapus, tapikita masih bisa mensimulasikannya melalui method vm.$destroy().
Komentar
Posting Komentar