VueJs-#02 Memulai Vue.js

Sebelum memulai instalasi, disarankan untuk menginstall vue devtools terlebih dahulu pada browser anda. Hal ini dilakukan agar anda bisa melakukan inspect dan debug vue app sehingga tampilannya menjadi lebih user friendly.

Karena Vue.js adalah sebuah library javascript, tentunya kita perlu menyertakan file Vue.js di html sebelum kita dapat menggunakan dan memulai belajar Vue.js. Cara termudah untuk menyertakan file Vue.js adalah dengan menggunnakan CDN. Seperti berikut ini:

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

Anda bisa menggunakan CDN seperti cara di atas maupun mendownloadnya terlebih dahulu di website VueJs, tetapi yang paling disarankan menggunakan NPM

Membuat Contoh Program

Buat sebuah file index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello Vue!</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
  </script>
</html>

Buka file index.html menggunakan browser

index.html

Sekarang mari kita bahas satu persatu agar dapat memahami dengan lebih baik, Coba lihat script dibawah ini.

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

Aplikasi yang akan kita buat terletak pada bagian div di atas, mengapa harus div tidak yang lain ? karena div tidak berisi format apapun, kemudian coba lihat ada code id=”app” merupakan atribut dalam HTML, id disini sebagai penanda yang namanya tidak boleh sama antara satu id dengan id lainya pada contoh di atas kita menamakan app untuk id nya HTMLnya sudah beres sekarang kita kaitkan dengan Vue. mari lihat code dibawah ini:

var app = new Vue({
  el: '#app',
  data: {
    pesan: 'Hello Vue!'
  }
})

Script dia atas dapat diartikan sebagai berikut, kita akn buat Vue baru dengan element(el) yang di kaitka dengan #app , dan kita membuat sebuah variable baru bernama message dengan isi Hello Vue!!

Cuman gitu aja ? ets tenang dulu coba klik kanan->inspect elemen->console lalu ketik app.message di console maka akan keluar Hello Vue!! terus coba ketik kan lagi app.message = “Hello World” lalu tekan enter, seperti di bawah ini :

Tulisan di layar pun akan ikut berubah. Itulah yang dinamakan dinamis atau reactive dan VueJS mendukung akan itu.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>