Tutorial Vue.Js - Cara Mudah Install Vue.Js

byindeveloper •
0
Tutorial Vue.Js - Cara Mudah Install Vue.Js
Assalamualaikum. wr. wb. teman-teman, pada tutorial ini kita akan belajar dasar dari salah satu framework Javascript yang paling populer saat ini, the one and only Vue.Js. Mengapa framework ini menjadi sangat populer saat ini, berikut beberapa alasannya:
  1. Ukuran yang kecil dengan kekuatan yang powerfull.
  2. Bahasa yang digunakan mudah sederhana dan mudah dipahami.
  3. Dokumentasi yang lengkap.
  4. Fleksibel.
  5. Dapat melakukan komunikasi dua arah.
Apa saja yang harus dikuasai untuk dapat mengikuti tutorial ini? Saran saya kalian sudah mengerti cara membuat web baik secara native maupun framework pastinya menggunakan HTML, CSS, PHP, MySQL dan lebih baik jika kalian sudah paham tentang Javascript atau JQuery. 

Untuk penjelasan lengkap serta dokumentasinya kalian bisa cek di web resminya Vue.Js dengan klik disini. Tutorial ini hanya membantu teman-teman yang memiliki kendala dalam bahasa inggris. Oke langsung saja kita mulai tutorialnya.

Installasi Vue.Js

Untuk menginstall Vue.Js sangatlah mudah, seperti hal-nya menginstall bootstrap atau jquery, kita hanya perlu menambahkan script CDN yang sudah disediakan oleh Vue.Js ke dalam file projek kita. Silahkan kunjungi web Vue.Js dan copy-paste CDN-nya.

Ada 3 versi yang disediakan Vue.Js diantaranya untuk prototyping atau pembelajaran, untuk produksi produk, dan untuk ES Modules. Kita gunakan versi yang pertama saja. Jadi silahkan copy script ini pada code editor kalian.

1
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Selanjutnya kita buat projek pertama kita dengan melakukan coding seperti berikut.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
 <title>Vue Js</title>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

 <div id="app">
    {{ message }}
 </div>

<script type="text/javascript">
 var app = new Vue({
   el: '#app',
   data: {
     message: 'Hello Vue!'
   }
 })
</script>

</body>
</html>

  • Baris 14: Kita harus melakukan instansiasi object Vue.
  • Baris 15: el merupakan kepanjangan dari elemen yang artinya disini kita definisikan elemen mana di dalam DOM (Document Object Model) yang akan digunakan untuk me-render template dari Vue ini. Dalam kasus ini kita akan menggunakan elemen #app yang artinya kita harus membuat id dengan nama app pada DOM atau struktur HTML-nya.
  • Baris 16 -17: Setelah melakukan instansiasi Vue, maka akan menghasilkan beberapa properti salah duanya  adalah data dan el tadi, dimana data ini yang akan atau dapat kita tampilkan pada DOM nantinya secara reactive.
  • Baris 9: Kita buat elemen app pada DOM-nya.
  • Baris 10: Kita tampilkan data dari Vue yang disimpan dalam property message dengan cara mem-bindingnya seperti ini {{ message }}.

Dan Jika kita jalankan pada browser, maka berikut ini adalah hasilnya.

Sekian tutorial Cara Instalasi Vue.Js Selanjutnya kita akan belajar sintaks-sintaks apa saja yang dapat kita lakukan dengan Vue.Js ini.
Tags:

Posting Komentar

Lebih baru Lebih lama