Memulai Belajar Vue JS - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Memulai Belajar Vue JS, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Vue.js, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Memulai Belajar Vue JS
link : Memulai Belajar Vue JS

Memulai Belajar Vue JS

dalam membangun sebuah aplikasi web pada saat tertentu harus menggunakan Javascript. dan menurut sebagian orang Javascript itu ribet. namun semua berubah saat negara api menyerang mengenal Vue.js ini.

latihan pertama membuat hello world. buat file html sederhana dan masukkan vue js. atur script seperti berikut.

penjelasan gambar diatas yaitu menampilkan pesan menggunakan model dari vue.js. dimana div dengan id="app" menampilkan data dari model vue.js, lihat bagian el (element) dan data pada Vue. hasilnya jika dilihat pada browser.

terlihat sama saja? perbedaannya adalah jika merubah value data pada model Vue. maka akan secara langsung berubah. seperti contoh berikut, rubah isi input text sesuka hati.

{{ message }}

saat value data pada model vue berubah  maka akan secara langsung element (dalam hal ini heading untuk menampilkan message) juga berubah. mudah bukan? script seperti diatas seperti berikut. perhatikan pada input text terdapat v-model="message" sesuai dengan data pada model Vue.

jadi intinya bisa melakukan perubahan pada halaman yang sama. misal seperti berikut melakukan perhitungan gaji.

Gaji Total : {{ gapok+lembur }}

 {{ $data|json }}

untuk script perhitungan gaji diatas seperti berikut. khusus untuk angka perlu ditambahkan number pada input selain juga v-model. kalau tidak ditambahkan nanti dianggap text.

selamat mencoba.

Demikianlah Artikel Memulai Belajar Vue JS

Sekianlah artikel Memulai Belajar Vue JS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Memulai Belajar Vue JS dengan alamat link https://dev-create.blogspot.com/2020/06/memulai-belajar-vue-js.html