Muhammad Rifqi Rizqi Akbar D111911062

TUGAS 2
DESAIN WEB II

1. Create

Kemudian jalankan pada browser dan buka console maka akan muncul seperti ini

Pada gambar diatas adalah tipe lifecycle yang pertama kali dijalankan pada component, memungkinkan
kita untuk menjalankan kode sesaat sebelum dan sesudah component mengupdate DOM.
Muhammad Rifqi Rizqi Akbar D111911062

2. Mount

Pada kode ini (mounted )merupakan tipe lifecycle pada Vue yang memungkinkan kita untuk mengakses
dom persis sebelum dan sesudah template di-render. Jangan gunakan lifecycle tipe ini untuk keperluan
mengambil data dan event, karena template membutuhkan data tersebut sebelum ditampilkan.
Kemudian jika dibuka console akan muncul seperti gambar dibawah ini

mounted dieksekusi oleh vue setelah template di-render, kita dapat mengakses seluruh component,
templates, data, even, dan object global vue yang lain. Hal ini seperti kita menulis kode javascript di dasar
kode html di dalam body. Paling sering di gunakan untuk memodifikasi DOM template dan
mengintegrasikan external library Vue.
Muhammad Rifqi Rizqi Akbar D111911062

3. Update

Jika dijalankan pada browser maka tidak ada perubahan apapun dalam hasil running nya akan tetapi disini
saya telah menambahkan vm.message=’selamat pagi!’ maka akan berubah dari sebelumnya dan ketika
dibuka console maka aka nada perubahan yang segnifikan dari sebelumnya

Akan terlihat sebelum dan sesudah berubahnya hasil runningan tersebut

Muhammad Rifqi Rizqi Akbar D111911062

4. Destroy

Lifecycle tipe ini memungkinkan kita untuk melakukan action, trigger, dan event sesaat atau sebelum
sebuah component dihilangkan dari sebuah DOM.

Ketika button “destroy component” diklik, maka component “vm-test” dihilangkan dari root/parent
component. Dan seketika itu juga lifecycle hook beforeDestroy dan destroyed dieksekusi oleh Vue.

Mungkin itu saja yang bisa saya sampaikan mohon maaf apabila banyak kekurangan, terimakasih.