DASAR-DASAR DI VUE.JS

Maret 14, 2020

DASAR-DASAR DI VUE.JS

Object Vue

Dalam object vue terdapat beberapa siklus yang digunakan untuk mejalankan perintah diantaranya Create di buat untuk membuat message apa yang ingin kita tampilkan dan dalam siklus object juga terdapat 2 siklus create yaitu:

1. BeforeCreate yang masih belum di compile.

2. Created yang sesudah di compile dan dapat diakses.

Dengan membuat file baru create.html masukan kode seperti di bawah ini.

jangan lupa disatukan dengan folder lib nya dalam penyimanan di foldernya.

dengan hasil setelah di jalankan di web browser dan klik kanan-inspect elemen-console

maka muncul hasil seperti dibawah ini.

tanda panah menunjukan before cerate message = undefined
dan setelah di isi message menampilkan = Hello Agniarsh.

Setelah men Create maka step selanjutnya membuat siklus Mount di buat untuk membuat message apa yang ingin kita tampilkan dalam element #app atau ke messagenya.
terdapat 2 siklus mount yaitu:

1. BeforeMount element yang masih belum di compile.

2. Mounted element yang sesudah di isi dan di compile.

dengan hasil setelah di jalankan di web browser dan klik kanan-inspect elemen-console

maka muncul hasil seperti dibawah ini.

before mount: element = message

sesudah di compile maka mounted: element = Hello Agniarsh

Setelah men Update maka step selanjutnya membuat siklus Update di buat untuk memperbaharui message apa yang ingin kita tampilkan dan membuat siklus Destroy untuk mengahpus message yang kita sudah create .
terdapat 2 siklus update yaitu:

1. BeforeUpdate element yang masih belum di compile.

2. updated element yang sesudah di isi dan di compile.

dan 2 siklus destroy yaitu:

1. BeforeDestroy element yang masih belum di compile.

2. Destroyed element yang sesudah di isi dan di compile dan terhapus message yang di tampilkan sebelumnya.

masukan kode 29-34 untuk updatenya dan jangan lupa di baris 42 untuk ditambahkan variable message sebagai penguji .

kemudian jalankan di web browser untuk updatenya terlebih dahulu.

before update: element =hello agniarsh!

sesudah di compile maka updated: element = kumaha damang?

setelah itu masukan kode 35-41 untuk destroy dan jangan lupa di baris 43 untuk ditambahkan variable message sebagai penguji .

dan hasilnya update berhasil di hapus.

Membuat template vue sederhana yang menggabungkan property template, data raw dan data attribute dengan script seperti dibawah ini.

Selanjutnya membuat atribut dan template yang aku gunakan seperti ini menambahkan warna ,gambar dan heading.

Kalkulator sederhana

membuat kalkulator dengan clue kalkulator yang memiliki inputan nilai 1 dan nilai 2, dengan 4 tombol perhitungan (tambah, kurang, kali, bagi). Ketika nilai telah diinput dan tombol di klik
ikuti script berikut untuk membuat inputan dan menambah button yan mempunyai action klik untuk menunjukan hasil yang di gunakan.