Tutorial Vue JS Cylce, Method, Tempate

Tutorial Vue JS Life Cylce, Method, Tempate

Halo teman - teman pada tutorial kali ini saya akan membahas mengenai vue js yaitu life cycle, method dan template dan bagi yang belum mengikuti seri tutorial vue js konfigurasi pertama bisa kunjungi link di sini

Vue JS Life Cycle 

Tutorial yang pertama yaitu Life Cycle dari Vue JS yaitu proses yang terjadi dari penggunaan vue js 

1. Buatlah file dan masukan kode seperti gambar di bawah ini :

2. Simpan file tersebut dan jalankan di browser maka akan muncul tampilan seperti ini

Penjelasan :

1. pada cycle before created maka object yang dimasukan ke dalam element masih kosong maka akan muncul undefined dan pada created akan dimunculkan isi dari objectnya

2. pada cycle before mounted yang terjadi adalah nilai data dari element yang belum dimasukan sehingga akan memunculkan isi dari data dan baru dimunculkan pada life cycle mounted

3. pada cycle before update dan updated harus memasukan perintah untuk menupdate misalkan mengubah nama dari data menjadi nama lain dengan memasukan perintah vm.Nama = "Alif" maka cycle before update dan updated akan muncul seperti gambar di bawah ini

yang terjadi pada life cycle before update adalah vue js akan menampilkan data sebelum di lakukan updating dan pada saat life cycle updated maka akan dimunculkan data yang sudah di update

4. untuk life cycle yang terakhir yaitu before destroy dan destroyed yaitu life cycle yang berfungsi untuk menghentikan proses dari life cycle untuk kode nya tambahkan setelah life cycle updated sehingga menjadi seperti in

Lalu apabila dijalankan di browser maka akan muncul tampilan seperti ini

lalu setelah dilakukan life cycle destroyed maka proses apapun yang dilakukan tidak dapat dijalankan kembali

Template

1. Tutorial selanjutnya yaitu membuat template pada vue js yaitu menambahkan data attribute html tetapi di simpan di dalam vue js untuk proses nya buatlah sebuah file baru dan masukan kode seperti ini

2. Lalu simpan file tersebut dan jalankan di browser maka akan muncul tampilan seperti ini

Method

Tutorial selanjutnya yaitu pembuatan aplikasi kalkulator menggunakan vue js 

1. Buatlah file baru dan masukan kode seperti ini

2. Pada kodingan tersebut menampilkan pembuatan aplikasi calculator dengan membuat inputan kedua angka dan hasil yang harus dimasukan nantinya inputan tersebut akan dimasukan atribut v-model ayang berfungsi layaknya pemberian class dan id pada html biasa dan di dalam button yang berisi operasi perhitungan terdapat fungsi yang akan dijalankan pada saat button tersebut di klik dan di dalam method berisi operasi perhitungan dari kedua inputan dan hasilnya akan dimunculkan di inputan hasil

3. simpan fie tersebut dan jalankan filenya di browser dan akan muncul tampilan seperti ini

Pada tampilan tersebut masukan kedua bilangan angka lalu klik button operasi perhitungan dan hasilnya akan muncul di kolom hasil

Kesimpulan

Pada tutorial ini membahas mengenai Life Cycle yang akan menciptakan apa yang dilakukan vue js ketika proses tersebut di jalankan dan nantinya life cycle ini akan ditampilkan dan akan membuat user memahami cara kerja dari vue js. lalu untuk template akan memudahkan dalam memasukan atribut html tidak perlu di dalam body tetapi bisa juga di dalam template vue js dan untuk method sama fungsi nya seperti javacript pada umumnya yaitu menghandle event yang terjadi pada saat event tersebut dilakukan

Mungkin untuk tutorial nya sampai disini terlebih dahulu terima kasih sudah mengikuti tutorial kali ini